PrimePress Theme for WordPress Rotating Header Image

How to use the custom stylesheet

When modifying a WordPress theme, finding the right element in the stylesheet and making changes to it is confusing. Finding them again, for when we update the theme or simply decide to tweak the styles some more, is even more frustrating.

A solution then… is to use a separate stylesheet for all those custom mods & tweaks we make to personalize the theme.

And that’s exactly what custom.css is for. A dedicated stylesheet for all your CSS customizations. By placing all the custom styles in one place, your stylesheet will be much more organized and you’ll know where everything is when you choose to change something later on.

And more importantly, it makes updating the theme a no-hassle. all you have to do is to preserve the custom.css file to keep your changes intact.

custom.css How-to ?

There are many ways to do this, but the easiest is using the Theme Editor in WordPress. Just follow the simple steps below.

  1. log in to your WordPress admin panel and go to Theme Editor
  2. make sure PrimePress is selected under Select theme to edit:
  3. custom.css should already be open at this point, if not click on custom.css on the right side under Theme Files to open it.
  4. type in your custom CSS styles here prefixing body.custom to each CSS rule.
  5. If you just dabble around in CSS occasionally and are not comfortable writing the styles,
    • copy the relevent styles from the main stylesheet (style.css)
    • paste them in your custom.css
    • attach body.custom to each style and tweak away

No clue what CSS is? no problem, coming soon… are some easy instructions detailing all the customizations that can be done.

A little more clarity

For example, if you want to change the size of the site title and color of the site tagline, the CSS styles associated with these in the main stylesheet (style.css) are

.homelink {
	font-size: 35px;
	}

.description {
	color: #666666;
	}

The 1st one governs the size of the title and 2nd one the tagline color. Copy & paste them into your custom.css

Lets say you want to increase the title to 40px and change the tagline color to a cool blue, here’s how the modified code would look like.

body.custom .homelink a {
	font-size: 40px;
	}

body.custom .description {
	color: #3399ff;
	}

As per the CSS cascading rules, a more specific & targeted style declaration wins over a lesser specific one. By adding body.custom, we are being more specific at what we want and so it overrides the default style.

