FuseTalk 3.0 features a brand new interface, which is completely driven by CSS. Due to the amount of changes that took place in this new interface, FuseTalk 1,2.x "skins" will no longer work with FuseTalk 3.0. Below we’ll walk you through creating a FuseTalk 3.0 skin, and show you how the skinning functionality works.

What is a "Skin"? To control the look and feel of the product, FuseTalk employs images and CSS styles. These images and style sheets combined make what we call a "skin". If you open up the "forum/include/themes" folder in your FuseTalk Installation, you will see several directories. These directories are actually separate "Skins", each has their own images and CSS files that create a unique look for the product. Below is a list of the style sheets included in a skin, and the main images that are used to control the overall look of the product.

Folders

• folderimages – this folder contains all the icons for the category/topic icons that are used on the front page of the forum and on the topic listing page. These icons represent the various types of categories and topics that FuseTalk contains i.e "locked, read-only, protected etc.".
• images – this folder contains the images used throughout the application for toolbars etc.

CSS Files

• fonts.css – this style sheet controls the styling of all of the fonts/links used within the application. You can adjust the color and text styling of all fonts and links from this file.
• largetext.css,mediumtext.css,smalltext.css – these style sheets controls the "large font" version of the application. You’ll notice on the upper right hand side of a forum there is a small and capital "A" button. Pressing this button switches style sheets in the forum application for text size. There are three sizes of text in the application "small,medium,large", by editing these stylesheets you can control what the font sizes are set to when the buttons are clicked.
• layout.css – this style sheet is used to control layout of the various html objects used in the application (DIVS,TABLES etc.). You usually will never need to touch this style sheet as it doesn’t control the overall look, more the layout of the forum application.
• print.css – this style sheet removes various elements on the page for use when printing a page.
• skin.css – this is the main style sheet of a "skin", it controls the colors and images used for various interface elements within the product.
• style.css – this style sheet simply sets up the skin, you shouldn’t need to change anything in this style sheet.

Creating a "Skin"
Creating a skin with the new skinning format is much easier than before, below we’ll illustrate how easy it is to create a new skin.

1. The first thing to do is duplicate an existing skin and give it a unique name. To duplicate a skin simply open the forum/include/themes directory and copy one of the skin folders and give it a unique name.
2. Login to the global admin and under forums – color themes, create a new theme. The Theme name can be whatever you want (it’s how you’d identify the theme to select from the interface). The theme directory name should be the same name you gave the new skin folder you just created. The "shade" controls if the theme is going to have a dark or light background.
3. Now, login to the forum and under the profile – personal options select your new theme, so you can see how it looks as you alter the css files.
4. Open the "skin.css" in your favorite text or html editor.
5. There are a few key CSS classes that control the main interface elements in FuseTalk, these are: Box, BoxHeader, BoxHeaderLeftSide, BoxHeaderRightSide, BoxHeaderLeft,BoxHeaderRight,BoxHeaderCenter, BoxContent,BoxContentHeader,BoxAdminHeader. Editing these classes will affect all of the containers in the interface. In most themes the boxes have a image based header, the file names for those images are: box_topleft.gif, box_toprep.gif, box_topright.gif, located in the "images" folder within each skin.
6. After you have edited these classes, you may need to adjust other classes in the skin.css file, simply make changes and view them in the application as you go.