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.
- log in to your WordPress admin panel and go to Theme Editor
- make sure PrimePress is selected under Select theme to edit:
custom.cssshould already be open at this point, if not click on custom.css on the right side under Theme Files to open it.- type in your custom CSS styles here prefixing
body.customto each CSS rule. - 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.customto each style and tweak away
- copy the relevent styles from the main stylesheet (
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.

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.
Thanks Dave.. that’s motivating
I fully intend to put up more documentation and tips soon.
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.
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!
@Dave
I don’t know why.
thank u dave, that put a smile on my face
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.csscode in case someone else needs it.body.custom .widget h2 { font-variant: normal; }category and date based archives are controlled by
archive.phptemplate file (it requires rewriting the loop inarchive.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.phptemplate 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. 35Don’t forget to preserve any changed files whenever you update the theme.
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!
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.
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.
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
This theme absolutely rocks.
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-linkshould bebody.custom a.comments-linkfor them to be red.Thanks, missed that. Havent had many comments :p
Is there any way to add a link to each of the rotating banners?
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.phpin the theme folder and wrap the <img /> tag with an <a> tag like this.<a href="<?php bloginfo('url'); ?>"> <img src="......" /> </a>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
Hi Adam, paste this code to into your
custom.cssto remove the underlinebody.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.
Hi Ravi,
I hope that you maybe can help me?
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 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
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.
@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 aIf you want to change the color of headlines within the post, then the classes for each headline are.entry-content h2through.entry-content h6Here’s an example:
body.custom .entry-content h2 { color: #ff0000;}@Adam
Adam, you’d have edit a template file again. open
archive.phpto edit. find this line (line no.36)and replace it with
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.
Thanks a lot your template is amazing.
Ill be sure to come back soon with more questions till i am all done!
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?
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.cssand change the background to a color of your choice.btw… you’ve done a great job with the design.
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.
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
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;}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!
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.
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!
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
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.
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
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.
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!
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?
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
just started using it on http://www.eth0.it, disabled random images while I create some custom images. Simply a GREAT THEME!!!
Thank you!
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