31. Defining and Implementing Custom Styles  BEFORE YOU BEGIN
29 Understanding the Blogger Template Structure and Editor
The style sheets used in the standard Blogger templates range from simple to complex; the example shown here is one of the simplest style sheets of them all, but it does reflect the three different types of elements you will encounter: styles for tags, styles for IDs, and styles for classes. Because it's your template, after all, you can modify existing styles or add your own styles for use within your template. Style sheet entries are nothing more than sets of rules that govern the display of your content. You can learn more about the specific language of style sheetsCSSin Appendix B, "CSS Fundamentals." 1. | Locate the Style Sheet Start Tag
All style sheet entries can be found between the <style></style> tag pair. Some style sheets will include links to external URLs; in those instances, you will not be able to edit the styles defined in the file sitting on someone else's server. However, you can still add individual entries through the Blogger template editor and then modify your template to use your new styles.
31. Defining and Implementing Custom Styles 
For instance, suppose that you are using a template that includes an external link to a style sheet, and in that style sheet is a class called .headerText, which is defined as 36-point Wingdings or some such font. Because you can't modify the definition of the .headerText class in the external style sheet, simply define a new class, such as .myHeaderText, in the style sheet area of your template and replace all instances of .headerText with .myHeaderText wherever it appears in the body of the template itself.
| 2. | Find the Definitions for Tags
Your style sheet may contain definitions for entire tags, as shown here with the definition of the <h1></h1> tag pair. In the style sheet shown here, all text surrounded by <h1></h1> tags will have a 1-pixel dotted black border at the bottom of it. If a tag is not defined in your style sheet, you may add it here; any instance of that tag in use within your template will then have the style applied to it. If you want to set a default set of styles for your content, such as font-related styles including family and size, you can do so by adding a style sheet entry for the <body></body> tag pair.
| 3. | Find the Definitions for IDs
When a hash sign (#) precedes a style entry, it indicates an ID. In this instance, the ID is attached to a specific tag, such as h2#archives or p#bloggerBug. This type of definition specifies exactly which tags can use the particular ID. In this case, the archives ID can be applied to only an <h2> tag, and the bloggerBug ID can be applied to only a <p> tag. In other words, this text would have styles applied to it:
<h2 >Some Header Text for Archives</h2> <p >Text around the Powered By Blogger credit.</p>
This code would not become stylized because the IDs do not apply for these tags:
<p >Some Header Text for Archives </p> <div >Text around the Powered By Blogger credit.</div>
When you want an ID to be applied to any tag, simply define it as such in the style sheet; in the example below "style definitions" would be replaced by the actual style definitions used to create the style, such as font attributes, height and width, padding and margins, and so forth:
#someID {style definitions}
In valid code, IDs can be used only once in a template. If you want to apply the same style to more than one tag or in more than one instance, use a class instead of an ID.
| 4. | Find the Definitions for Classes
When a dot (.) precedes a style entry, it indicates a class. In this instance, four individual classes are defined for various text elements related to Blogger comments. As with IDs, classes can be applied to specific tags, like this example, where style definitions would be replaced by the actual style definitions used to create the style, such as font attributes, height and width, padding and margins, and so forth:
p.someClass {style definitions}
Here, the someClass class would be valid only when used with a <p> tag, so this would not be properly styled:
<h1 >Important Heading!</h1>
However, unlike IDs, classes can be used multiple times within a template.
| 5. | Implement Custom Styles
To add an element to your style sheet, simply type its definition between the <style></style> tag pair. Before you begin, review the content in Appendix B to ensure that you are using the correct syntax for the element. After you have defined a tag, ID, or class, you can use it within your template and blog posts.
After making any style sheet modifications, be sure to republish your entire blog and not just the index. Your archive pages and post pages use the same style sheet, and for your modifications to be accessible by all pages, all pages must be republished.
|
|
