Themes: Update an "old" theme

Posted by: BurningOn 2009/12/24 12:30:00 9227 reads
Since Xoops 2.0.14, it is possible to display bottom blocks in center column. Some themes have not this feature, see Old themes album.

In most cases, update is not a complicated task. Below is one way to update :

1 • copy templates in your theme folder (from default theme) :
- theme_blockcenter_c
- theme_blockcenter_l
- theme_blockcenter_r
- theme_blockleft.html
- theme_blockright.html


2 • theme.html modifications :

a) HEAD part :

Erase (already called by <{$xoops_module_header}> if I'm not wrong):
<script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>


Add (required to call blocks templates dynamically):
<!-- Assign Theme name -->
<{
assign var=theme_name value=$xoTheme->folderName}>


b) BODY part

Replace old canvas code by /default theme.html code :
<!-- Start left blocks loop -->
        <{if 
$xoops_showlblock}>
            <
td id="leftcolumn">
            <{foreach 
item=block from=$xoBlocks.canvas_left}>
                <{
includeq file="$theme_name/theme_blockleft.html"}>
            <{/foreach}>
            </
td>
        <{/if}>
        <!-- 
End left blocks loop -->

        <
td id="centercolumn">

        <!-- 
Display center blocks if any -->
        <{if 
$xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
            <
table cellspacing="0">
            <
tr>
                <
td id="centerCcolumn" colspan="2">
                <!-- 
Start center-center blocks loop -->
                <{foreach 
item=block from=$xoBlocks.page_topcenter}>
                    <{
includeq file="$theme_name/theme_blockcenter_c.html"}>
                <{/foreach}>
                <!-- 
End center-center blocks loop -->
                </
td>
            </
tr>
            <
tr>
                <
td id="centerLcolumn">
                <!-- 
Start center-left blocks loop -->
                <{foreach 
item=block from=$xoBlocks.page_topleft}>
                    <{
includeq file="$theme_name/theme_blockcenter_l.html"}>
                <{/foreach}>
                <!-- 
End center-left blocks loop -->
                </
td>
                <
td id="centerRcolumn">
                <!-- 
Start center-right blocks loop -->
                <{foreach 
item=block from=$xoBlocks.page_topright}>
                    <{
includeq file="$theme_name/theme_blockcenter_r.html"}>
                <{/foreach}>
                <!-- 
End center-right blocks loop -->
                </
td>
            </
tr>
            </
table>
        <{/if}>
        <!-- 
End display center blocks -->

        <
div id="content">
          <{
$xoops_contents}>
        </
div>

        <{if 
$xoBlocks.page_bottomleft or $xoBlocks.page_bottomright or $xoBlocks.page_bottomcenter}>
        <
table cellspacing="0">
            <{if 
$xoBlocks.page_bottomcenter}>
                <
tr>
                    <
td id="bottomCcolumn" colspan="2">
                        <{foreach 
from=$xoBlocks.page_bottomcenter item=block}>
                            <{include 
file="$theme_name/theme_blockcenter_c.html"}>
                        <{/foreach}>
                    </
td>
                </
tr>
                <{/if}>
                <{if 
$xoBlocks.page_bottomleft or $xoBlocks.page_bottomright}>
                <
tr>
                    <
td id="bottomLcolumn">
                        <{foreach 
from=$xoBlocks.page_bottomleft item=block}>
                            <{include 
file="$theme_name/theme_blockcenter_l.html"}>
                        <{/foreach}>
                    </
td>
                    <
td id="bottomRcolumn">
                        <{foreach 
from=$xoBlocks.page_bottomright item=block}>
                            <{include 
file="$theme_name/theme_blockcenter_r.html"}>
                        <{/foreach}>
                    </
td>
                </
tr>
            <{/if}>
        </
table>
        <{/if}>        
        
      </
td>

    <{if 
$xoops_showrblock}>
        <
td id="rightcolumn">
        <!-- 
Start right blocks loop -->
        <{foreach 
item=block from=$xoBlocks.canvas_right}>
            <{
includeq file="$theme_name/theme_blockright.html"}>
        <{/foreach}>
        <!-- 
End right blocks loop -->
        </
td>
    <{/if}>



3 • templates modifications

center blocks templates gets these tags (theme_blockcenter_c.html, theme_blockcenter_l.html and theme_blockcenter_r.html):
- <fieldset> </fieldset> : erase it
- <legend class="blockTitle"> </legend> : replace by <div class="blockTitle"> </div>


4 • Stylesheet modification

a) blocks

Duplicate styles for Top center blocks
td#centerCcolumn {padding: 0px;}
td#centerCcolumn div.blockTitle {padding: 10px 3px 3px 15px; color: #000000; font-weight: bold; margin-top: 0px; margin-right: 0px;  margin-left: 0px;}
td#centerCcolumn div.blockContent {border-bottom: 1px solid #dddddd; padding: 5px 15px; margin-right: 0px; margin-left: 0px; margin-bottom: 3px; line-height: 130%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn div.blockTitle {padding: 10px 3px 3px 10px; color: #000000; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {padding: 5px; margin-left: 0px; margin-right: 0px; margin-bottom: 2px; line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn div.blockTitle {padding: 10px 3px 3px 10px; color: #000000; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {padding: 5px; margin-left: 0px; margin-right: 0px; margin-bottom: 2px; line-height: 120%;}


And replace "center" by "bottom" to apply same styles to bottom blocks.

Like this :
td#bottomCcolumn {padding: 0px;}
td#bottomCcolumn div.blockTitle {padding: 10px 3px 3px 15px; color: #000000; font-weight: bold; margin-top: 0px; margin-right: 0px;  margin-left: 0px;}
td#bottomCcolumn div.blockContent {border-bottom: 1px solid #dddddd; padding: 5px 15px; margin-right: 0px; margin-left: 0px; margin-bottom: 3px; line-height: 130%;}

td#bottomLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#bottomLcolumn div.blockTitle {padding: 10px 3px 3px 10px; color: #000000; font-weight: bold; margin-top: 0px;}
td#bottomLcolumn div.blockContent {padding: 5px; margin-left: 0px; margin-right: 0px; margin-bottom: 2px; line-height: 120%;}

td#bottomRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#bottomRcolumn div.blockTitle {padding: 10px 3px 3px 10px; color: #000000; font-weight: bold; margin-top: 0px;}
td#bottomRcolumn div.blockContent {padding: 5px; margin-left: 0px; margin-right: 0px; margin-bottom: 2px; line-height: 120%;}


b) Main and user menus

To get nice menus, check display: block; instruction
Quote:
Quote:

#mainmenu a {display: block;}
#usermenu a {display: block;}




If you update an "old" theme it would be nice to put a download link in comment