Skip to main content

Add CSS Rules Using Template Designer "Add CSS"

One of the most versatile ways to improve your blog is by adding CSS rules.

CSS stands for "Cascading Style Sheet". The term "style sheet" refers to the template sections which contain style rules, which affect the appearance of the blog. The term "cascading" refers to how you manage the rules.

With CSS, you have no need to edit existing style rules, to make a change. If you define your rules properly, you make higher level rules specific enough so they cascade over lower level rules.

To let us add higher level rules to the template, quickly, we have the Template Designer "Add CSS" wizard.

"Add CSS" is in the Advanced section of Template Designer.

To add a rule, you go to the Advanced section of Template Designer, and "Add CSS". Template Designer, you'll remember, is accessible from the "Customize" button on the dashboard Template page.

Select "Advanced", then "Add CSS".

And there are the rules, previously added. Each rule is separated from each other rule, by a blank line.

Here, we see a recently added rule, to make the dynamic template sidebar remain visible.

#gadget-dock {position: fixed !important; right: 0px !important;}

To add the rule, simply paste or type, into the window.

Observe the Live Preview window, as you add rules using "Add CSS".

If the Live Preview, in the bottom half of the display, is focused on the page elements affected by your new rule, you may even see the display change, as you paste your new rules in place.

If you need to adjust a rule, just edit it in the window. If you see severely unacceptable results, just delete the text, as needed.

When you have added your rules, and Live Preview shows you acceptable results, click "Apply to Blog". Then load the live blog, and carefully examine the results.

Always add a blank line, between each pair of rules.

There is one important step, when using "Add CSS". If you paste or type a rule into "Add CSS", and there is code already in place, add a blank line between each rule and the next.

From Template Designer, for this blog:

blockquote, pre {
background-color: #f7f7f7;

body.item-view pre {
font: normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
font-style: normal;

See the blank line?

Without the blank lines, the rules get ignored.

Keep the "Add CSS" window contents simple, for easy maintenance.

Other than that, you paste each rule into the window, in whatever order pleases you. You can't see a lot of lines, so you will want to keep the "Add CSS" window simple.

If your template update requires more than 2 or 3 new rules, you should probably use Template Editor - and add your CSS, HTML, and XML code, directly into the template. But if you have 1 or 2 CSS rules - and they are specific enough - "Add CSS" is a great way to make quick template adjustments.


Rajan C Mathew said…
My Blog site has benefited much from your technical guidance. Thank you!

Popular posts from this blog

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.

Help! I Can't See My Blog!

I just posted to my blog, so I know that it's there. I can tell others are looking at it. But I can't see it.

Well, the good news is you don't have a blog hijack or other calamity. Your blog is not gone.

Apparently, some ISPs are blocking *, or maybe have network configuration or infrastructure problems. You can access or you can access, but you can't access, or

You can't access them directly, that is. If you can access any free, anonymous proxy servers, though, you may be able to access your blog.

Note: You can use PKBlogs with the URL pre packaged. Here is the address of this post (with gratuitous line breaks to prevent the old post sidebar alignment problem):

And an additional URL, to provide to those suffering from this problem, would be the WordPress version of this post: