Add CSS in the Template Designer to restyle your blog's appearance

My first attempt at modifying the appearance of this blog after a makeover with the Blogger's Template Designer, by editing its Template via Design | Edit HTML, was quite a handful! But armed with the extra knowledge acquired since and further experimenting with the Designer for my other blog, Peacockflower's World, I'm extremely happy to have discovered the easier alternative way to do it.

No need to go about the long and winding way of editing the blog's template (i.e. Edit HTML) which can be quite intimidating and may risk messing up the codes! Just use custom CSS (cascading style sheets) to restyle the feel and look of your blog! Once you've learned how-to, it's really quite simple, fast and fuss-free!

Follow these steps to
add custom CSS to your template, using the Template Designer :

1. Sign in to your Blogger account. At Dashboard, click Design | Template Designer.
   
   
2. Go to Advanced | Add CSS tab. Add your custom CSS code snippets in the field box provided on the right. The best part about this method is changes you make will be reflected instantly in the live preview below which makes it so easy to keep amending the values, etc until you're finally happy with the results. You can click the Expand Preview if necessary for a broader view.
   
   
   
   
3. If you're satisfied with the changes, just click the orange Apply to Blog button to save changes.
   
   
4. Finally, click the Back to Blogger button to quit the Blogger Template Designer and return to the Page Elements page. That's all to it!

Note: Moreover, it's as easy to undo the changes! If you ever want to remove or amend the changes made to your blog, just return to the Template Designer anytime and edit the related CSS snippets that you've added earlier. Remember though, that your custom CSS will remain there, but, like other customizations, they will be removed if you ever change your template design.
All the custom CSS added via the Template Designer will also be shown in the blog's template at Design | Edit HTML page, just before the code: ]]></b:skin> where you can edit them or add new ones too.

Now, let's take a look at the kind of custom CSS code snippets that can be added to your template to restyle your blog's appearance. There are so many, just check out at W3Schools CSS Tutorials for more in-depth examples and Dave Raggett's W3C Introduction to CSS.

To assist and give you an idea, below is appended a summarized guide to some of the popular CSS tweaks that you may want to try. You'd notice that each CSS code snippet starts with a tag or selector name, and then followed by a list of style properties and a semicolon, inserted between the curly brackets { and }. If there is more than one style property in the list, separate them with a semicolon.

CHANGES YOU MAY WANT TO APPLY	CSS CODE SNIPPETS TO ADD (you can change the px value, color, etc. as highlighted in orange or remove the unwanted style properties as desired)
1. HEADER SECTION:
- Blog's title: how-to center-align text or set a specified left/right position, the latter being useful if you've added an untitled header image. Also, reduce the height of the top margin, it's okay to use negative values.	.header h1 {text-align:center; top-margin: -0.3em;} Just change the position center to left or right and the value in px as you wish. Alternatively to set a specified left position, follow example as below: .header h1 {margin-left:255px;}
- Blog's title: how-to change the font family, size and text transformation. Also, how-to include letter-spacing.	.header h1 {font-family:'Apple Chancery', cursive; font-size:300%; text-transform:uppercase; letter-spacing:0.1em;}
- Blog's description: how-to center-align, capitalize and bold the text, change the font-family and font's size, and reduce the top and bottom margin to shorten the wide gap/space between the title and description.	.header .description {text-align:center; text-transform:capitalize; font-weight:bold; font-family:georgia, serif; font-size:90%; margin-top: -10px; margin-bottom: -5px;}
2. PAGE LIST (TABS) SECTION:
- Page tabs: how-to change the font style, size and color.	.tabs-inner .widget li a {font-family:'Lucida Handwriting', cursive; font-size:120%; color:red;}
- Tabs default background: how-to remove the background color, shadow, etc.	.tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList .widget-content {border:none; background:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none ;} .tabs-inner .section {border:none;}
- Other widgets below the tabs: how-to center-align and decrease the height of margins between them.	.tabs-inner .widget {text-align:center; margin:5px 0;}
3. BLOG POST SECTION:
- Images/pictures: how-to remove border and shadow around images.	.post-body img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
- Post footer: how-to add a background color and change/reduce the font size.	.post-footer {background-color:#f2f1f2; font-size:85%;}
4. SIDEBAR SECTION:
- Widgets' title: a) how-to text-transform the title; b) change the font-family; c) remove shadow in the background	.sidebar .widget h2 {text-transform:uppercase; font-family:'Lucida Handwriting', cursive; text-shadow:none;}
- Gadgets (widgets): how-to reduce or shorten the height between gadgets.	.sidebar .widget {padding-bottom:0px;}
- Profile image: how-to remove background color, border and shadow around the image.	#Profile1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
- Realign the vertical top of sidebar column: how-to align the top of sidebar column with that of the main post column.	.main-inner .column-right-outer {margin-top:0.6em} (Note: change the em value accordingly to fit your template design. Use a negative value if the sidebar's top is lower than the top of main column)
5. FOOTER SECTION:
- How-to center-align widgets and change the font-size of text.	.footer-outer {text-align:center; font-size:90%;}
- How-to reduce or shorten the height between specific widgets.	(First, you have to identify your widgets' ID - go to Design | Page Elements, and mouse over the specific gadget's Edit link. The widgetId can be read on the browser's status bar. Example widgetId=HTML3 will be referred to #HTML3 in the CSS. You can group the widget # [each gadget is followed by a comma, except for the last one] and add a style for them as seen below.) #HTML3,#HTML6,#Attribution1 {margin:2px;}
6. GENERAL:
- How-to reduce or shorten the height (space) between the Header section (or the PageList widget if you've added one) and the Columns below.	.main-inner {padding-top:20px;}

Other related links:

• Blogger Help on Editing CSS in the Template Designer
• Blogger Help on What can I do with CSS
• W3Schools on CSS Examples

Enjoy!

Keep learning~~keep smiling~~keep sharing!!

Last edited: November 11, 2010