Genesis themes – How to customize News, Lifestyle and other WordPress themes.

Style selector | Theme images On page | Hyperlinks | Nav bar link colour | Title colour

Many StudioPress and Genesis themes have a built in colour style selector. This means you can change the colour of your site with just a few clicks.

.When Genesis themes have this option you can find it in the WordPress dashboard, click Genesis > Theme settings > Colour style. This video shows you how.

But not all StudioPress Genesis themes have this colour choice option.

.Some Genesis themes only have one colour scheme. However, you can change the colour schemes of many StudioPress Genesis themes by simply changing the colour of background images and other images in the theme’s images folder. This page is about how I make the changes.

Finding the right images to change the look of your Genesis Themes

1. First backup your site so you can restore it if necessary, then…
2. Look at your web page and note the colour and position of an element you want to change.
3. Open your theme’s images folder and look for images of the right colour.
4. Read the image names and try work out which is likely to be the one you want.
5. When you have selected an image, change its name adding backup- to the name. Because WordPress can no longer find the image due to its changed name, the image will no longer appear on your web page.
6. See if the look of your theme changes.
7. When you’re sure you have the right image, change the colour of the image, upload it to your server. Make sure your new image overwrites the original image and uses the original image’s name.
8. Test to see if you got the results you wanted.

The video goes in to more detail.

When changes to your Genesis themes don’t appear to be working check…

• Did you upload the right image with the right name to the right folder on your server?
• Do you use a caching plugin? Of so clear the cache.
• It’s also possible that your site is cached in your web browser, some web browsers such as Google Chrome let you clear the history for the last hour. Try this.

If you don’t like the look of your changes you can always reinstall your theme.
.

Changing the colour of the Hyperlinks in your sidebar and body copy of your Genesis themes.

This is easier than you might have expected. This is what you do…

• Open your child theme’s style.css (not the Genesis style sheet). Your child theme could be called News, Lifestyle etc.
• Search inside your style.css file for Hyperlinks.
• Change the colour of the links, it will look something like this in your style sheet code.

⁄* Hyperlinks
———————————————————— *⁄
a,
a:visited {
color: #a3b460;

I’ve made you a video to show you how it works.

.

Changing nav bar link colour in Lifestyle Genesis theme by StudioPress.

Some important points…

• The code we need is in the Lifestyle theme’s style.css file.

We’re editing 2 navigation bars

• The main navigation bar is styled using #nav code.
• The sub navigation bar is styled using the #subnav code.

Links have 4 states

• Link
• Visited
• Hover
• Active

Each state can be styled separately if desired.

The two navigation bars can have drop down lists of links that appear when you hover over the links in the nav bars.

When the page loads, the navigation text links you see are controlled by this code…

• #nav li a
• #subnav li a

When you hover your mouse over a navigation list item (a link), a drop down list appears.

The drop down lists are styled using this code…

• #nav li li a
• #subnav li li a

The difference is li

• li a Styles the nav bars
• li li a Styles the drop down links.

The Lifestyle theme navigation bars inherit the initial link colour from the Hyperlinks style that controls all text links on the page. If we want to set the initial colour for the navigation bar text links we can, by adding the color: property and a value to the #nav { code.

Editing the code…

Open the style.css file in the Lifestyle theme folder using a plain text editor, not a word processor.

Search for…

• #nav li a
• #nav li li a
• #subnav li a
• #subnav li li a

Change the hexadecimal code for the link colour e.g. color: #444; or use red, green, blue etc. www.html-color-names.com/
color: #444;
color: red;

.

Changing the title and description colours

If you want to change the colour of the website title or description that appears at the top of your site, you can.
If the title and description text don’t have a text shadow, you can change their colour using the WordPress dashboard. Click Appearance > Header in the sidebar, then look for Header Text > Text Colour. Type in the hexadecimal code for the colour you want to use or click the Select a Colour link.

But, if your theme uses a text shadow this might not work. You will have to use the theme’s style.css file.

Open your theme’s style.css file.

• Search for #title or #title a
• Look for the color: property and change the value.
• Look for the text-shadow: property and change the color: value.
• Search for #description.
• Change the color: #000000; property’s value.

This video goes in to more detail.

Wow! that’s a lot of information to take in in one go, but if you try one thing at a time and you’ll soon get the hang of editing Genesis themes to look just the way you want them.

Genesis themes are well coded and sensibly priced, they have good SEO features built in and a good support forum. You need the Genesis framework and a child theme but if you’re a web developer you can get the Genesis Pro Package and build all of you sites with a solid foundation.