How to use the custom stylesheet

Aug 1st, 2008

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.css should 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.custom to 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.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 1^st one governs the size of the title and 2^nd 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.

Posted in: Help.

36 Comments

Dave says:

August 2, 2008 at 1:55 am

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.

Reply
Ravi Varma says:

August 2, 2008 at 11:50 pm

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

Reply
Dave says:

August 6, 2008 at 5:26 am

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.

Reply
Allen says:

August 6, 2008 at 6:50 pm

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!

Reply
Ravi Varma says:

August 8, 2008 at 3:44 am

@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.

Reply
Brad says:

August 8, 2008 at 7:06 am

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!

Reply
Haak says:

August 8, 2008 at 2:45 pm

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.

Reply
Ravi Varma says:

August 9, 2008 at 10:45 am

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.

Reply
IndiaAsks says:

August 9, 2008 at 1:33 pm

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.

Reply
Ravi Varma says:

August 9, 2008 at 3:26 pm

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.

Reply
IndiaAsks says:

August 11, 2008 at 11:19 am

Thanks, missed that. Havent had many comments :p

Reply
Jim says:

August 14, 2008 at 4:26 am

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

Reply
Ravi Varma says:

August 15, 2008 at 7:48 pm

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>
```
Reply
Adam says:

August 20, 2008 at 11:42 pm

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

Reply
Ravi Varma says:

August 21, 2008 at 12:31 am

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.

Reply
Sanna says:

August 21, 2008 at 8:28 am

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

Reply
Adam says:

August 21, 2008 at 5:09 pm

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.

Reply
Ravi Varma says:

August 21, 2008 at 8:43 pm

@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.

Reply
Adam says:

August 21, 2008 at 9:56 pm

Thanks a lot your template is amazing.

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

Reply
Adam says:

August 21, 2008 at 10:01 pm

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?

Reply
Ravi Varma says:

August 23, 2008 at 12:06 am

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.

Reply
Adam says:

August 23, 2008 at 3:01 am

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.

Reply
Carol says:

September 7, 2008 at 11:54 pm

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

Reply
Ravi Varma says:

September 9, 2008 at 7:22 pm

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;}
```
Reply
bill says:

September 17, 2008 at 12:33 am

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!

Reply
Ravi Varma says:

September 17, 2008 at 10:18 pm

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.

Reply
bill says:

September 18, 2008 at 3:50 am

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!

Reply
Julie Little says:

September 22, 2008 at 12:07 am

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

Reply
Ravi Varma says:

September 23, 2008 at 1:18 am

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.

Reply
michael says:

September 24, 2008 at 6:52 pm

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

Reply
Ravi Varma says:

September 26, 2008 at 4:26 am

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.

Reply
Laura says:

September 30, 2008 at 2:09 am

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!

Reply
Ravi Varma says:

October 1, 2008 at 11:45 pm

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?

Reply
Patti Ann Stafford says:

October 23, 2008 at 7:42 pm

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

Reply
maddler says:

October 29, 2008 at 11:14 pm

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

Thank you!

Reply
Michael Thompson says:

December 30, 2008 at 3:52 am

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

Reply