XOOPS Web Application System - XOOPS Themes

XOOPS Web Application System (https://xoops.org)
Powered by You!

Update an "old" theme

Category : Themes | Published by Burning on 24-Dec-2009 12:27

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