When you are ready to alter your blogger via html, it is easy to start with the fonts and colors. Keep in mind that not everyone will have access to your chosen fonts and colors so you may want to choose the more popular ones.
Blogger allows you to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind later. It also helps if you share your template with someone else who wants to customize their version a bit.
Before you start anything, be sure to download a back-up copy of your blog . Simply go to the layouts tab- html link.In the <head> section of your code, you'll need to have a pair of < b:skin> < /b:skin>> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page.
- name - This name may contain only letters or numbers, and each name in your template must be unique.
- description - This can be a more descriptive name, and can include spaces. This is what will appear in the Fonts and Colors tab.
- type - This can be either "font" or "color".
- default - The default value. For colors, this should be a hexadecimal color code, e.g.
#FF0066. For fonts, it will be a list of the formfont-style font-weight font-size font-family.
After the variables are set up, the rest of the code looks like regular CSS, with one exception. Any time you want to use a color or font for which you made a variable, you'll enter $variable_name instead of the actual color or font. In the example above, you can see that we created a variable called bgcolor and set it to white (#fff). Then later on in the code, instead of setting the body background property to white explictly, we just said background: $bgcolor. This still has the effect of making the background white, with the difference that we can change it
You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see W3 Schools CSS Examples and The W3C Introduction to CSS.
Blogger default templates have all the CSS information towards the top, between tags. You'll see a bunch of lines there that look like this:
| Code | Examples | ||||||||||||||||||||||||||||||||
| Colors | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
color:blue; | This text is blue. | ||||||||||||||||||||||||||||||||
background:yellow; | This has a yellow background. | ||||||||||||||||||||||||||||||||
You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a greater range of colors (e.g. #0033AA). For more information on color, please see the Web Color Reference.
Thus, the color value "#800080" is the same as "purple". | |||||||||||||||||||||||||||||||||
| Borders | |||||||||||||||||||||||||||||||||
border:solid 1px red; | This has a red border. | ||||||||||||||||||||||||||||||||
| A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, border-bottom, border-right, or border-left. | |||||||||||||||||||||||||||||||||
| Fonts | |||||||||||||||||||||||||||||||||
font-family:"Times New Roman",Serif; | This is in a serif font. | ||||||||||||||||||||||||||||||||
font-family:Verdana,Sans-Serif; | This is in a sans-serif font. | ||||||||||||||||||||||||||||||||
| You can specify a list of font choices. If the first one isn't available on your reader's computer, the next will be used, and so on. Indicating "Serif" will use any available serif font. It is safest to state font-family and then Sans-Serif or Serif following your choice. Verdana is a popular font for web text while Times New Roman will give your blog more of a newspaper or magazine-like quality. | |||||||||||||||||||||||||||||||||
font-size:24px; | This text is 24 pixels high. | ||||||||||||||||||||||||||||||||
| The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%). It is good practice to stick with the measurement that you use for the rest of your code. Sizes of text very among different fonts however, most text in the body of the blog is usually 10px. | |||||||||||||||||||||||||||||||||
font-weight:bold; | This text is bold. | ||||||||||||||||||||||||||||||||
| Choices are bold and normal. | |||||||||||||||||||||||||||||||||
text-decoration:underline; | This text is underlined. | ||||||||||||||||||||||||||||||||
| The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links. | |||||||||||||||||||||||||||||||||
text-align:right; | This text is right aligned. | ||||||||||||||||||||||||||||||||
| The alignment can be set to left, right, or justify. | |||||||||||||||||||||||||||||||||
| Margins and Padding | |||||||||||||||||||||||||||||||||
margin:15px; | This has a 15px margin all around. | ||||||||||||||||||||||||||||||||
padding:15px; | This has 15px of padding all around. | ||||||||||||||||||||||||||||||||
| Margin and padding both specify the amount of space around something. The difference is that a margin is outside the border and padding is inside. (The border here is just for illustration.) As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with margin:1px 2px 3px 4px; where the order is top, right, bottom, left. | |||||||||||||||||||||||||||||||||
For more help
0 comments:
Post a Comment