Themes: Update an "old" theme

Posted by: BurningOn 2009/12/24 12:30:00 9368 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">

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