Using the same example as the "Key InstantForum.NET CSS Classes" article we'll attempt to detail the key skin images or the images you can change to achieve the most dramatic change to the look & feel of the user interface.
The images that build up the main navigation bar can be found below…
Background Image Left
Exmaple...
This image can be found within the "Images" folde within your skin directory...
Background Image Tiled
Exmaple...
This image can be found within the "Images" folde within your skin directory...
Background Image Right
Exmaple...
This image can be found within the "Images" folde within your skin directory...
The images that build up the breadcrumb background images can be found below…
Background Image Left
Example...
This image can be found within the "Images" folde within your skin directory...
Background Image Tiled
Example...
This image can be found within the "Images" folde within your skin directory...
Background Image Right
Example...
This image can be found within the "Images" folde within your skin directory...
For information on customizing the PanelBar control including the images used for the PanelBar control please read our "The InstantASP.Common.UI.PanelBar" article.
Due to the color gradient used within table headers a background image is required.
Example...
This image can be found within the "Images" folder within your skin directory.
Updating the color of this image will update the background colors used within all sub headers just below PanelBars.
No images are used within table cells.
To customize the rounded search box colors you'll need to modify the following images within your skin folder...
- input-bgleft.png
- input-bg.png
- input-bgright.png
The drop down menu arrow image is called cat-input-button.png.
The search magnifying glass is called search-input-button.png
For example we've customized these images here to provide a brown look & feel...
The various buttons within InstantForum.NET are available for download within a separate layered Photoshop (PSD)files.
You can download the Photoshop buttons at…
http://community.instantasp.co.uk/Topic15385.aspx
This download also contains the default true type font used for the type face on the buttons. This allows you to update the language for the buttons.
The EmotIcons are available within a layered Photoshop file at the link below...
http://community.instantasp.co.uk/Topic15385.aspx