How to add custom Variable definitions to Blogger alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... How to add custom Variable definitions to Blogger 0 comments In this post we are going learn about the CSS Variable Definitions for Colors and Fonts that could be found at the top of the style sheet of a Blogger blog. The values for the Variable definitions can be modified directly through the Blogger Template Designer where are the settings for colors, backgrounds, fonts and font sizes. Most default Blogger templates, such as the Minima Template, use these settings for the CSS, which makes it easier to modify these variables through the Blogger dashboard, using the "Template Designer" (Template>Customize) editor and accessing to the "Advanced" section. If the definitions are already established in the CSS, we'll be able to change the background colors, font colors, styles or sizes, directly from our Blogger dashboard without having to touch the HTML code of our template. If these values ​​are not set, we can define them by creating our own variables. The more variables are created, the greater will be the ease of changing colors and fonts of the Page Elementsby going to the "Template Designer" and accessing the "Advanced" tab. In some cases, we can't change the color or font of a particular template if the designer has not implemented the variables in the template and didn't defined and specified a particular value directly into a property, and if there is no definition for these values​​, we may not be able to customize it through the Blogger's Template Designer. There are two types of variables: 1) Color Variable: In redis the variable name. Here you can put any name you want, however, it must not contain spaces, that's why we may see some variable names using a dot "." between each word. In greenis the description that will appear in the Fonts and Colors panel (it can contain spaces). In blueis variable type, which in this case is "color" In purpleis the default value, which runs in the absence of any other value. In orangeis the value of the selected color. 2) Font Variable: In redthe variable name without spaces. In greenthe description of the variable, may contain spaces In blueis the type of the variable, which in this case is font. In purplethe default font. In orangeis the font that you choose. We can find the variables definitions in thesection of ourTemplateby accessing the HTML code (click on theEdit HTMLbutton). There we should see a pair of..tags. The CSS style declarations will go in between those tags, along with the variable names. How to Create Variables with type ColorNow, let's see how we can createtype="color"variables in our template. Please copy the below snippet and replace the names and types as you like, then paste the code below this comment: /* Variable definitions ==================== Code to copy: For a better understanding, let's take a look at this example with variable of type "color": Here I have created a variable oftype"color", with the "variablecolor"name. The color values (#DDF2FF) can be applied to all the borders of my blog and whenever I want to apply color styles to a specific border, I will type it like this: border: 1px solid$variablecolor;Note that I have added the"$" symbol before the variable's name which should be added everytime you want to implement a new variable definition. Once we have created the variable, we can apply it on any property (not only borders) of any selector (page element) where it is possible applying the chosen color. For example, if I want to add this color in themain-innerbackground (sidebar and posts area), I will add it just after the "main-inner" class selector, like this: .main-inner { background-color: $variablecolor; } Now that a new variable has been established, save and return back to the blogger dashboard by clicking on the "Customize" button >Advancedtab. You will notice that there is a new variable called "Variable with light blue color" - to change the color, just use the color picker tool. How to Create Variables of type Font:Now let's say I want to create a new variable oftype="font"which I want to apply on the title of the sidebar gadgets. I will add it this way: In this variable that I just created, thedefaultfont to be searched by the web browser should beArial, and in its absence,Verdanaand so on. Otherwise, apply theCambriafont which is actually the font that we want and which can be easily changed by accessing the Blogger Template Designer. Once the font variable has been implemented, we can add it to any property of any selector where we want to define this font style. To define where this variable should be applied (which, in my example, is the title of the sidebar gadgets), I will need to include the values ​​directly in the "h2" property of the "sidebar" (sidebar-right-1) selector, by creating the following CSS rule: #sidebar-right-1h2 { font:$gadgetstitlefont; }And I will add this above the]]>tag of the Template (don't forget to add the "$" symbol before the variable's name, otherwise it won't work). Now that we have given a new variable, Save the template and return to the Blogger dashboard by clicking on theTemplate>Customizebutton and access theAdvancedtab. Scroll down and you will notice that there is a new variable named "Gadgets Title Font" - if you want to change the font type or size, you can do it directly by using this panel. After you've decided what font style should be applied, click on theApply to blogbutton on the right side. As you work on your template design, you can add lots of variables for different colors and fonts, however, for other types of CSS attributes, there's not necessary to create variables. The other types (such as margin, padding) can be included in the HTML of the template (above]]>) just as they normally would be. Like 8 Random Posts How To SEO Optimize Your Blogger Blog Titles For Higher Search Results25/03/2012 - 147 Comments Awesome Slide Open Heart Bookmarking Gadget For Blogger09/03/2012 - 7 Comments Remove - Subscribe to: Posts (Atom) from Blogger11/03/2012 - 43 Comments Related Posts: How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... CSS3 Transition Property Basics How to Increase Thumbnail Resoluti... 0 comments: Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,775 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments Joseph V M Hi, I've added pagination to my blog... dara king good Mel Ancheta You did it finally, thanks admin (: sorry for my late reply... Sandra Harriette It never ceases to amaze just how much we can do with Blogger.... Gabor Sziladi One question i still have...how can i keep distance between my... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 8 Like