XOOPS 2 Theme Mini-How-To
Date 2003/2/25 22:30:37 | Topic: Themes
| It seems as though some steam is picking up on the theme front so, I’ll post what I learned while creating my theme for BoardJIVE.com. One of the first pre-requisites that you need to have is a basic understanding HTML (preferably 4.01 transitional) and CSS.
Another key here is to understand that not all browsers support all these standards so, test your theme with as many browsers as possible. If you don’t have a Mac, ask someone who does to check it out and get back with you so that you have a majority of platforms covered.
If you’re armed with a good HTML and CSS understanding, your ready to embark on an adventure of creating your first theme! Here’s what was in my tool chest to create my site (BTW, I use a Mac at home and Windows at work so the tools listed are cross platform except for one, the CSS editor): Macromedia’s Dreamweaver MX for HTML layout (Mac and Win) Macromedia’s Fireworks MX for graphics (Mac and Win) BBEdit 7.02 for hand editing (Mac), DW editor for Windows TopStyle Pro for CSS editing on Windows and DW for CSS editing on Mac 7Zip from Sourceforge.net for creating .tar files (necessary for uploading your theme) This seems like a long laundry list but you could just use a good old text editor to accomplish the same thing depending on your skill level. Once you have your tools in place, your ready to start. The first thing I advise is to download either the “Default” theme from the XOOPS “Theme manager” or use the included “X2T” theme from W4Z004. I used the “Default” for my starting point and incorporated the login stuff from the “X2T” theme. Once you’ve chosen a theme to start with, use the theme manager to upload the .tar file using the theme manager naming it other than something called Default (i.e. mytheme). Once installed, use the preferences settings under admin to change the system theme to your newly uploaded theme.
Now that you have your theme set, make sure it’s running by returning to your home page. Next un-tar your theme file into a directory under “themes” (i.e. \themes\mytheme), take a few minutes to walk the directory structure to get a good understanding of the organization of the templates. The first thing you notice is the “skins” directory. This directory stores your main skin.html (used for controlling site layout), the associated CSS files (style.css, styleNN.css, styleMAC.css) and the images associated with the skin.html and block templates. The next directory you’ll notice is the “templates” directory. This is the directory where the templates for all your modules are stored. Be sure to learn the structure and don’t move directories around or you’ll mess up the theme. Once your satisfied that you have all the above accomplished, your ready to return to the admin and make one last change so that you can start seeing your design changes in real-time!
From the admin > preferences menu, choose “Update themeset files from themes/directory?” and set it to “yes”. What this setting does is tell XOOPS 2 to use this directory (i.e. themes\mytheme) to PULL the theme files from the theme directory bypassing the caching system. This feature was implemented so that you don’t have keep jockeying back and forth to the theme manager pasting text. So, once you start changing the “skin.html” or any of the module templates, you’ll see the changes instantly from your home page (pretty cool huh?). Be aware that this feature was NOT meant to be left turned on for a live site because it could start affecting your performance during normal or peak traffic times. * A word of note here, be sure to upload your theme using the theme manager first before extracting to/or renaming your theme directory because XOOPS 2 will not allow you to upload a theme with a directory name in the themes directory with an identical name (whew!).
|
|