How do I build a theme?
How do I build a theme?
Edit the default theme
STEP ONE
Copy the default theme folder (themes\default) and rename it to e.g. "cool". Now you should have a new folder called "cool" with the same files as the default theme.
Open the theme.html in your "cool" folder and search for the following string
<{include file="default/theme_blockleft.html"}>
You see, that you have to edit the "default" to "cool" to reflect your new folder. After the changes the above string should look like this.
<{include file="cool/theme_blockleft.html"}>
There were a few other includes, where you have to change the directory in this file!
STEP TWO
Now you have to clone the default templates, because the default templates can't be edited. Go to Administration > System Admin > Templates within your Xoops and clone the default templates. You should give the new template set the same name as you named your theme folder, in this case "cool".
Be careful what you do here. Incorrectly editting or modifying these templates can have disastrous results.
STEP THREE
Go to Administration > System Admin > Preferences > General Settings. Select "cool" as Default theme and as Default template set. Set "Update module template .html files from themes/your theme/templates directory?" to YES. This setting is important because it is the only way that Xoops will reload the 'new' css and html code, so you can 'test' your changes 'on the fly'.
You may modify and retest theme changes (STEP 4 below) as frequently as you find it helpful. Once you are satisfied with your results be certain to reset "Update module template .html files from themes/your theme/templates directory?" to NO.
Now your complete Xoops Installation uses your "cool" theme and no longer the "default" theme. You can edit this theme now to fit your needs. When anything goes wrong, you always have the possibility to switch back to the default theme!
STEP FOUR
This is the editing phase! Short description of the files
theme.html - controls the main layout of your website
theme_blockleft.html - controls the layout of the left blocks
theme_blockright.html - controls the layout of the right blocks
theme_blockcenter_c.html - controls the layout of the centercenter blocks
theme_blockcenter_l.html - controls the layout of the centerleft blocks
theme_blockcenter_r.html - controls the layout of the centerright blocks
style.css - stylesheet for your theme
styleMAC.css - some settings only for MAC's
styleNN.css - some settings only for Netscape
Within these files you can define what your website should look like! The appearance of the modules and every single block can be controlled through the templates (if they use templates!).
Designing a completely new theme
Normally a designer creates his website layout in graphic programme. After this designing process he creates a HTML site out of it! Important for this is to remember the 3-column layout of Xoops!
NOTE: If you are visually impaired, like some of us, and you have access to a tool like FrontPage, you may create layouts there. HOWEVER, be careful! The code generated by wysiwyg editers like FrontPage may not work 'perfectly' and will almost certainly require some clean-up before becoming fully operational.
lc = leftcolumn
cc = centercolumn
rc = rightcolumn
After you have your 3-column HTML template you only have to copy the important parts of the default/theme.html into your template. The first thing is the header stuff.
After this you copy the following code in your leftcolumn:
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="default/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->
The <td></td> where you put in this code should get the id="leftcolumn" as in the default theme. This is needed for the css definitions.
This is the code for your centercolumn:
<!-- Display center blocks if any -->
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">
<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="default/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=$xoops_clblocks}>
<{include file="default/theme_blockcenter_l.html"}>
<{/foreach}>
<!-- End center-left blocks loop -->
</td><td id="centerRcolumn">
<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}>
<{include file="default/theme_blockcenter_r.html"}>
<{/foreach}>
<!-- End center-right blocks loop -->
</td>
</tr>
</table>
<{/if}>
<!-- End display center blocks -->
<div id="content">
<{$xoops_contents}>
</div>
The <td></td> where you put in this code should get the id="centercolumn". In the right column you have to copy this code:
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="default/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->
The <td></td> where you put in this code should get the id="rightcolumn". After this you have to correct the path to your images you have included in your theme.html. If every images is located directly in your themes folder, the <img> tag should look like this.
<img src="<{$xoops_imageurl}>logo.gif">
Otherwise the images won't display correctly when the theme is parsed through Xoops.
Remember this is only the basic stuff! You can move around the columns etc. as you like for your theme.
Also see Making of xoops theme part 1
and Anatomy of the default theme
and Incama's Theme building manual
Also this FAQ
This Q&A was found on XOOPS Web Application System : https://xoops.org/modules/smartfaq/faq.php?faqid=212