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.

Comments

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

Popular posts from this blog

What's The URL Of My Blog?

We see the plea for help, periodicallyI 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?".

Leave Comments Here

Like any blogger, I appreciate polite comments, when they are relevant to the blog, and posted to the relevant article in the right blog. If you want to ask me a question thats relevant to blogging, but you can't find the right post to start with (I haven't written about everything blogger related, yet, nor the way things are going I don't expect to either), ask your questions here, or leave an entry in my guestbook.

As noted above, please note my commenting policy. If you post a comment to this post, I will probably treat it as a "Contact Me" post. If you have an issue that's relevant to any technical issue in the blog, please leave a comment on the specific post, not here. This post is for general comments, and for non posted contact to me.

If the form below does not work for you, check your third party cookies setting!

For actual technical issues, note that peer support in Blogger Help Forum: Something Is Broken, or Nitecruzr Dot Net - Blogging is, almos…

What Is "ghs.google.com" vs. "ghs.googlehosted.com"?

With Google Domains registered custom domains becoming more normal, we are seeing one odd attention to detail, expressed as confusion in Blogger Help Forum: Learn More About Blogger.My website uses "ghs.google.com" - am I supposed to use "ghs.googlehosted.com", instead?It's good to be attentive to detail, particularly with custom domain publishing. This is one detail that may not require immediate attention, however.