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):
<script type="text/javascript">

script>


Add (required to call blocks templates dynamically):

<{assign var=theme_name value=$xoTheme->folderName}>


b) BODY part

Replace old canvas code by /default theme.html code :

        <{if $xoops_showlblock}>
            <td id="leftcolumn">
            <{foreach item=block from=$xoBlocks.canvas_left}>
                <{includeq file="$theme_name/theme_blockleft.html"}>
            <{/foreach}>
            td>
        <{/if}>
        

        <td id="centercolumn">

        
        <{if $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
            <table cellspacing="0">
            <tr>
                <td id="centerCcolumn" colspan="2">
                
                <{foreach item=block from=$xoBlocks.page_topcenter}>
                    <{includeq file="$theme_name/theme_blockcenter_c.html"}>
                <{/foreach}>
                
                td>
            tr>
            <tr>
                <td id="centerLcolumn">
                
                <{foreach item=block from=$xoBlocks.page_topleft}>
                    <{includeq file="$theme_name/theme_blockcenter_l.html"}>
                <{/foreach}>
                
                td>
                <td id="centerRcolumn">
                
                <{foreach item=block from=$xoBlocks.page_topright}>
                    <{includeq file="$theme_name/theme_blockcenter_r.html"}>
                <{/foreach}>
                
                td>
            tr>
            table>
        <{/if}>
        

        <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">
        
        <{foreach item=block from=$xoBlocks.canvas_right}>
            <{includeq file="$theme_name/theme_blockright.html"}>
        <{/foreach}>
        
        td>
    <{/if}>



3 • templates modifications

center blocks templates gets these tags (theme_blockcenter_c.html, theme_blockcenter_l.html and theme_blockcenter_r.html):
-
: erase it
- : replace by



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



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