How to make a theme for Xoops

If you have Xoops on your site and you’d like to make your own theme, this basic tutorial would help you.

1. Use the default theme as your template. On your hosting server, copy the default Xoops theme folder and rename it to another file. Call the folder MyTheme.

2. Open the MyTheme folder and look for the theme.html file. Look for this string:

<{include file=“default/theme_blockleft.html”}>

You need to replace it with this one:

<{include file=“MyTheme/theme_blockleft.html”}>

3. There are going to be 2 more strings like this in the entire html page. Change them accordingly.

4. Clone your default templates. Login to the Xoops control panel page. Go to Administration, System Admin, and then Templates. Clone the default templates from there. You should now have the MyTheme folder appearing in the template set.

5. Go back to Administration, System Admin. This time, go to Preferences then General Settings. Set MyTheme as your default theme and default template set.

6. Look for “Update module template….” to Yes.

7. Edit the themes as necessary. Remember to keep the Xoops 3-column layout. You have to play your design around that setting.

8. You can edit each one of the html file included in the default theme using this as your guideline:

The site URL is written in Xoops as:

<{$xoops_url}>

Image URL pointing to the theme folder:

<{$xoops_imageurl}>

Site Name:

<{$xoops_sitename}>

Site Slogan / Page Title:

<{$xoops_pagetitle}>

Search Engine box:

<form action=<{$xoops_url}>/search.php method=<get>
<{xoops_input type=text name=query size=14 }>
<{xoops_input type=hidden name=action value=results }>
<{xoops_input type=submit name=submit value=”Search” }>
</form>

Left Block:

<{foreach item=block from=$xoops_lblocks}>
<h3><{$block.title}></h3>
<p><{$block.content}></p>
<{/foreach}>

Banner:

<{$xoops_banner}>

Block Right

<{foreach item=block from=$xoops_rblocks}>
<h3><{$block.title}></h3>
<p><{$block.content}></p>
<{/foreach}>

Block Center Left

<{foreach item=block from=$xoops_clblocks}>
<h3><{$block.title}></h3>
<p><{$block.content}></p>
<{/foreach}>

Block Center Center

<{foreach item=block from=$xoops_ccblocks}>
<h3><{$block.title}></h3>
<p><{$block.content}></p>
<{/foreach}>

Block Center Left

<{foreach item=block from=$xoops_crblocks}>
<h3><{$block.title}></h3>
<p><{$block.content}></p>
<{/foreach}>
</blockquote>

Module Content

<{$xoops_contents}>

Footer

<{$xoops_footer}>