Hacking Blogger's widgets engine #1

I just started playing around with the new Blogger's widget based template engine. At first it was confusing because its not normal HTML based template, but a strict XHTML 1.0 XML template. But after a playing around with it for a few hours, I started to understand the elements of the template and started to modify my template little by little (those who entered my blog a few times today might noticed that the template keep changing) and testing what element will affect what values. This is what I've learned so far.

The Template
The template generally consist of 2 significant parts, the layout and the widgets. The layout template is the one Blogger shows by default when you enter edit-html mode. The widgets are shown below the layout template after you check "Expand widget template" checkbox. You only need to change the layout part if you want to customize the base appearance of your blog. If you want more widget specific customization, edit the widget.

The theming system in the widgets engine depends heavily on CSS. If you scroll down the layout code of the default themes, you'll see that more than 80% of the layout is CSS. XHTML is only used to define how stuff will be arranged and CSS will define how stuff will look like.

Font and Colors
The new engine provide a nice UI interface for changing the color and font values in the CSS code. You just need to define the variables inside the CSS code using <variable> tags and it will appear at the "Font and Colors" setting in Blogger.

Example of a variable definition
<Variable name="bodyBgColor" description="Background Color" type="color" 
default="#cfcfcf" value="#C3D9FF">

Example of using the variable inside the CSS
body {
background-color: $bodyBgColor;

From what I found for now, the variable tag only support 2 types which are color and font. So, you can only use it for CSS font and color settings only.

Thats all I guess for now. I will be posting more of this in the future. So, stay tuned (^-^)


Flash said…
Nice blog, I'll be adding you my feed reader. Though I don't have the time I wish I had to get back into programming, I still found some useful bits.

I'm not sure if this is what you were looking for in regards to how to define variables, but take a look at this widget, which I use myself, and how the variables are defined outside of the widget.
Anonymous said…
You should check out our association.


Popular posts from this blog

Announcing PlatoCDP, a Plone distribution for enterprises.

Adding simple popup to Plone frontpage

Consolidated community site infrastructure on Plone