PurpleCrystal for XOOPS 1.0 Alpha is released

This is only an Alpha version. Please fully test the theme before using on your website.

Is there a demo?
Yes. http://zen.xoops.org.cn/portfolio/purplecrystal/

How to install this theme?
Just put it under the theme folder of your XOOPS.

How to customize it?
The images are in editable PNG format. Open it with Fireworks and edit it.

Download Page

Inspire: Instructions

Updated on Sep. 20 2009

I. PLEASE READ CAREFULLY
Inspire is a theme customized for XOOPS China. As many people ask me for the theme, I decide to release it. You cannot directly apply it on your website because it will not work well. So please read the instructions carefully.
And this theme is released under Creative Commons license 3.0, please do not remove the author’s information on the bottom line.

II. START FROM THE EASIEST PART – FOOTER NAVIGATION
The green area is the footer navigation. It displays all of the right blocks. So a good way is to pick four right blocks and let XOOPS display them. It will just fill up this area.
Tips: You don’t need user menu and navigation menu because these two are shown on the top.

III. THE HARDEST PART – SHOWCASE
The blue area is the showcase. By default, it displays nothing. However, when applied on XOOPS China, this area shows the latest news and posts. There are two ways achieving this. I’ll introduce them one by one

1. Let the showcase display center blocks

Open theme.html and look for

<div id="showcaseleft"><!-- This is the tab title -->
      <h3 class="ins-toggler">News</h3>
      <h3 class="ins-toggler">Core</h3>
      <h3 class="ins-toggler">Modules</h3>
      <h3 class="ins-toggler">Themes</h3>
      <h3 class="ins-toggler">Other topics</h3>
      <h3 class="ins-toggler">Downloads</h3>
      <h3 class="ins-toggler">Site of the Week</h3>
      <div class="ins-boxholder">
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
           <div class="ins-box">
           <!-- Add Content Here -->
           </div>
       </div>
</div>

and change it to

<div id="showcaseleft"><!-- This is the tab title -->
            <{foreach item=block from=$xoops_ccblocks}>
                <{if $block.title != ''}>
                    <h3 class="ins-toggler"><{$block.title}></h3>
                <{/if}>
            <{/foreach}>
            <div class="ins-boxholder">
                <{foreach item=block from=$xoops_ccblocks}>
                    <{if $block.title != ''}>
                        <div class="ins-box">
                            <{$block.content}>
                        </div>
                    <{/if}>
                <{/foreach}>
            </div>
</div>

The tab name will be your center block title and the content will be your center block content. for details, please refer to the comments on http://www.xoops.org/modules/news/article.php?storyid=4906
I would like to thank Dylian for his contribution.

2. Use XOOPS Tools module (for experienced users only)
Please refer to the documentation of XOOPS Tools.

IV. REMOVE THE ORANGE FLOAT BAR

Remove or comment the following lines between <header> and </header>:

<!--[if lte IE 6]>
<script type="text/javascript" src="<{$xoops_url}>/themes/inspire/scripts/fixed.js"></script>
<![endif]-->

and remove or comment the following lines. You can find them at the bottom.

<!-- Right Float Block -->
    <div class="ins-leftbar">
        <a id="h_toggle" class="selectsite" href="#">
        <img src="<{$xoops_url}>/themes/inspire/selectsite.gif">
        </a>
        <div id="horizontal_slide">
        <strong>Strong Text</strong>
        <br />
        Modify the text here!
        <br />
        <a href="#">A Link</a>        
        </div>
    </div>