(For users who’ve bought the Custom Design upgrade)
Basic terms
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:
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:
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:
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:
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
Hello Panos,
How to use the option “Preprocessor:” in the CSS stylesheet editor? How to determine whether to choose LESS or Sass?
Thank you…
Hi,
You stick to “None” if you haven’t downloaded a preprocessor and haven’t learned its language.
Thank you Panos…
This was sorely needed. Thanks for publishing it. Bookmarked and I’ll backlink too.
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.
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.
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.
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.
Thank you for this precious information, really helpful.
If anyone teaches me how to remove the footer “proudly presented by wordpress” bla bla bla, I’ll love you!
@A A BETARI: You’re welcome and thanks.
@DAVIDLPROJECT: On wordpress.com you’re not allowed to remove the footer credits.
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!
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.)
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….
I replied to your forum question too: one of the things you want to do cannot –or rather shouldn’t– be done.
I noticed. Thanks so much for your help!
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.
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!
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.
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?
Assuming you have a wordpress.COM blog, this is the right forum:
http://en.forums.wordpress.com/