It’s true! However, unlike the service you’re using to blog on WordPress.com - customizing the theme is not free. At the time of this post, the current cost is $15.00 per year to obtain access to the Custom CSS feature on your WordPress.Com account.
WARNING: The WordPress.Com Custom CSS feature is not for the faint-at-heart. It does require knowledge of CSS in order to accomplish the task (or hire someone to accomplish it for you).
In your WordPress.Com administration panel, click the Upgrades tab in the top menu to access the place you need to be in order to purchase the option. Once done, you are granted access to the CSS editor and are able to edit the CSS to style your template the way you’d like.
With the Custom CSS option, you do not have access to any of the template files (i.e.: header.php, footer.php, sidebar.php, etc). Rather, you have access to a stylesheet editor that creates an additional, Custom CSS file - and since your Custom CSS is loaded after the theme’s CSS, the styles in YOUR CSS override the styles in the original Theme CSS. Clear as mud? Good!
Not sure where to begin? Well, like I mentioned before - it does take some CSS know-how to accomplish the customization of the CSS of your WordPress.Com theme. Here’s how I would get started….
I use Chris Pearson’s Cutline theme on my own WordPress.Com account. If I wanted to start styling a new Style Sheet for it, I would begin with the basics.. by looking at the source code of my own blog….starting after the < /head> tag….
Any style element (also called selectors) you see can have a style applied to it in your Custom CSS. Some style elements include: body, id, class, span, ul, ol, li, p. For instance, in the image above, the very first style element you see is the body tag. This can have a style applied to it in the CSS like this:
body {
margin:0;
font-family:arial, verdana, helvetica, sans-serif;
font-size: 12px;
background-color:black;
color: silver
}
That style gives the margin definitions, the font you’d like to use, the font size, the background color of the page and the color of the text on the page.
The very next style element you see in that source code is: <div id="container">...</div>
Again, that element can be styled in your CSS in any way you’d like:
#container {
width: 800px;
background-color:white;
border: 2px solid silver;
padding: 5px;
}
This style defines the width, background color, border size and color and padding of the container id.
All style elements that have an id (p id, div id, etc) must start with the hash symbol in the stylesheet. All style elements that have a class (p class=, div class=, etc) start with a period. For instance, this would be an id element in your CSS:
#container
While this would be a class element in your CSS:
.container
This is just some very basic information about styling with CSS. Here are some great CSS resources if you’re interested in learning more about it in order to customize your own CSS on your WordPress.Com account:
- CSS Tutorial at HTML.net
- Beginner’s Guide to CSS
- W3C.Org - Starting With HTML + CSS
- Dave Raggertt - Intro to CSS (W3C.org)
- CodeStyle’s CSS Guide
Have fun!