76 Comments

  1. Dave says:

    Ravi, just found this theme while I was looking for something new. Its great and if you keep providing these tips your audience will build. I really like the changing header image feature.

    1. Insurance says:

      Its nice theme. I installed it on my blog today. Thanks.

  2. Ravi Varma says:

    Thanks Dave.. that’s motivating
    I fully intend to put up more documentation and tips soon.

  3. Dave says:

    Ravi, I should point out that Chris Pearson, pearsonified.com, offered a great level of support when he started out with Cutline. Obviously he’s now gone on to other projects but his support is what helped make him successful.

  4. Allen says:

    Love this theme! You’ll see that I’m playing with the custom CSS quite a bit. I am stumped though how to change the font used in the widget headings — it’s some sort of all-caps right now but I’d like to modify it. I’ve been tweaking what I thought were the settings but it doesn’t seem to change. How can I do this?

    Also, if I wanted to modify the category results pages (i.e. when a category is selected and list of posts are returned), where would I do this?

    Since my content is mostly recipes, the resulting category pages don’t look very nice when returned — I’d like to display the post title and thumbnail of first image in the post (possible?). It would also be nice if the category page didn’t follow the post display logic from blog settings. I’d like my blog to display the current post, but if I do the category pages will only show 1 result when selected (and then a user needs to page through the results one by one).

    Sorry for so many questions — again, thank you for this theme!

  5. Ravi Varma says:

    @Dave
    thank u dave, that put a smile on my face :-) I don’t know why.
    I’m a great admirer of chis pearson’s work. the thing I like the most about his work is – great designs usable by a wide audience.

    @Allen
    superb! wonderful job there Allen.
    I see you’ve already changed the sidebar headings. here’s the custom.css code in case someone else needs it.

    body.custom .widget h2 {
    	font-variant: normal;
    	}

    category and date based archives are controlled by archive.php template file (it requires rewriting the loop in archive.php). Instead, I’d suggest you use a plugin called custom query posts, it is much simpler and a better solution.

    Displaying clickable thumbnails requires not just editing the archive.php template file but you’d have to manually edit every post. If you can spend some time on this, you can get it to work using the info on WordPress Codex and the excerpt editor plugin.

    If you just want to display titles in categories without any content, delete this bit of code in archive.php, its at around line no. 35

    <div class="entry-content">
    	<?php the_excerpt(); ?>
    </div>

    Don’t forget to preserve any changed files whenever you update the theme.

    1. sam says:

      Hi Ravi Varma!

      Nice theme here. I’m using it now and tweaked a bit on its rotating header (but i prefer fixed one,nevermind ) , the custom css ,background thingy and archive stuffs. I would seriously recommend this clean theme to readers out there.
      Keep up good work,man !

      Thanks again..!!

  6. Brad says:

    I am an amateur with all of this, but I love your theme sooo much that I am dedicated to try to figure out how to switch from what I have been using into yours. It seems that all that comes up for me in the sidebars is the recent posts. I can’t seem to figure out why. All the other sidebar widgets and code are listed in sidebar, but nothing is appearing. Thoughts?

    Thanks so much for your time!

  7. Haak says:

    I am using the theme and enjoying it…it is really nice work on your part. I am just starting to tweak it. The obvious place to start are changing the images to match the theme of my blog. What are your recommendations for image sizes for the rotating header image? Thank you again for excellent theme.

  8. Ravi Varma says:

    Thanks a lot guys. I’m glad you liked it.
    @Brad
    Brad, guess I’m a little late, I see you’ve already got it working. drag some sidebar widgets to fill up the sidebars. I see many users leaving the second sidebar at its default. You can add what you want by dragging some widgets here. On the Widgets page, select sidebar 2 from the drop-down on the right side, click show and add them and then save changes.

    @Haak
    Haak, the image width should be 980px. height can be any value but IMO height from 150px to 200px will look good. any more than that I think pushes the content down a bit too much.

    I suggest you upgrade the theme to v1.2 before you start tweaking it. The new version has a better image rotation script.

  9. IndiaAsks says:

    Finished updating the theme on my site in record time. Less than 15 minutes and that included editing the theme files to add additional tag info. Moved the CSS to the custom.css file and it really makes a difference while upgrading. No need to worry about lost styles :D
    This theme absolutely rocks.

  10. Ravi Varma says:

    whoa! that was fast…
    I think you were the first to upgrade. really glad to know it was easy…
    one small thing though, in your custom.css delete the .custom in the third rule. body.custom .custom a.comments-link should be body.custom a.comments-link for them to be red.

  11. IndiaAsks says:

    Thanks, missed that. Havent had many comments :p

  12. Jim says:

    Is there any way to add a link to each of the rotating banners?

  13. Ravi Varma says:

    Jim, I’m afraid you cannot make each of those images link to a different address. however, you can make all of them clickable to the same address. To do this, open header-images.php in the theme folder and wrap the <img /> tag with an <a> tag like this.

    <a href="<?php bloginfo('url'); ?>">
    <img src="......" />
    </a>
  14. Adam says:

    I am new at adding this blog thing. I had a quick question. The date is underlined when ever you post a new blog. How do you remove that underline. Also the RSS is underlined how do you remove that as well.

    Is it possible to add the COMMENT button at the end of the blog since that is where most people look for adding comments.

    Thanks in advance :)

  15. Ravi Varma says:

    Hi Adam, paste this code to into your custom.css to remove the underline

    body.custom abbr {
    	border: none;}

    comments link shows up only on the homepage. If you want to move it to the bottom of each post, you’d have to edit a template file. Here’s how.

  16. Sanna says:

    Hi Ravi,
    I am new to wordpress and found your theme. I really love your theme and now am I trying to get to look the way I want :) I hope that you maybe can help me?
    I would like to change the color on all headlines, I have been trying to find it in the stylesheet but I cant…how do I do?

    thanks for any help you can give me..

    //sanna

  17. Adam says:

    Thanks a lot Ravi that helped.

    I have another question. When ever you click on one of the categories they don’t show the picture that i have in that blog however they do show it on the home page. How do you make it so it shows the picture that you have in the blog like on the home page whenever you click one of the categories.

  18. Ravi Varma says:

    @Sanna
    Thank you Sanna,
    I’m not sure which headlines you wanted to change the color of. If its the post title, the class you have to target is .entry-title a If you want to change the color of headlines within the post, then the classes for each headline are .entry-content h2 through .entry-content h6
    Here’s an example:

    body.custom .entry-content h2 {
    	color: #ff0000;}

    @Adam
    Adam, you’d have edit a template file again. open archive.php to edit. find this line (line no.36)

    <?php the_excerpt(); ?>

    and replace it with

    <?php the_content(); ?>

    you’d have to do the comments-link thing here too, if you want the comments to appear at the end of each post in category pages.

  19. Adam says:

    Thanks a lot your template is amazing.

    Ill be sure to come back soon with more questions till i am all done!

    :)

  20. Adam says:

    Lol i forgot to ask this sorry for all the questions i am new at this.

    http://skillnotluck.kingstonellc.com/blogs/?p=20#comments

    If you see the comments being posted 2 of the backgrounds is all black how do you make it so its not all black and has its own box with its own color?

  21. Ravi Varma says:

    Hey Adam
    these are the rules governing the comment styles.

    body.custom .commentlist li {
    	background: #ffffff;}
    
    body.custom .commentlist li.alt {
    	background: #ffffff;}
    
    body.custom .commentlist li.authorcomment {
    	background: #ffffff;
    	border: none;}

    The first one controls the background color for all the comments.
    Second one is for every alternate comment.
    Third is for author comments.

    I’ve put in a white background for all the above. paste them in your custom.css and change the background to a color of your choice.

    btw… you’ve done a great job with the design.

  22. Adam says:

    Thank you so much for your fast responses. Ill make sure i post back when i have another question.

    Thanks on the comment. I tried to match the design to the main site. Keep checking back at it to see more updates :D .

  23. Carol says:

    How do I change the color of my site name, and the names of the various headings, either on posts or pages? Thank you. Carol

  24. Ravi Varma says:

    Carol,
    here’s the code to change the color of the site title

    body.custom .homelink a {
    	color: #B24D62;}
    

    code to change the color of post titles. 1st one below is for color in it’s link state (on homepage, categories, archives etc.) and the second one is for when they are static (on single post page). change the colors to your liking.

    body.custom .entry-title a {
    	color: #B24D62;}
    
    body.custom .entry-title {
    	color: #B24D62;}
    
  25. bill says:

    Hey Ravi,

    first, thanks for access to this theme. i think it works quite well, and is impactful. i am using it for a hockey site for my cousin. i am not a noob to css but am missing something. I am trying to add an html formatted page schedule) into the theme embedding the css in the post. this works for other themes and sites i have access to and work on but i am having trouble here.

    my first instinct was to switch to another theme that operated similarly where i wouldn’t run into the same issue. however, i would love to keep the theme and figure out a way around this.

    here’s the site: http://www.esuicehockey.com

    and a snippet of the code i am trying to place in a page.

    http://esuicehockey.com/schedule_neu.html

    thanks in advance, either way. cheers!

  26. Ravi Varma says:

    Thanks Bill and good job there..
    from what I understand you want to add the schedule table in a WordPress post.
    In WordPress, inline styles are fine but embedded styles in a post (though they work) are not advisable. Also the HTML background property used in <td> is deprecated in XHTML and doesn’t work in most WordPress themes.

    Here’s a workaround. insert only the table markup (do not include the <head> and <body> tags) in the post. define the HTML background in your styles and add them to your custom stylesheet

    .table_headers {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	text-decoration: none;
    	padding: 0px;
    	margin: 0px;
    	background: url(http://www.esuicehockey.com/wp-content/uploads/2008/08/esu_table_bg.gif) no-repeat;
    }
    

    Another thing is PrimePress has some table styles defined in style.css. delete those (line no.127 to 132) to get rid of any default styles.

  27. bill says:

    danke viel mals. i should have tried putting the styles in the custom sheet. i suppose how i was trying to do it was sloppy at best. thanks for taking the time to take a look and offer a solution. i will make sure to keep my styles more organized and specific moving forward.

    cheers!

  28. Julie Little says:

    Hi really like this theme. I’m trying to change the color of the headers (I guess its called a header or title) in each post. I’ve read the above and do not quite understand what to do. I went to the custom stylesheet and changed the color that was there and nothing happened. Basically, I don’t know what I’m doing and I don’t want to mess it up. If anyone can Help me, that would be great. I basically need to know how to change colors of fonts and categories, and the color of the title. Thanks a bunch to any input.
    Julie

  29. Ravi Varma says:

    Hi Julie,
    I’m guessing you want to change the color of all the links. In that case, delete the existing code in your custom.css and add this code.

    body.custom a {
    	color: #0C9CCF;}
    
    body.custom a:hover {
    	color: #FF0000;}
    

    change the color to your liking. 1st is for the color when the links are static. 2nd is for the color when hovered over. The above code changes the color all the links including post headings and category links.

  30. michael says:

    Hello Ravi. I’m using your template rebuilding my current site lion1music.com. the webmaster who built lion1music.com wants too much money for simple updates and takes forever to do the work. I got tired of being held hostage and decided to reconstruct the site using wordpress. Its my first time building a site.
    Its taking me too long to figure out what plugins/ template pages to use to construct the site. The new does not need to duplicate the old but i need a content base tortural. sub pages for each category. pay pal to sell merchandise. i need to cut through all the templates and plugins the wordpress offers and get to the meat of it. I love getting instructions and don’t want to spend the time guessing how to get this site up and running. took me a week to get to this point. going nuts can you make some suggestions.

    http://lion1music.com/wpnow

    Michael

  31. Ravi Varma says:

    Hi Michael,
    Welcome to WordPress. The downside (I think) to learning things through online research is, we learn everything in bits and pieces and it takes some time to get the bigger picture. Though a little overwhelming, there’s no better place than the WordPress codex for tutorials.

    About the plugins, take a look at this essential plugins post. The WP e-Commerce plugin seems like a perfect fit for your needs ie to set up shop.

  32. Laura says:

    This is a really nice theme that you have designed. Thank you so much!

    I have a question about the widgets. Currently, on my administrative “widgets” page, it says that no widgets are in use. However, I can see widgets on my page, including Recent Posts, Categories, Search, the Calendar, Pages, Links, and Meta. I do want some of these there, but I would like to remove the Calendar, and (at least for now) Pages.

    Earlier, when I was setting up my page, I chose several widgets to put in Sidebar 1. When I looked at my page, the widgets I had selected appeared twice.

    Also, I just tried choosing some widgets for Sidebar 2, but even after I saved those selections, I could not see them anywhere on my page.

    Can you advise me on the above three problems?

    Thanks!

  33. Ravi Varma says:

    Hi Laura,
    The stuff you see in the sidebar, when you don’t add any widgets, are like placeholders (instead of leaving the sidebars blank). The moment you add (drag and drop) any widget to any of the sidebars, the default setup is overridden and only the ones you select are shown.

    The widgets are supposed to work when you add them. Did you try hitting Ctrl+Refresh or Shift+Refresh after you added and saved them?

  34. Hi Ravi,

    I love this theme but I would like the background–the far background, the back within the posts, within the side bars, etc. to all be black. I need all the text to be white, links can be another color—-and the borders to the sidebar boxes and post boxes to all be white as well.

    Is there a simple way to do this? php is not my thing, btw. LOL.

    Thanks for your help!
    Patti Ann

  35. maddler says:

    just started using it on http://www.eth0.it, disabled random images while I create some custom images. Simply a GREAT THEME!!!

    Thank you!

  36. Michael Thompson says:

    hi Ravi,

    Is there a way to have a different set of wigets on the blog vs the other pages? I am trying to use your theme on for a static site.

    Thanks for a great theme.

    Michael

  37. Pam says:

    Hi Ravi,
    Great theme–so great that my other organizations are having me convert to PrimePress, too!

    I would like to alter my custom.css and
    1. permanently remove the “subscribe to our RSS” box
    2. permanently move the tabs down so our tagline (our mission) is fully visible

    Thank you so much!

  38. Pam says:

    okay, i figured out #2. YAY! but still would very much like to remove the RSS box.

    thanks so much!

  39. Nicki says:

    Dear Ravi,
    I am trying to adapt you theme for http://www.britishfibroidtrust.org.uk/blog (by the way it is a great theme you provided).
    I wonder if you can help me with the followings:
    [1] Idealy, I would like to have a log-on facility on the main home page rather than to log-on from a log-on specific page (default process of wordpress). How do I do this?
    [2] I altered the file colors.fresh.css in an attempt to get rid of baby blue color (wordpress default) but somehow the dashboard and the button “logon” for submitting the logon info still has the blue background. Where did I go wrong?
    [3] if I have to stick to having a separate log-on page (as it is at the moment), I somehow could not align the bft logo with the form. Have you an idea?
    Thanks a million for your help in advance.
    Nicki

  40. Gio says:

    Hi Ravi,

    Thanks a lot for your theme. It’s so great. We are using it since september and the rotating header is enjoying us so much.

    However, I would like to change the font of main title of our blog (the equivalent on that page of “PrimePress Theme for WordPress”). I would like to use Courier New.

    I have tried your tips, but it had no effects on the appearance.

    Could you help me, please.

    Thanks a lot !

  41. HomeWorker says:

    Hello Ravi,

    First of all I’d like to congratulate you on this exceptional WP theme.

    I consciously choose it to publish this blog Small Business Advertising

    I’m trying to SEO it a little bit, I’d like to insert keywords in the code, like you do with a web page, and I know a bit of html code, but none of this.
    The problem is it asks to make the files writable before saving changes, and for directions offers: See the Codex.
    So before bothering anyone I tried the Codex and then the WP forums, and ended being more confused.
    How can I make the WP files writable so it accepts the changes?
    What’s the php template where I can insert my keywords?

    Thank you very much in advance.

  42. Tild says:

    Hello Ravi:

    First, let me just say how much I love using Prime Press 1.3.1. It’s the best WordPress theme I’ve ever used, and I hope to stick with it going forward into the foreseeable future. :)

    That said, I also have to admit that I’m really an idiot when it comes to using the custom stylesheet.

    What I want to do is put a “Digg this” button at the bottom of each post on my blog. This is the java code snippet I need to add:

    ..But I don’t know where to add it, or how to put it in the Custom stylesheet.

    Help me, Obi Wan! (maybe I should say ‘Ravi Wan’?)

    Many thanks :)

    Tild Dallelie

  43. Walt Ribeiro says:

    Hi Ravi,

    Is there any way to make the Sidebar move up (so it fits snug against the header)

    I made the Header Picture and area a shorter width, and would like to slide the sidebar in the empty spot on my website (www.waltribeiro.net)

    I imagine its easy, but have tried everything. Any help would be appreciated – its a great theme!

    -Walt

  44. [...] provides easy-to-understand instructions on how to use the custom sylesheet.  Even if you don’t know CSS code, you’ll be able to follow along thanks to provided [...]

  45. müzik says:

    I’m using this way…

    body.custom .homelink a {
    color: #B24D62;}

    Thanks for article…

    1. Brendy says:

      Ya learn smoehitng new everyday. It’s true I guess!

  46. Annemarie says:

    Many thanks for the great theme!

    I’m new to WordPress/blogging/CSS etc … and need a bit of help.
    1st, can the Theme be customized to change the sidebar content per page?
    If so, how?

    If it’s done w/”custom.css” … I need more help because when I click on “Theme” and then “Edit” … there is not an option for “custom.css”

    Does this mean I need to upgrade this theme? If so, how’s that done?

    Thanks again, I look forward to your reply.
    Annemarie

  47. Stephanie says:

    This website is a godsend! I’m new to wordpress and your theme is EXACTLY what I was looking for… and this site is telling me all I need to know to manipulate it to how I want it. Oh Ravi, thank you so much for putting everything in “plain english”!

  48. Tim says:

    I echo those who’ve posted who are new to WordPress/blogging and say thanks for the great theme and all the tips on your site, particularly those on customising the CSS.

  49. indr@ says:

    that’s cool CSS codes, but I like my default CSS so much..

  50. Sofia Hogan says:

    Thanks for the template Ravi. It really fits the bill!

    Can anyone tell me where I can remove the “Subscribe To Our Feed via RSS”? For now, I don’t want it on the sidebar but cannot detect it in the code.

    Thanks!

    Sofia

  51. Sofia, put this in custom.css. However, I’m still trying to find out how to avoid the double thin grey line which appears instead of the RSS feed box. Cheers – J

    /*—–sidebars—–*/
    /*Subscribe box*/
    body.custom #pp-subscribe{margin-bottom:30px;}
    body.custom #pp-subscribe ul {padding:0px;}
    body.custom #pp-subscribe li {display:block; float:left;}
    body.custom #pp-subscribe a{padding:5px 5px 5px 50px; font-weight:bold; font-size:12px; line-height:33px; display:none;}
    /*—–RSS feed*/
    body.custom #pp-feed{background: url(images/pp-rss2.png) no-repeat 4px 4px;}
    /*—–email subscription*/
    body.custom #pp-email{background: url(images/pp-email.png) no-repeat 4px 4px;}

  52. Rob Speers says:

    Hi Ravi

    I am a novice. Where do I go to change the background color and/or add a background image to the page?

    Very nice theme. I like the tabs at the top for the pages and the easy to edit sidebar widgets (and 1 or 2 columns).

    Cheers
    Rob

  53. Jake Posey says:

    Sofia,

    In your sidebar.php file remove the following line:

    That will completely remove the RSS feed box.

    1. Jake Posey says:

      This line:

      1. In sidebar.php change this

        to this

        <!–#–>

        just in case you want the RSS feed back at a later time.

        1. This blog just doesn’t show .php lines. However it’s obvious which line you have to comment out. It’s the line with include(TEMPLATEPATH . ‘/subscribe … in it.

  54. Gifts says:

    So cool, loving it.

  55. Daniel says:

    Ravi, worked with Primepress for two days, great theme and great support! Well done… I am impressed!

  56. Have set up my personal blog and modified the Primepress theme. Very nice work Ravi and keep up the good work in the future.

    I just wonder if its possible to remove the line underneath the header menu and also remove the header menus (home,aboute me) a little bit further to the right, so it is parrallell with the right corner.

  57. I have tried everything but nothing seems to remove the annoying table borders when i make tables in my articles/pages. Even if the BORDER=0 the PRIMEPRESS overide it and ake the table with borders. How can i remove this?

  58. Havuz says:

    thanks for useful and meaningful articlesd

  59. Brad says:

    Is there any way to keep the stylesheet from updating, so the custom CSS will not be needed? I’m trying to change the background color and the body.custom doesn’t seem to work with the body.

  60. leewal says:

    Hi,

    I would like to replace the header title text with a logo… any help would be appreciated!!

  61. Val says:

    Hi, I’m using this theme for my consulting business website (I’m just getting started with the business), and I need to be able to add the “TM” next to my business name. (I haven’t filed paperwork yet on it.) I tried using HTML for superscript on the Blog Title part (where it says “PrimePress Theme for WordPress” on this theme page), but that didn’t work. Help! How do I add a superscripted text?? (And also be able to do so on the Tagline?)

    Thanks! That’s been my only complaint so far – though it may be due to user ignorance rather than template limitation!

  62. Thanks for article…

  63. Tyler says:

    Does anyone know what to write in the CSS if I want to change the color of the text to white? I want the posts and basic, non-linked text to be white (against a black background– I got the black but can’t figure out how to switch the posting text).

    Thanks for your help!

    Tyler

  64. alamin says:

    Such an informative site thanks for this information.

    Thanks
    Md.Alamin Khan

  65. liton says:

    Great article on social media. This article points out some good information about how social media is a big factor on business

    Thanks
    Liton mia

  66. bivian says:

    Your article seems interesting, i have noted it my digg and stumble account.The point you are making is easy to understand and effective. I have blog site for SEO, Art,Shopping.

    Thanks
    bivian tilma

  67. romal says:

    Hello there ,
    this is a very interesting article. I tell you that the subject is more profound that appear. Believe me !!! Very good site.Keep it up.I liked the look and feel of ur site. . I have many blog site for Link, directory,Hosting
    ,Sports and much more.

    Best of luck
    Romel Naan

  68. Matbaa says:

    Was an informative article, thank you

  69. nedenleri says:

    a handy quick theme

  70. Jacob says:

    Great article on social media. This article points out some good information about how social media is a big factor on business regards,Jacob Schuhe

  • Recommended Host

    If you are looking for a good web-host, Dreamhost is among the best out there. Apart from the great stuff they offer, Dreamhost's got a hassle-free hosting environemnt ideal for WordPress. Type in PRIMEPRESS as the promo code to save US$50 while signing-up.