Making your own CSS theme for FuseTalk

Platform: ColdFusion and .Net

FuseTalk uses CSS driven themes for its user interface. These default themes, and any themes that you create, are located in the forum/include/themes directory. A theme consists of interface images, a menu.cfm file (which lays out the top menu in the product) and a .css file, which is the CSS styles for the theme. In this tutorial, we'll create our own theme for FuseTalk.

1) The first step in designing a theme is to create a new directory in the forum/include/themes directory. So, let's create a directory named "desert" within the themes directory.

2) Next, take an existing theme's files and copy them into the desert folder so that you have a starting point. Copy a theme that has some similarities to what you might want to create.

3) Rename the CSS file that is now in the "desert" folder to the name of your theme. For example, let's rename it, "fusetalkstyles_desert.css".

4) Now that the theme is in FuseTalk, add it into the product so that we can select it and view the changes as we make them. Login to the global administration and go to "Forums > Color Setup". Scroll down to Create Theme and type in the new theme name ("Desert", in this case), the theme directory name (i.e. what we named the folder, "desert"), and the style sheet name, which is the name of your css style sheet (Refer to step 3). The Default shade is for the logo images, so that if you have an image for light and dark backgrounds, it will load the correct image depending on the "Shade" of your theme (Light/Dark). Select the "Add Theme" button to add the theme to the list of available themes.

5) Now log in to a forum and select the new theme, so that you can see the changes that are made as we make them.

6) Let's begin modifying the CSS style sheet now (through an editor like ColdFusion Studio) and start changing the look of the forums. Some of the major design elements that you'll probably need to change in order to create a new look are as follows:

1. .ftbody is the first style that you'll probably want to alter. It controls the background color of the forums.

2. .ftheaderbar is the next style that you'll probably want to alter. It controls all the header bars in the application (e.g. the front page "General Information" text is sitting on a header bar). This style has a graphic for its background, as you can see, but you can remove the graphic and just have a color for the background. How you customize each style is entirely a personal choice, and how much you can do depends on your knowledge of CSS style sheets.

3. .ftmessageheaderbar is another style that plays a large role. It handles the information boxes throughout the forums, like the one on the front page of the forums that tells you how many users are registered to the forum.

4. .ftalternatingbaron and .ftalternatingbaroff are two more important styles, which handle the alternating table cells that display the categories on the front page, topics on the topic page and messages on the message page.

5. .ftalternatingbarlinklarge, .ftalternatingbarlinksmallest, .ftalternatingbarlinksmall all control the links within the alternating bars. Depending on your alternating bar colors, these may also need adjusting.

6. .ftmenutd controls the top menu for FuseTalk; you may also want to customize this as well.

These are just a subset of the styles located in the style sheet. Feel free to explore more of the styles. All of the styles are labeled appropriately to what they control.

Congratulations! You have now created your own custom theme. We've only touched on a basic style sheet modification here, but you can also change the images located in the theme directory, and create new folder icons, which are located in the forum/i/foldericons directory.

Happy customizing!