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.
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:
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.
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.
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