Monday, April 25, 2011

Adding a new CSS (formatting) rule to your blog's template

This article is about how to add a new Cascading Style Sheet (CSS) rule to your blog's template, including its mobile template.

(It assumes that you know the CSS command for the rule you want to add:  check a CSS reference guide if you need help to write the command - I've found that Sitepoint's  HTML Utopia: Designing Without Tables Using CSS guide is very useful.)



What are CSS rules

CSS rules are a way to apply standard formatting to HTML:  you say what formatting rules are in the rule definition, and then just use the rule name everywhere else in the blog that you want to apply that particular format.

It's useful because it lets you change the formatting throughout your blog by making a change in only one place (the rule).

If your blog has a Designer or Dynamic template, then adding a CSS rule is very easy.   (Ref:  "What type of Blogger template do I have?")

If you're using a Layout or Custom template it's a little more complicated - and you should make sure you're aware of the disadvantages of changing your blog's template.


Adding a CSS rule to a Designer or Dynamic template


1  Log in to Blogger, and go to the Dashboard.


2  For the blog that you want to add the rule to, choose Design > Customize > Advanced


3  Scroll to the bottom of the list of options, and click Add CSS.    This this opens a panel on the right hand side of the screen.


Enter the new rule underneath any other rules that are already listed in the panel, or apply the change you want to the rules are already there.


5  If you want the rule to apply on your blog's mobile template as well as for desktop visitors, then enter a second version of the rule with ".mobile " at the beginning - AND see the note below about extra one-off steps for mobile rules.

Example, one of my blogs has these rule to format the lines in certain tables:
.table1stLine td {
padding-top: 10px;
}
.tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}
To get these rules to apply when visitors using smartphones or tablets look at my blog, I also needed to add these rules:
.mobile .table1stLine td {
padding-top: 10px;
}
.mobile .tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}


5  Click Apply to Blog (top right corner of the screen),



NB  The Add CSS window now shows you any rules that have been added to the template via the window previously.



One-off extra steps to make sure that the mobile rules are applied


If you have added one or more .mobile  rules, then to make sure that they are applied you also need to:

1   Apply a mobile template to your blog, and

2   Make sure that you have chosen the Custom option for it.  
(To start with, Blogger shows Default - you need to change this with the drop-down list)



Tip:  you can check that a mobile template has been turned on for this blog by editing your template and searching for this text:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
If the text is present, then you have enabled a mobile template.   If it's not there, then you need to apply a mobile template in the usual way:   do not try just adding that text.



Adding a CSS rule to a Layout template


1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:
]]></b:skin>
  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the first ]



Adding a CSS rule to a Classic template


1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:
  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the </head> statement.



Related Articles




Apply a mobile template to your blog

Advantages and disadvantages of changing your blog's template

What type of Blogger template do I have?

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

6 comments:

  1. Cool! it works...first time I use this CSS stuff..now it I could find a list of things that can be done to improve the template using CSS it would be great...like how to put the header image at the center...how to prevent images from getting out of the column and overlapping... etc
    Thanks for the tip

    ReplyDelete