Themes
Creating New Themes
This is a brief outline on how to create a new theme in XMB forums. This is offered up as an explanation of the different fields required in the theme creation dialog only. After familiarizing yourself with the different components you will be ready to start the creation process. Practice and experience will be the final steps to creating good XMB themes.
Number / Names of the Fields
XMB themes are composed of 21 variables represented by 21 fields, in the Admin Panel / Themes - Details, that the user fills in with the the desired colors/sizes/images:
1 Name field
12 Color fields (3 of these fields can use images for the color variable)
2 Font size/type fields
2 Directory designations
1 Main site logo
3 HTML layout variables
Notes
- All FIELDS MUST BE FILLED - not doing so causes problems!
- It's best not to alter the existing themes, leave those as is and start a new one. We'll be going over how to do that. While the existing themes can be re-installed it can be problematic if the deleted theme is the default theme - or if any members were using that theme.
- Never use an apostrophe ( ' ) in the theme name!! Never! This causes all kinds of grief. You may want to "personalize" your theme by naming it "Handy Andy's Theme". Don't do it - find another way of showing the author/object of the theme. I've also seen some problems arise with other special characters used in the "Name" field so avoid trouble by keeping it simple.
- When creating new themes, or modifying existing themes always use the "#" prefix with your color codes. Example: use #ff0000 not ff0000- the reason for this is that while most of you probably surf the web using Internet Explorer or similar browsers (browsers using the IE engine) you would never know that your themes are not being displayed in the "Gecko" browsers (Netscape, Mozilla, Firebird). Without getting too technical .... IE is much more forgiving of the omission of the "#" while the Gecko browsers won't tolerate the same omission. And while the majority of your members may use Interent Explorer... who wants that rogue Mozilla user, who happens by, thinking you must be devoid of any creative talents
- If you go to the Administration Panel / Themes page and click on any of the existing theme's "Details" link you will see how that theme is constructed. It's a good idea to do this to familiarize yourself with the layout and theme components.
Let's start a new theme
Go to Administration Panel / Themes
Here you will see a list of all of the installed themes for your forum.
At the bottom of the Theme list is a "New Theme" link - clicking this link will take you to a blank theme page that you will fill out with the
colors/images/specifications of your choice.
Let's go over the fields one by one.
The Fields
Theme Name
This is where you will title your new theme. Please remember that you should never use an apostrophe in the theme name (See Notes above).
Background
(Enter a hex code or an image name): This is the background color or a tiling image that will be used on all pages. If you are confused as to exactly what this means use the "Details" of an existing theme to see how the background is used. Here are some guidelines for the use of tiling images as the background:
- Don't use a background image that is too big. The people that visit your page don't want to wait forever for a 200K graphic just to fill the background. Many paint programs offer the means for optimizing your images within the "Save" dialog. Generally .jpg and .gif images are the best for the web.
- Keep the background unobtrusive. Most web page background images should be muted, so that the text of the page can be read.
- Use contrast wisely. Make sure that the text of your web page, especially links, contrast with the background image. Choose colors so that they coordinate rather than clash.
- Avoid unsightly artifacts. Use tiling images that don't show visible seams or weird dithering effect.
TIP - The web is a great resource for locating tilable background images. Use http://www.google.com and search for "web backgrounds" or similar keywords.
Alternating Colour #1
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
Alternating Colour #2
These are the colors that will be alternated in the forums. The best way to understand how this works is to use the "Details" link for one of the existing themes and observe how the 2 colors are used.
Link Colour
This sets the color all of your links will be. This includes the forum titles, navigation links, Who's Online links, etc.... This requires a color hex code; i.e. #ff0000 (red)
Border Colour
This sets the color of the border that will surround your forum tables. This is dependent on Field #14 for the border width.
Header Colour
This is the color of the "headers" i.e. The bar across the the forums list on the index page (the one that says "Forum: Topics: Posts: Last Post: ) and the header menu bar where your main links are located. There are some other instances of the "header" color, again I suggest using the "Details" of an existing theme to familiarize yourself with where this color will occur.
Header Text Color
This sets the color of the text used in the headers. Make sure that you use a color that will be visible with Field# 7.
Top Table Color
(Enter a hex code or an image name): - The top table is the area where the main logo is as well as the "Last Active", "New u2u Message", and "Login / Logout links" - you may also use an image here as a background instead of a color.
Category Color
(Enter a hex code or an image name): - the category bars are the bars above the forums when you create them in the Administration Panel / Forums page. You can also use an image for these.
Category Text Color
This sets the color of the text used in the category bars.
Table Text Color
This set the text for "forum descriptions, Who's Online key, text in the news ticker, Stats titles, Member List numbers, Status, Date, , etc...
Text Color
This sets the color of the "Posts Subjects, navagation titles, Copyright text, Last Active and Welcome text, etc....
Border Width
This sets the size of the border measured in pixels. 1 being the "thinnest" and increasing proportionately with the higher number.
Table Width
This is the over width of the forum tables - or - how wide your forums will expand across the screen. This can be set in percentage (100%) or in pixels (600).
Table Spacing
This is an html table value and controls the amount of spacing between the individal cells in each table.
Font
This field allow you to enter a font family. An example of a font family would be "Verdana" or "Comic Sans". A note about this - whatever font you specify here will need to be installed on the user's PC or it will not display correctly - if the user does not have the font that you specify their system will substitute their "default" Windows font for the one you have in that field. So with that in mind it's best to keep the "Font" simple. Most systems have the Verdana or Arial font installed so it's a good choice here.
Big Font
A bit of a misleading name - this is the "size" designation of the text, including the links. There are few places that are not affected by this field's value; like the "Last Post" column of each forum is one example of an exception. This field will accept the desired font size in px (pixels) or pt (points) an example of each would be: 12px or 7pt.
Board Logo URL
This is the main forum logo, the banner located in the upper left corner of the header. If you have a custom logo you will enter the file name (example: forumlogo.gif) here. Only the file name as the directory is hard coded as the theme's image folder in the forum's "image" directory. You'll notice that this has the additional instructions that read: [(Enter a hex code, a flash movie or an image name): To use a Flash movie as avatar, separate its url, width, and height by commas - like so: ""http://www.wherever.com/avatar.swf,80,40""
Image Directory
Each theme must have a directory in which the images for that theme are stored. If you create a new theme you will need to either: use an existing theme's image folder for the images or, if you are using "custom" images for this new theme, create a new image folder to store the "custom" images. Whichever method you choose to use you must specify the image folder here.
If you do have custom images you want to use, then you need to create new image folder on your server - and this folder must be within the forum's image directory. It must be in with the other theme folders - this is important as Field #20 is set to read from this location only. So if you are creating a new theme called "Neo" then you may want to name the new image directory "neo" as well. This is where all of the new theme's images will be uploaded.
NOTE: It is a good policy to always use lower case letters for all images and folders - some browsers (albeit the older ones) do not do well with upper case letters for file names.
Smilie Directory
This is the path to the smilies folder. If you want to create a new set of smilies and have them in a different folder - you would enter this new set's folder name here. Otherwise this should be set to the default smilie folder (images/smilies). See the How To on "Adding New / Additional Smilies" for info on using multiple smilie sets.
Installing Addon Themes
- . Download the theme you like and unpack it using your favorite unpacker program such as Winzip or Winrar etc.
- . Copy the extracted complete folder of the images etc to the forums sub-folder called "images" by ftp.
- . Go to "Administration Panel" and click "Themes". Scroll down to the "Import Theme:" area and then click the browse button. Browse to the theme you downloaded to your hard drive and select the theme file which should already be called something like this example: ""XMB+Corporate.xmb""
- . Click the button called "Import Theme into XMB"
- . Go to your "Control Panel" and "Edit Profile" and select the new theme from the drop down menu under Edit Profile - Options: Theme: Save your change.
