A client contracted us to make some updates to the StudioPress Lifestyle WordPress theme. I’m documenting the changes here so our client can possibly do this work themselves in the future, and it may also help others out there looking to tweak the StudioPress (or really any) premium theme.

Changing the Menu Colors

Changing the color scheme involves updating the style.css stylsheet and creating new versions of various images. I did a rough mockup of the color changes in Photoshop, and then went to work on the images.

To change the header and headline elements from blue to orange, I did the following steps to these files:  header.png, header_blank.png, logo_blank.png, headline.png, and topnav.png.

  1. Open the image in Photoshop.
  2. Goto Image –> Mode –> RGB Color to change the mode.
  3. Create a new layer on top of the background.
  4. Use the paint can tool to fill the new layer with your new color.
  5. Change the layer type from “Normal” to “Color”.
  6. (optional) If the brightness of the image is off now, create a new layer filled with the new color and change the layer type to “Luminosity”.
  7. Save the image for web as a PNG 24.

To change the background color of the higlighted/active submenu item, I changed the background color of line 381 (the “#subnav li a:hover, #subnav li:active” declaration).

You can also edit the navbar.png and navhov.png files to change the main menu.

Changing the Header

To change the logo from an image to plaintext, in the WP admin goto Appearance –> Lifestyle Theme Options and change the Header Blog Title setting from “Image” to “Text”.

You can also edit the file in the /images/psds folder to use an Image logo in the header.

Changing the Body/Page Background Colors

I used the Firebug plugin for Firefox to inspect the original website to find out where certain colors and styles were set in the style.css file.

Using Firebug, I learned that the body’s background color is set on line 19. I changed this color from #E2DDCB to #1462A6.

You could also do a search and replace, but this color was only used in one spot in the style.css file.

Moving inward from the background, the next band of color is actually the border of the “wrap” element. I changed the color of the border declaration on line 35 to #6595BF.

Changing Link and Text Colors

The hyperlink colors are declared between lines 40 and 60.  The lifestyle theme uses the same color for links and visited links. I wanted a different visited color, so I changed that section of code to look like this:

a {
color: #1462A6;
text-decoration: none;
}

a:visited {
color: #6595BF;
}

a:hover {
color: #6595BF;
text-decoration: underline;
}

a img {
border: none;
}

a:focus, a:hover, a:active {
outline: none;
}

To change the article heading link colors, search for “#content h1 a, #content h1 a:visited” and “#content h1 a:hover”. (I changed the colors around lines 586 and 595.)

Hiding the Post Meta (“by”, “posted on”, “filed under”, “tags”, etc)

I hid these using CSS. I added a “display: none;” line to the .date  declarations in style.css on line 779. To hide the tags (postmeta2) section, I add these lines under the .postmeta2 declaration around line 841:

.postmeta p,  .postmeta2 p {
display: none;
}

This will hide everything inside the postmeta2 section, but will still show the bottom border and bottom margin.

Changing the Sidebar

I removed the Blog Roll and Admin sections by commenting out lines 9 through 25 of the sidebar_right.php file in the theme directory.

I then added the following widgets:

  • I added a “text” widget to “Sidebar Top” with some Google Adsense code for a 300×250 ad.
  • I added a “text” widget to “Sidebar Top” with the title “Featured Video” and some embed code from YouTube. (Note: it didn’t seem to matter that the YouTube embed width was greater than 300 pixels. YouTube must size it to fit the page.)
  • I added a “recent posts” widget to “Sidebar Top” with the default settings.
  • I added a “text” widget to “Sidebar Bottom Right” with the title “Advertisement” and some code for a custom 120px x 600px ad.

Updating the Homepage

The first thing we need to do is enable the home.php file as a template for our pages. We need to change this line in home.php:

<?php get_header();  ?>

to:

<?php
/*
Template Name: Homepage
*/
get_header();
?>

Save and upload the file. Now edit the “Home” page in WP and choose “Homepage” as the page template. Save the page.

To choose which blog categories are used for the featured content areas, in WP Admin goto Appearance –> Lifestyle Theme Options. Change the appropriate settings.

To get thumbnails to show up in the featured sections, add a custom field called “thumbnail” pointing to an image (70×70 pixels is good) to use. You can upload these images to the post first and then copy the src url.

To set the thumbnails for the last (bottom) featured section, use “hpbottom” as the name of the custom field.

Setting up the Featured Gallery (Fading Script)

The first step here is to install the “featured content gallery” plugin. (It wasn’t included with my install, but it’s a freely available plugin.) In the WP Admin goto Plugins –> Add New. Search for “featured content gallery”. Install the plugin. Activate the plugin.

Now goto Settings –> Featured Content Gallery and choose either the category or page/post IDs to use for the gallery. You must also set a height and width and text area height in the next section (I used 588 width, 400 height, 100 height for the text). I left the colors as default. Update the settings.

The last thing you need to do is make sure you upload a picture (mine were 588×400) and set a custom field called “articleimg” that points to the URL of the image you want to show up. The gallery will not show up unless you set this custom field.

Click here to get a copy of the StudioPress Lifestyle WordPress theme.

20 Responses to “Editing the StudioPress Lifestyle Theme”

  1. Cool Springs says:

    Thanks! Great post, I appreciate your tips on customizing the Lifestyle Theme. I just bought it and am playing around with it right now.

  2. Holistic Online Marketing says:

    We’re customizing this theme for one of our clients today and needed a solution to updating the logo. This guide is extremely helpful!

    • Jogesh says:

      Thanks a lot for this post…keep rocking… :)

  3. Jason says:

    I’m glad folks are finding this useful. I am going to add a few more sections based on some other work we did (specifying ads per page, video widget in sidebar, changing blogroll/link categories order, highlighting the current category tab).

    Let me know if you have questions.

    • Jorge says:

      Jason – your documentation has been an absolute wonderful help to me. Thank you so much. I was curious if you published anything on adding 728×90 banners or defining ads per page.

      Thanks again for your posting!

  4. Tommy says:

    Thanks for the great post. Will this work for all Studio Press Themes?

  5. Fergal says:

    Thanks a million for the guide, it saved me loads of time. kind regards.

  6. popza says:

    Thank you this information is really useful … I was wondering if you had any info on how to adjust the MAGAZINE theme from Studiopress … it seems that I cannot get the thumb nails to appear even though using the custom field thumbnail and hpbottom

  7. Dental Santa Clarita says:

    Those were very helpful topics for changing a theme. Hope you could also suggest some color themes too.

  8. Andrea H says:

    Thank you so much for posting this. It is very helpful.

  9. Tia says:

    Thanks for the post. How do you make the homepage look like a blog?

  10. wolfcoach says:

    Thanks for putting this up – you hit on a lot of the items I am battling with a current customization :)

  11. Jenny says:

    My featured content gallery will not show any pictures just a black screen, I added the ‘articleimg’ category and uploaded the link needed to show the picture. Please tell me what may be wrong:

    my website is http://www.cameraguide101.com

    Thanks

  12. Tara says:

    Thanks so much for this!

  13. Tara says:

    Thanks so much for this! I’ve been looking for an article like this forever.

  14. Dentist Sherman Texas says:

    I have used the Lifestyle theme twice now – once for a dentist and again for a doctor. I really like some of its features. It is, however, rather demanding in that documentation for many of the things that need change or adjustment are not esay to find or figure out. Your post is a welcome development aid for those of us interested in Lifestyle. Cheers! Dennis Foreman

  15. mel says:

    Thanks so much. This is helpful. Do you know how to add more homepage features box?

  16. buzzmeUp says:

    a big help.. thank you so much… it helps me in editing… im configuring my site to make it better… thank you again..

  17. Mike says:

    how to add date at top right header?

    • Jason Coleman says:

      Hey, sorry, I can’t provide general Genesis/Lifestyle support here. Try the StudioPress forums.

* Required
* Required, Private