Skip to main content

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.


Theming
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 (^-^)
2 comments

Popular posts from this blog

Consolidated community site infrastructure on Plone

In Inigo, we believe in helping out local FOSS communities and help them grow. We help out in community events where we can, present FOSS talks, and provide some platforms for local communities to grow. One of such platform is our consolidated community site infrastructure on Plone.

The system/infra and its components was originally developed for the Fedora Malaysia website, while keeping in mind to keep it generic enough so that other communities could use the same components for their own community sites. The infra is already at a usable state, and we can add new sites easily with just a few clicks.

Features in this consolidated infra are:
Document/Content management (Plone built-in)Calendar system (powered by solgema.fullcalendar addon)Conference/BarCamp system (powered by collective.conference addon, which was developed for FUDCon Kuala Lumpur 2012)Blog (powered by Products.Scrawl)Simple yet powerful theming engine (powered by plone.app.theming/ Diazo) - Check out Diazo, you'l…

Adding simple popup to Plone frontpage

Here is a little guide for those who want to add a simple popup to the Plone frontpage for some purpose (eg: announcements, advertisements, etc).

Create a basic html file containing the content you want to appear in the popup. Upload it into $PLONE_SITE/portal_skins/custom (as Page Template) and for the sake of this example, name it popup.html

Afterward, create a Javascript file with your Pop-Up loader script. For example , this script:


function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=220,height=400,scrollbars=no');
return false;
};

popup('popup.html', 'My Popup');


Also upload this file into $PLONE_SITE/portal_skins/custom (as Page Template too). For this example, name it as popup.js

Afterward, in $PLONE_SITE/portal_javascripts , add popup.js as a new script into portal_javascripts…

HOWTO: Mirroring Yum repositories using Yum-Utils

As promised before in one of my previous post, a Howto on how to mirror and manage yum repositories using some of the utilities in yum-utils.

The first step is, well, of course, is to get yum-utils from fedora repository
yum install yum-utils

Reposync
Reposync is a utility for mirroring and synchronizing local copy of a yum/rpmmetadata repository.

This utility is very useful if you wanted to make a yum repository mirror. Before this, I used "wget -R -np -N" but this method is a little bit tedious and it doesnt work with repos that didn't use directory listing. Plus, it also download together additional site stuff that I don't need/want and it doesn't verify checksum of the downloaded packages.

Mirroring a repo using this utility is easy, just execute this command
reposync -r <repoid> -a <arch> -n
and the repo will be mirrored in a folder with the same name of the repoid in the directory you executed the command. Eg: you executed the command in /mnt/storage/mi…