Revised to incorporate Superfish 1.7.4 update now on Expressions version 1.28.4

When you want to make changes to the look of a theme the best way to do it is with a child theme. My previous post went through how to set up a basic WordPress child theme.

Child themes allow the user to make changes to the theme without actually changing any code in the theme. If you make changes to any files in the WordPress Theme, those changes will be lost when you update the theme, because the update process over writes all the files. At best, you will have to re-enter your changes. If you use a child theme, all your changes are in a different folder and can’t be over written by an update.

Expressions is child friendly, meaning it has been designed to allow users to use child themes to change the look of the theme. There are however a few quirks with the menu system that you will need to understand to be able to change the look of the menu.

This post covers setting up an Expressions Child Theme with one of the Expressions skins as a starting point. I will review dealing with the menu system, and will walk you through a few changes to get you started.

Jetpack CSS Editor Alternative

Turns out what I said above may not be totally true

Jetpack has a CSS Editor Plugin as part of it’s arsenal. I’ve never used it but it looks like a great way to modify the css of a theme. The instructions say the css file is loaded after the main style.css, so it should be a better option than a child theme if all you are doing is modifying the css for a theme. It is certainly simpler than using a child theme. This post continues assuming you are using the child theme, but you could skip the child theme and enter all of the css changes in the Jetpack CSS Editor. If you are a novice, the Jetpack CSS Editor may definitely be the better way to go.

Initial Setup

When I make theme changes I will use the Notepad++ editor or the Aptana Studio 3 editor. Rather than working on-line, I will edit the files on my desktop and then upload them to the website using the Filezilla FTP program. If the WordPress Editor is active it will appear under Appearance => Editor and you could use that as well.

  • To help get you started download the Expressions Child Theme
  • Unpack it and upload it the theme into your theme folder
  • Go to Appearance => Themes and select the Expressions Child Theme
  • If you are using a skin Go to Appearance => Expressions Options and disable Use Skins in the Styles tab

You don’t want the skin enabled if you are going to make changes with a child theme. The reason for disabling the skin is that the changes you make in the child theme could be over written by the skin css because it is loaded last.

One final thing. Because we want to start with a skin as a base you need to copy the skin css into your child theme. I will be using the gray skin as a base so go to the expressions/css folder and open up the gray-skin.css in your editor. Select all the css lines and copy them to your styles.css for the child theme. Below is what the first 55 lines of style.css should look like.

Fix the Menu

Save the changes, upload them and take a look at the site. Looks like we now have a functional child theme. Except the menu seems to be acting a little funny. There is a shadow over the items and the hover colors are not the same as the skin. Screen shots of the skin and the current child theme are shown below.

Original Gray Skin

child_4

Current Child Themechild_5

The reason for this is that the Superfish menu system loads their style sheet after the style.css so styles on the same elements will be replaced by the Superfish styles. The way around this is to add !important to the styles in the child theme. That way they can’t be replaced. Use this only when you have to because it can make de-bugging a nightmare.

Debugging Tip

When you want to change something on a theme, you open up the style.css file and it’s 3000 lines long. What are you going to do? It could take forever to figure this out!:-( If you don’t have Firefox download it and load in an app called Firebug. When you use this tool it shows the html elements on the left and the css on the right. You can play with either side and see the changes with out affecting the original. It is a great debugging tool and a quick way to find out where to make changes.

The modifications to the superfish styles are shown below.

So now we’ve got the gray skin styles in our child theme, and the menu is working. You could leave the menu alone and proceed to change other styles. But I think I want to take a run at snazzing up the menu.

Style the menu

I’ve decided I would like the menu items to look like buttons. I would like the buttons to be a dark gray with a gradient finish, and smoothed corners. I would also like the buttons to have the 3D effect of looking raised in the normal state, and pressed in the hover state. The text color should be an off white, and slightly bigger. Finally I’d like to make the hover colors darker.

The .sf-menu li class is the class for the top menu items. To soften up the corners we’ll use the css border-radius property and a 3px radius. To give the 3d appearance you need to use the box-shadow property. Refer to W3schools.com for more information about these properties. The buttons will need a bit of separation so I’ll add the margin property. The code is shown below.

child_6

The buttons look pretty cool and I’m tempted to stop there, but let’s add a gradient. Also notice the drop down menu items have the same effect, something that should be fixed.

The gradient is added by adding a css3 value to the background-image property. The gradient code is shown below, applied from top of the element to the bottom of the element.

I’ve also fixed the drop down issue. To do this I simply made the border-radius 0px, and changed the opacity of the box-shadow to 0.0. The drop down background colors have been darkened as well. These are in the .sf-menu ul li and .sf-menu ul ul li selectors.

The hover state was set up by making the gradient slightly lighter and I aslo reduced the opacity of the box-shadow from 0.8 to 0.2. You can play around with the settings to get a better looking 3D button but this is a good start.

Finally I increased the font size by adding font-size: 1.1em; to the .sf-menu a selector.

The code changes are shown below along with the menu screen.

child_7

Note that the gradient has some extra lines in it. The -webkit-, -moz-, and -ms- prefixes are special browser prefixes required to use gradients in Chrome, Firefox, and Internet Explorer browsers. The CSS3 standard is not fully adopted yet and will not be for a few years. Some browsers will initially incorporate a CSS3 property through the use of the prefix, ultimately adopting the standard after testing, and comfort that the property will remain in the spec.

The sub menu indicator arrows don’t look that great on a dark background so as a final part of this long post, we’ll change them. The new version of Superfish does not use png images for the arrows so the code is much more flexible, allowing greater control of arrow colors and opacity.The code you need to add is shown below.

The final screenshot is shown below.

child_8r

Here is the final code listing.

That’s it. Hope you enjoyed the post.

Happy Coding !