Add CSS Function (Blogger)

The Add CSS function can be found at the bottom of the  Advanced option in the Template Designer. This function can be used with the Layout and Designer templates.

  Basically this option overrides the existing template coding to allow modifications  to the template. This is a safe and easy way to edit the template coding without the fear of messing anything up.  This also allows a live view of what the modifying changes. You can also remove any added in coding by simply going back to the Add CSS screen.  Now this is not changing the template code but adding a code to override the existing coding. This allowing your Template Designer functions to remain working.

Note: All added CSS will be place above the <:b/skin> tag in the Edit HTML page. So you will not find the added CSS coding in the element modified. 

 About Page Source:

Since the Designer templates are almost completely made up of  /* Variable definitions  it is best to formalize yourself with the Page Source. The Page Source shows the interpreted coding after the /* Variable definitions are added.

To access the Page Source you can right click and select "View Source" or "View Page Source" depending on which browser you are using.  For Fire Fox the  hot keys  Ctrl+U can pull up the source as well. Other browsers you may need to go to the  View in the top tools of your browser. In here you can also locate the source.

Example of Page Source:

So in your Edit HTML page you may see a code like this below.

 color: $(body.text.color);

But in the Page Source this code will display as something like this

color: #e1e1e1;

This  above is the interpreted coding.

How to Use Add CSS:

When using the Add CSS function you must specify what  element you wish to modify.

Examples of Elements:

body {

.content-inner {

#header-inner {

.header-inner {

.main-inner {

This is just some of many elements you can choose from. You will need to have some basic knowledge of coding to understand what your looking for.

After you have assigned the area you will need to add in the modifying code and add the closing tag.

.header-inner {
padding: 20px 0 0;
}

Red is the modifying code and the Orange is my closing tag.

You do not need to enter in the full  code you find in the Page Source. This is unneeded since the code is already in the Edit HTML page. All you are doing is modifying the existing  code.

So for a example if my Page Source displays this for the element.

#content-wrapper {
width: 980px;
margin: 0 auto;
padding: 0 0 5px;
text-align: left;
background-color: #000000;
border: 1px solid #02021b;
border-top: 0;
}

Now lets say I want the text to be align to the center. I would only need to add this code below.

#content-wrapper {
text-align: center;
}

I hope this post was understandable and you can now begin experimenting with the Add CSS function. This option was added by Blogger so we don't mess up the templates coding to the point that the Template Designer options no longer work.