Click here on how to Change Templates.
Classic Template:
Classic template are from back in 2004 and they do not offer many options the Layout and Designer templates do. Many of the Classic templates were incorporated into the Layout Template of 2006. So looking in the coding and seeing the year the template was designed saying 2004, does not necessarily mean it is a Classic template. Their are some key features to tell the difference between the two.
The main feature you can see is that the Classic templates do not have a Design option on the dashboard. This means no Page Elements or add gadgets either. Limiting the ability to design your blog without some knowledge of coding.
You will also notice in the Edit HTML page that their is no /* Variable definitions in the coding at the top of the HTML coding. If you look farther you will notice some of the elements of the blog are defined with a @ sign.
Image of Classic Template Edit HTML page
Layout Template:
The Layout templates were released in 2006 with a big leap from the Classic templates. Allowing the custom design options to be done with little or no knowledge of coding.
The Layout templates will have a Design option on the dashboard. Once in the Design option you will notice several options you can use. Page Elements where you can add gadgets and content to your blog. The other will be Template designer in which you can change many colors and features of the blog. Layout Templates are not compatible with Background or Layout option in the Template Designer. These options are only used in Designer Templates.
Layout templates Edit HTML coding will display /* Variable definitions near the top. But in this section you will see the options are limited to just the colors and fonts. Most the elements in the template are defined with a # sign.
Note: The Layout templates are now compatible with the Add CSS options which can be found in Advanced section of the Template Designer.This option was not available when the Template Designer was first released.
Designer Templates:
Designer templates were released in 2010 adding even more to the table for those with no knowledge in coding. These templates are equip with many features making is easy to customize your blog with just a click of a button. These templates are completely unique from the Classic and Layout templates causing confusion on many who were knowledgeable in the coding of the older templates.
The Designer templates allow full use of every option in the Template Designer. This allowing people to customize the columns and width from just a click of the button. With these template you can also choose from many backgrounds without changing a single code.
The Designer templates coding is designed to make use of the Templates Designer. This making nearly everything in the Edit HTML page /* Variable definitions. Most the elements in the coding are defined with a period (dot) or the # sign . Many of the elements names have changed bringing farther confusion on how to correctly change the coding in the Edit HTML page.
Note: The Designer templates coding can and should be changed through the Add CSS function which can be found in the Advanced section of the Template Designer.
3 comments:
One thing about changing the font styling rules through the Template Designer's Advanced|Add CSS feature is that any changes you make to the font will not carry over to gadgets with skins (such gadgets get the font styling rules for the main post text sent over to them so they can fit in with a blog's theme automatically).
However, changing the font weight (bold), font family, font size, and/or font style (italic) through the Template Designer's Advanced|Page Text customization feature will carry over to gadgets.
The reason one way (modifying the Page Text font in Template Designer) works and the other (adding CSS in the Template Designer) doesn't is because changing the font through the Page Text advanced customization feature actually changes the /* Variable definitions for the variable "body.font" in a blog's template.
So, unfortunately, it looks like if you want your Google Web Fonts to show up in gadgets with skins, you will still need to modify the "body.font" variable in the blog template directly.
Of course, if a person's blog does not use gadgets with skins, then it doesn't matter. :)
The variable definitions are simply HTML assigning a variable to CSS. Then in the CSS section you will see the variable declared with a $ sign. The Add CSS function can override then variables declared to change the font color of anything.
Example:
body {
font: normal normal 14px 'Trebuchet MS', Trebuchet, sans-serif;
color: #e1e1e1;
}
If I added this code in above it would declare this to everything in my template. However because other font rules are present in my CSS. This would not override a rule that is specifically designated to a element. This would be the same thing as me going into the Edit HTML page and removing $(body.font) and replacing it with the code above. But with doing it through the Add CSS function I am not harming them template. So if later on I decide that I no long want to user this font, I can simply remove the added code. If I made this change directly into my Edit HTML page then I have removed the variable and the template designer will no longer function for this option.
Yes, and that is very useful information, but the problem I ran into with my gadget was that it gets its skin from the variable definitions instead of the CSS section in the header (like the Followers gadget, my gadget is positioned inside an iframe).
CSS styling rules are very difficult to extract programmatically, so I believe the variable definitions are there as a shortcut that is cross-browser compatible.
I should try out removing the body.font variable, though, and creating a strictly CSS blog to test it out, though.
And that thing about T E D you wrote back on the help forum--ROFL!
Post a Comment
Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.