b2evolution has a method to automagically apply styles to each widget you might select for any given container. Your skin needs to use a special class caller in order to get the automagic classes to happen. After that, your style sheet needs to say what these styles will do. Playing around with this stuff a little bit will let you, for example, increase the font size of your blog list and change your linkblog text color. Or whatever you want to do with any given widget.

So let’s start by making sure you use the special class caller thing. It’s really easy, and it starts by having a little understanding of "containers".

When I look at index.main.php in most standard skins, I will see something like:

skin_container( NT_('Page Top'), array(

THAT is calling a container. Now dig into the params of that container, a few lines below:

'block_start' => '<div class="$wi_class$">',

THAT is calling the special class caller. $wi_class$ will turn into something unique for each and every widget. The details of exactly what each widget gets will follow, but first notice that some other containers may have more classes ther. For example:

  'block_start' => '<div class="bSideItem $wi_class$">',

This happens to be the "block start" value for the sidebar container, and will applus bSideItem AND the special widget class for each widget in the sidebar. NOW I can have a bloglist in the header AND in the sidebar with different styling applied. Cool trick?

Okay so here is what $wi_class$ becomes for different widget you can install:

• widget_core_colls_list_public == styling the "Public blog list" widget.
• widget_core_colls_list_owner == styling the "Same owner’s blog list" widget.
• widget_core_coll_logo == styling the "Blog logo" widget.
• widget_core_coll_title == styling the "Blog title" widget.
• widget_core_coll_tagline == styling the "Blog tagline" widget.
• widget_core_coll_page_list == styling the "Page list" widget.
• widget_core_coll_post_list == styling the "Post list" widget.
• widget_core_coll_category_list == styling the "Category list" widget.
• widget_core_coll_longdesc == styling the "Long Description of this Blog" widget.
• widget_core_free_html == styling the "Free HTML" widget.
• widget_core_coll_common_links == styling the "Common Navigation Links" widget.
• widget_core_coll_search_form == styling the "Content Search Form" widget.
• widget_core_coll_xml_feeds == styling the "XML Feeds (RSS / Atom)" widget.
• widget_core_menu_link == styling the "Menu Link" widget.
• widget_core_user_tools == styling the "User Tools" widget.
• widget_core_linkblog == styling the "Linkblog" widget.
• widget_plugin_evo_Calr == styling the "Calendar Widget" widget.
• widget_plugin_evo_Arch == styling the "Archives Widget" widget.

What this means is that if you define widget_core_colls_list_public in your style sheet AND use the $wi_class$ gizmo in your skin’s appropriate php file your style will apply to the public bloglist. No need to break it out of the container to give it some ’style love’!

Here’s hoping this helps the meticulous skinner create awesome skins!