Skip to main content

The Template Designer Uses Cascaded Code

CSS stands for Cascading Style Sheets - and the new Designer Templates use CSS to full advantage.

The new Layout templates, with the GUI "Fonts and Colors" and "Page Elements" wizards eliminated the need to edit template HTML to change fonts or colors of many template objects, or to add or move objects around the screen. The Template Designer goes even further, in GUI wizardry.

We can select template backgrounds, layouts, and an expanded array of fonts and colors, all without editing template HTML.

Besides the expanded GUI wizardry, the CSS concept is used to full advantage, where we can enter additional CSS rules. You need only enter the CSS rule into the Advanced - "Add CSS" wizard, to add or override any CSS rule in the template header.

In Blogger Help: Editing CSS in the Template Designer, we see a simple example to get us started.
Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:
.Header {
text-align: center;
}

Just paste that into the "Add CSS" window, and watch the Header text jump into center, in the preview window below, right before your eyes. Don't blink.
If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.

In other words, there's no need to use the "Edit HTML" wizard to add, or to change, any CSS rules. Just add what you need, in the "Add CSS" window. It's that simple - a live preview, and one button to apply the changes previewed.

A second example is provided, and this one should be of great interest to many blog owners.
The second CSS change we'll cover is how to add your own background image to your blog.

When using "Add CSS", always follow each individual section of code by hitting "Enter", and adding a blank line. Every different CSS code addition should be separated from the one above it by a blank line, to make each section of code work properly.

If the Template Designer GUI controls take care of 90 of 100 of the needs to tweak template HTML, the "Add CSS" wizard should take care of 9 of the remaining 10.

Comments

Anonymous said…
Thank you!! That's so much easier than messing around with html.
Lee said…
So helpful! Thank you!
Janet said…
Oh my gosh, you are my hero. Thanks so much for making blogger accessible to newbies like me!
Unknown said…
It works like magic to my blog. Thanks so much.

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.

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.

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?".