you're reading:
CSS editing

Where is the theme CSS and how do I edit it?

http://wpbtips.wordpress.com/

(For users who’ve bought the Custom Design upgrade)

Basic terms
css-selectors

Where is the CSS of the theme?

You can view the original stylesheet if you go to Appearance > Custom Design > CSS, [see Update below] click “Edit” next to “Mode: Add-on” in the Publish module, and click the “theme’s CSS” link:
CSSPublishMode
You can also view it here (click name of theme then click “style.css”):

https://wpcom-themes.svn.automattic.com/

Update April 11: WP replaced the regular CSS editor with a narrower new editor in a black overlay sidebar over the blog preview. Το access the old CSS editor (including the module shown above), visit your main dashboard screen and change its URL from:
BLOG URL HERE/wp-admin/
to:
BLOG URL HERE/wp-admin/themes.php?page=editcss
(You can bookmark the page, so that you won’t have to enter this URL each time you want to visit the editor.)

Why is the stylesheet hidden like this?

When the link to the CSS of the theme was more prominent, inexperienced users would often copypaste the entire stylesheet into the CSS editor and start making changes to it. This a mistake: at best, it makes browsers unnecessarily read the whole stylesheet twice; but it can also create conflicts, because what takes precedence over what is very complicated. You can copy the original stylesheet and save it in a text file for reference, but you don’t copypaste it into the CSS editor (if you don’t like wondering why this or that didn’t work).

How do I make CSS changes on wordpress.com?

Unless you are an expert user who wishes to make very extensive changes, you retain the default edit option, i.e. the add-on mode, [Update: in the new CSS editor you do not check the option "Don't use the theme's original CSS"] and you enter only the selectors for the elements you wish to modify and only the rules for the properties & values you wish to add or override (after deleting the welcome message, of course). Apart from avoiding redundancies and possible conflicts, this also allows you to keep track of the changes you make, and remove or modify any of these changes without fearing you might mess the original.

Example

The original stylesheet of a certain theme includes this:

.post-title {
border-bottom: 1px solid #CCCCCC;
font-family: ‘Times New Roman’,Times,serif;
font-size: 2em;
font-weight: normal;
line-height: 120%;
margin: 0;
padding: 0 0 0.1em;
}

If you wish to make the post titles a bit larger and italicized, the only thing you’ll add in the CSS editor is this:

.post-title {
font-size: 2.1em;
font-style: italic;
}

When you wish to apply the same change to various elements, you can combine the respective selectors. For instance, if you wish to italicize the blog title, the post titles and the post metadata in the above theme, you add this:

#blog-title, .post-title, .post-metadata {
font-style: italic;
}

Selectors vary from theme to theme, and so does the structure of each theme. In addition, the less than elementary changes may require some inventiveness. For these reasons you shouldn’t expect to find manuals that give you simple, direct, one-size-fits-all answers to how-to questions. You need to familiarize yourself with the various CSS properties and their possible values, but you’ll always have to examine the particular situation in the particular theme you’re using. To examine your blog and identify elements, selectors and rules, as well as try out changes, you can use the Firebug add-on in Firefox, or similar developer extensions in other browsers.

You can also learn a lot in the wordpress.com CSS forum: you can study replies in general, search for a past reply to a specific question, and post your own questions. Note that users who’ve bought the Custom Design upgrade are entitled to staff support. Also note that replies in the CSS forum generally assume that you’re using the CSS editor as recommended.

Related support docs:
http://en.support.wordpress.com/custom-design/css-basics/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-css/
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Beginner tutorial and reference websites:
http://www.htmldog.com/guides/cssbeginner/
http://www.w3schools.com/css/default.asp
http://reference.sitepoint.com/css

About these ads

Discussion

