Day 4: Beautification with Themes

Where things go on your pages is one thing to consider as you develop the viewable portion of your web site. Also important is the visual theme of your site - graphics, colors, fonts and link styles are just some of the visual aspects of your site

You will most definitely want your site to look unique - to match the content and personality of the site owners/maintainers. One of the most important aspects of your site is how it looks when people do visit. There are hundreds of options for themes you can download and use on your site. Or, if you are so inclined, you can modify one of the existing themes or create one of your own to use on your site.

Themes are like suits of clothing - different themes for different occasions. You may have several different themes available for people to choose from when they visit.

We need to talk about how to add themes to your site and make them visible.

First, understand where XOOPS knows which themes are available on your site. Go to the folder where your local XOOPS files are and look at the folder structure. Just like the modules folder, there is a /themes folder. In that folder are folders for each of the various themes available for you to use on your site. The default installation comes with 3 themes - default, phpkaox and x2t.

Browse through the Theme news section, the various theme sites, or search using a major search engine for 'Xoops Themes' to find one to your liking. Download it to your computer and extract it to a folder (it most likely will be a compressed archive - a .zip or .tar.gz file). Once you have extracted it, look at its folder structure. You will want to copy the folder that contains theme.html to your themes folder. For example, if you download the morphogenesis theme for your site, you will need to copy the /morphogenesis folder to your themes folder

After you have copied those files/folders to your local XOOPS install, start your web server and browser. Sign in to your site and go to the Administration Menu. You'll be going to the System Admin area and to the Site Preferences.

Click on the edit link for General Preferences and go down to the Default Theme option. The selection box will show all the themes available on your site. There is also a selection box for themes users can select using the Themes block, if it is enabled for their group.

Once you go back to the user side of your site, you will need to log out to view the new look of your selected theme. One of the important things to look at as you view your site with the new theme is the title the browser displays.

For best positioning in search engine results, the title should specific to the page and contain the name of your site. Notice the order the various elements take in the title. Also note if your site name is contained as text within the header. Do you need to change the graphic/header supplied with the theme to match your site? There are several things you can do with your theme to maximize your search engine optimization (SEO) - I suggest starting by reading this article at Xoops-Tips and this article at My Webmaster Resources. You will definitely want a 'compliant' theme (xHTML, CSS, W3C and accessibility).

Visit some of the theme demo sites and preview lots of themes. Download ones you like and install them on your site and see how they work for you.

--- More Information ---

• Xoops FAQs - Themes and Templates

• Theme Tutorial at WarPigW2

• Xoops Docs - Theme - doesn't talk about the new block positions introduced in 2.0.14

• New Theme.html

--- More Resources and Theme Showcases ---

• morphogenesis theme

There are lots of great examples of XOOPS Themes available, just check out some of them...

• Xoops Theme Library

• XOOPS Themes on GitHub

• Angelo Rocha

• RedMexico

• Xoops Theme Demos

• XoopsDesign

• XoopsFactory Theme Demos

• Bassman Themes

The above is by no means a complete list of the great theme contributors for XOOPS.