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.


My Blog site has benefited much from your technical guidance. Thank you!

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.