WebBlocks Skin

WebBlocks skins defines the look and feel of WebBlocks site. You can define skin at Site and also at Group level.

For example,  http://sheelapps.com/index.php?p=WebBlocks. is using "box" skin and http://sheelapps.com/index.php?p=SheelApps. (home page) is using "webapp" skin.

Each skin is actually a folder define inside "/skins" folder and contains at least following two files.

skins/<skin-folder>/index.tpl 

The main site rendering template. This file is used for rendering of WebBlocks pages.

Include all common resources like JS/CSS file for the skin and layout in index.tpl.

Example ("box/index.tpl" skin used at sheelapps.com) :


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<TITLE>{$fullname} - {$wb_page.pagedesc|escape} </TITLE>
<meta name="description" content="{$wb_page.pagedesc|escape}" />
<meta name="keywords" content="{$wb_page.pagekeywords|escape}" />
<link href="{$skin_dir}/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
    <h1>Site Name</h1>
    <h2>Site description</h2>

</div>
<div id="menu">
    <ul>

                    <li><a  rel='nofollow' title='Home' href='{$script_link}'>Home</a></li>                   

<li><a  rel='nofollow' title='View this Page' href='{$fullname|linkpage:'view'}'>View</a></li>
                    <li><a  title='Edit this Page' rel='nofollow' href='{$fullname|linkpage:'edit'}'>Edit</a></li>
                    <li><a  title='Edit Page Attributes' rel='nofollow' href='{$fullname|linkpage:'attr'}'>Attributes</a></li>
                    <li><a  title='Page Edit History' rel='nofollow' href='{$fullname|linkpage:'history'}'>Page History</a></li>
                    <li><a  title='PDF Version of this page' rel='nofollow' href='{$fullname|linkpage:'print':'true'}'>PDF</a></li>
                    <li><a  title='View Recently Updated Pages' rel='nofollow' href='{"Site.RecentChanges"|linkpage:'view'}'>Recent Changes</a></li>

    </ul>
</div>

<div id="content">
    <div id="left">
            <!-- Include WebBlocks's dynamic page here-->
             {include file="../wbpage.tpl"}
    </div>
    <div id="right" >
            Some text in right div.
    </div>
</div>
{include file="../footer.tpl"}
</body>
</html>


skins/<skin-folder>/wb_standalone.tpl 

This is used for "standalone" pages. It is same across all skins and have include function toi display WebBlocks Page.

You can copy it from any skin folder.

Content of wbpage.tpl : 

{include file="../wbpage.tpl"}


WebBlocks Skin's file (index.tpl) supports all WebBlocks's functions and page-variables so you can create quite a dynamic skin based on current page attributes.

Setting skin for a Group

A custom skin for group is defined by declaring it in include/config.php or configuration table.

1) In configuration file config.php :

// default skin for site, all pages in site will use following skin folder for rendering content.

YDConfig::set( 'app_skin', 'box' );

// Use "skin2" skin for Group "Group1" pages.

 YDConfig::set( 'Group1.skin', 'skin2' );

 2) wb_config database table :

 Add a row in config table

Parameter : value

Group1.skin : skin2

Note : config table takes precedence over config file and it is better way to define site properties.