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.
Its nice theme. I installed it on my blog today. Thanks.
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.
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..!!
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
.
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
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!
okay, i figured out #2. YAY! but still would very much like to remove the RSS box.
thanks so much!
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
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 !
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.
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
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
[...] 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 [...]
I’m using this way…
body.custom .homelink a {
color: #B24D62;}
Thanks for article…
Ya learn smoehitng new everyday. It’s true I guess!
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
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”!
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.
that’s cool CSS codes, but I like my default CSS so much..
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
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;}
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
Sofia,
In your sidebar.php file remove the following line:
That will completely remove the RSS feed box.
This line:
In sidebar.php change this
to this
<!–#–>
just in case you want the RSS feed back at a later time.
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.
So cool, loving it.
Ravi, worked with Primepress for two days, great theme and great support! Well done… I am impressed!
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.
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?
thanks for useful and meaningful articlesd
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.
Hi,
I would like to replace the header title text with a logo… any help would be appreciated!!
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!
Thanks for article…
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
Such an informative site thanks for this information.
Thanks
Md.Alamin Khan
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
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
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
Was an informative article, thank you
a handy quick theme
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