21 thoughts on “Where is the theme CSS and how do I edit it?

  1. Hello Panos,
    How to use the option “Preprocessor:” in the CSS stylesheet editor? How to determine whether to choose LESS or Sass?
    Thank you…

    Posted by Duto Sri Cahyono | February 22, 2013, 04:15
  2. Hi,
    You stick to “None” if you haven’t downloaded a preprocessor and haven’t learned its language.

    Posted by Panos | February 22, 2013, 06:06
  3. Thank you Panos…

    Posted by Duto Sri Cahyono | February 22, 2013, 22:30
  4. This was sorely needed. Thanks for publishing it. Bookmarked and I’ll backlink too.

    Posted by timethief | February 23, 2013, 19:16
  5. Thanks TT. As you can tell, this is a replacement for devblog’s “if-you-have-the-wp-com-css-upgrade” post, which sadly is no longer available.

    Posted by Panos | February 23, 2013, 19:20
  6. Yes, I noticed that. I was tactfully not mentioning it. Too bad we cannot edit the links in forum threads. Mind you most of those threads have sunk to the bottom now and aren’t being clicked on.

    Posted by timethief | February 23, 2013, 23:17
  7. I’m sorry…I know this is the wrong place to ask a question, but I’m having widget-at-the-bottom issues, and there seem to be current comments there, but no spot to leave a reply. I’ve tried everything you suggested with the exception of deleting the divs, and I can’t figure out how to do that. Can you help? http://giantsequoiagrovepierpark.wordpress.com
    email: cfount@earthlink.net
    It’s inspiring to me to see you helping all these people! Thanks in advance.

    Posted by giantsequoiagrovepierpark | February 26, 2013, 07:21
  8. You’re welcome, but there’s nothing to correct: Minimalizine doesn’t have a widget sidebar, it only has footer widget areas. If you need a sidebar, you need a different theme.

    Posted by Panos | February 26, 2013, 07:34
  9. Thank you for this precious information, really helpful.

    Posted by A A Betari | May 18, 2013, 23:06
  10. If anyone teaches me how to remove the footer “proudly presented by wordpress” bla bla bla, I’ll love you!

    Posted by davidlproject | May 20, 2013, 00:52
  11. @A A BETARI: You’re welcome and thanks.
    @DAVIDLPROJECT: On wordpress.com you’re not allowed to remove the footer credits.

    Posted by Panos | May 20, 2013, 05:17
  12. Where do I find the actual CSS fromt he theme? You say “You can copy the original stylesheet and save it in a text file for reference” but where is the actual original stylesheet? I do have the upgrade. I have the page like you advised (BLOG URL HERE/wp-admin/themes.php?page=editcss) but the only thing I see there is the standard text:
    Welcome to Custom CSS!

    CSS (Cascading Style Sheets) is a kind of code that tells the browser how
    to render a web page. You may delete these comments and get started with
    your customizations.

    By default, your stylesheet will be loaded after the theme stylesheets,
    which means that your rules can take precedence and override the theme CSS
    rules. Just write here what you want to change, you don’t need to copy all
    your theme’s stylesheet content.

    If you need any further help, ask in the CSS Customization forum.
    ********
    There’s no actual stylesheet to be seen. At least not with the Oxygen theme.
    Thanks for the help!

    Posted by Chocoholic | May 20, 2013, 16:01
  13. The second section of the post is titled:
    Where is the CSS of the theme?
    In that section I’m giving two ways of finding the original stylesheet. (But you need Firebug more than you need the stylesheet.)

    Posted by Panos | May 20, 2013, 16:33
  14. Ah, got it. I overlooked the link to the theme’s original CSS :) Thanks! Now let’s see if I can get it done what I want it to do, cause so far things ain’t working the way I want them too….

    Posted by Chocoholic | May 20, 2013, 16:41
  15. I replied to your forum question too: one of the things you want to do cannot –or rather shouldn’t– be done.

    Posted by Panos | May 20, 2013, 16:45
  16. I noticed. Thanks so much for your help!

    Posted by Chocoholic | May 20, 2013, 16:47
  17. You’re welcome.

    My latest reply there was caught as spam. Re-posting it here, in case it will take too long to get unspammed:

    1) Sorry, I typed the previous reply before seeing yours.

    2) Yes I know the break tags aren’t in the code. To display code here, don’t use code tags: enclose the code in backticks (see the note on “Allowed markup”).

    3) To create the layout you want, you would start with this:

    .page-template-showcase-php #content-wrap {
    width: 100%;
    }

    But as I said, better look for a different theme.

    Posted by Panos | May 20, 2013, 16:59
  18. The “Spam” was successfully published at WP too :) Thanks for all the tips. I’ve checked the theme’s you gave the link for. So far Oxygen is still my favorite. And just because I like to play around, I’m gonna try to see if I can get it to work. The slider is fullwidth now without distorting the images, so that gives me hope :) Gonna try out a few things.
    If things don’t work out, I’m gonna see if there’s another theme to my liking!

    Posted by Chocoholic | May 20, 2013, 17:15
  19. I’m glad you want to try things yourself instead of waiting for others to give you the solutions!
    Correction: the slider isn’t full-width now, it’s dislocated (images aligned left, titles aligned right), and this looks terrible in my opinion.

    Posted by Panos | May 20, 2013, 17:26
  20. Hey I am new to WP – I want to remove the default Search bar from my theme template, but I don’t have an Editor button anywhere. I found the CSS Stylesheet using this site, but it only shows me the CSS: I am unable to edit it. I want this annoying search bar gone, but I have no idea how to go about doing it. All the forums say are “Go to the header.php” and delete such and such, but I can’t even get to the php in the first place! Any thoughts, broken down into baby steps?

    Posted by wrabbit007 | August 22, 2014, 23:50
  21. Assuming you have a wordpress.COM blog, this is the right forum:

    http://en.forums.wordpress.com/

    Posted by Panos | August 23, 2014, 00:05

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,507,972 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: