Update an "old" theme

Date 2009/12/24 12:30:00 | Topic: Themes

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):
le="color: #000000"><?php <script type="text/javascript"> <!-- <{$xoops_js}> //--> </script>


Add (required to call blocks templates dynamically):
le="color: #000000"><?php <!-- Assign Theme name --> <{assign var=theme_name value=$xoTheme->folderName}>


b) BODY part

Replace old canvas code by /default theme.html code :
le="color: #000000"><?php <!-- 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
le="color: #000000"><?php 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 :
le="color: #000000"><?php 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



This article comes from XOOPS Web Application System
https://xoops.org

The URL for this story is:
https://xoops.org/modules/news/article.php?storyid=5173