Recent Topics

1 Dec 22, 2007 17:42    

Dunno how many people know this already, but b2evolution v220 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 the 'custom' skin I see this at line 40:

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


THAT is calling a container. Now dig on line 42:

'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 I want to jump down to line 324 in the same file. It says:

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


This happens to be the "block start" value for the sidebar container, and will give us "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 EVERY widget you can currently install:[list]

  • 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.[/list:u]

  • 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!

    2 Dec 22, 2007 18:01

    Nice job, Ed.
    Please do copy this in the Wiki, perhaps on this page: http://manual.b2evolution.net/Skins_2.0. I know the page is from the one who recently used the W word, but this is not about W itself. On the bottom there's the "Details here" link to this page http://manual.b2evolution.net/TemplateTags where I try to gather hard to get information about the arrays for the template tags.

    Did you like what you saw when you dived into it?

    3 Dec 22, 2007 18:53

    My good friend I'm simply not a fan of wikis, but please feel free to commit the content yourself if you see fit. Perhaps I should play there, but - really - I think wikis are just plain silly.

    W? Is W widgets? I like widgets :) . Or is W wikis? I don't like wikis :( . Or is it waffles? I like waffles :) . Or is it warfare? I don't like warfare :( . Or is it witchcraft? I have no view on witchcraft, although sometimes witches are totally hot! Like especially when goth chicks pretend to be into Wicca ;)

    In a different vehicle I've made my issues with 220 known, so I won't rehash them here. Or ANYWHERE. Suffice to say that I'm trying to see all the good that is present in the latest and greatest, and can hardly wait to see an 'officially stable' release. This is my first effort to share something I've learned. Hopefully it will help people make cool skins eh?

    Next up: showing off what we can all do with the actual post content. I'm looking forward to that because I will learn (and share!) a lot. But first I must learn. And tinker!

    4 Dec 22, 2007 19:20

    You'll be pleased to know that all widgets now have 3 extra settings ( in cvs )

    widget_name : gets shown in the widget list [ Free HTML ( widget name ) ]
    widget_ID : this is the replacement value for $wi_ID$ in the same way $wi_class$ is currently replaced [ id="$wi_ID$" -> id="<your groovy personailised ID>" ]
    widget_css_class : added to current $wi_class$ replacement [ class="$wi_class" -> class="widget_core_freehtml <widget_css_class>" )

    ¥

    5 Dec 23, 2007 13:38

    ¥åßßå wrote:

    class="$wi_class" -> class="widget_core_freehtml <widget_css_class>" )

    ¥

    A little clarification, please. I notice you use "$wi_class", noticing in particular there is only one dollar sign. Is that a change or simply an omission designed to test me? Also this example shows "widget_core_freehtml" instead of "widget_core_free_html" as per what we now could use. Same question eh?

    IF I understand correctly this bit is actually telling me I can select a style name (attribute, class, whatever it's called) in the widget's settings. So like I might tell my widget to use a style "gorgonzola" for my bloglist widget that I've added to my sidebar. Assuming I have

    <div class="$wi_class$">

    for my block_start I would then get

    <div class="widget_core_colls_list_public gorgonzola">

    for my bloglist in the sidebar, but the bloglist in my header would NOT see the "gorgonzola" bit?

    Naming widgets will be a super cool thing. Especially for the widgets people will use multiple versions of like "Free HTML" and "Menu Link".

    Hey and thanks for the heads up!

    6 Dec 23, 2007 14:30

    They were both typos :p

    On the grounds that a picture says a thousand words, here's a really long explanation ;)

    These are the settings for one of our widgets in our new skin :
    http://innervisions.org.uk/media/settings.jpg

    That makes our widget list look something like this :
    http://innervisions.org.uk/media/widgets.jpg

    The code for our container is as follows :

    			// Display container contents:
    			skin_container( NT_('Sidebar'), array(
    					// The following (optional) params will be used as defaults for widgets included in this container:
    					// This will enclose each widget in a block:
    					'block_start' => '<div id="$wi_ID$" class="$wi_class$ am_sidebar_widget"><div class="$wi_class$Bub am_sidebar_widget_bubble">
    <div class="top">&nbsp;</div>
    <div class="mid">
    ',
    
    ......

    The relevant bit of html that's spat out is :

    <div id="my_demo_ID" class="widget_core_free_html am_skin_register am_sidebar_widget"><div class="widget_core_free_html am_skin_registerBub am_sidebar_widget_bubble">
    <div class="top">&nbsp;</div>
    <div class="mid">

    The settings are individual to the widget ( just like the rest of their settings ) so your gorgonzola would only be seen by the widget with the cheesey grin ;)

    ¥

    7 Nov 18, 2008 11:26

    Hello. Nice work explaining this.

    Q: In the Public Blog List widget, in the anchor tag, it has a 'class="default" attribute that is throwing off other widgets/plugins I have next to it (it has a bottom border).

    Is there a way to pass a different class or no class to that anchor tag, since it seems like it's value is a variable? :?:

    For the blog I'm using that Public Blog List widget for, I prefer to style the <li class="..."> tag instead. I didn't want to change the style.css value (comment it out), as I don't know if other current or future applications will call that anchor 'default' style. Right now, it seems like I'd have to edit code in 'widget.class.php'(?).

    Thanks.

    P.S. In the future, it would be nice to customize e.g. <a> class via the Admin interface or container used in the skin. So far, the few widgets I've customized were easy via the container params for the <li> tag.

    8 Nov 19, 2008 00:25

    Nevermind folks.

    I made it a variable feature whereby each of my bloggers will be able to control it for their particular blog's design via the Admin interface in that widget.

    Thanks anyway.


    Form is loading...