InstantASP Documentation

To change the colours & styles of fonts used within InstantForum.NET you should modify the "forum.css" style sheet within the "styles" directory of your skin folder.

The "Skin\{YourSkinName}\Styles\forum.css" file contains all the CSS used by InstantForum.NET. There are a number of CSS classes used to control styling within InstantForum.NET however we've designed the CSS so designers only need to change a handful of key CSS elements to achieve a dramatic change to the look & feel of InstantForum.NET.

To help highlight the main area you'll want to focus on when styling we've broken up the interface to 5 key elements….

Some of the CSS class names are very short and often abbreviated. Whilst we appreciate this makes it harder to understand the CSS it's a trade-off with performance. If you read the forum.css you'll notice we do comment all key CSS elements and provide additional information via inline comments.

Main Navigation

The main navigation appears at the top of every InstantForum.NET page. This contains the main navigation links aswell as the login & register options. The mark-up for this area can be found within the"Skins\{YourSkinName}\Controls\MainNavigation.ascx".

To control the styling & color of fonts here you'll need to modify the following CSS elements within the forum.css file.

mn_r, mn_l, mn_cc, mn_c, mn_flp, mn_frp
To customize the background used by the main navigation you'll need to modify the background images applied by the CSS. For further information please see our "key InstantForum.NET Skin Image" article.

BreadCrumb

The breadcrumb control is again displayed at the top of every InstantForum.NET page. The mark-up for this can be found within the "Skins\{YourSkinName}\Controls\Header.ascx". The key css lements you'll need to modify here are…

bc_r, bc_l, bc_cc & bc_c
PanelBar

The PanelBar control (our collapseable & expandable) panel control you see used throughout InstantForum.NET & InstantKB.NET is covered in more detail within our "The InstantASP.Common.UI.PanelBar Control" article.

Headers

To control the font & color used within the various headers you'll need to modify the following CSS classes within the forum.css fikle...

PanelBar_SubHeader
Table Cells

To modify the background-color & font used within the various table cells within InstantForum.NET you'll need to modify the following CSS classes within the forum.css file...

TableCell_Light, TableCell_Dark, TableCell_Medium
Default Font within InstantForum.NET

To change the default font face & color used within InstantForum.NET you'll need to modify the following CSS classes within the forum.css file…

contentWrapper, TableCell_Light, TableCell_Dark, TableCell_Medium
You may also wish to change the following CSS...

SmallTxt, SmallTxtBold, LargeTxt, LargeTxtBold
Chaning the font used for the Application Name Label

You'll need to modify the ".mn_c h1" css classes within the forum.css file to modify the main application name label.


Changing the Paging Controls

To update the look & feel of the paging controls used within InstantForum.NET you'll need to modify the following CSS classes within the forum.css file...

pc_Text, pc_TextSelected

Changing the Simple Menu Controls

To update the various menus displayed within InstantForum.NET you'll need to modify the following CSS classes within the forum.css file...

sm_Container, sm_Menu

Customizing the InstantForum.NET Background Color

The following CSS element within the forum.css file for your skin controls the page background color...

html, body
{
margin: 0;
padding: 0;
}
Customizing the Form Elements (TextBoxes, Select Lsits etc)

To modify the background color or font styles used within the various forms within InstantForum.NET you can modify the following CSS classes...

• FormInputText
• FormInputDropDown
• FormInputTextArea
• FormInputHighlight
• FormCheckBox
• FormButtonSmall
• FormButtonBig

For additional information on each CSS class please see the inline comments within forum.css.