Theming FCWS SP2

FirstClass web services ships with the default "FirstClass" theme and uses a set of images and graphics that are complementary to that theme.
Though there are plans to make the theming of your site easier in the future, this document is an attempt to assist you in customizing the look and feel of your site to match the color scheme and graphics used by your organization.

You can begin with one of the shipped themes that comes with FirstClass Web Services or you can "roll your own" using jQuery ThemeRoller as described below. No matter what you do, however, you will still have to do more customization if you are changing from the default "firstclass" theme.

The folders in the fcws CSS/Themes folders were created using jQueryUI ThemeRoller. This is a free service provided by jQuery and in this section we will look at how you can use it to create your own theme folder.

After you have created your custom theme, you can install it on FCWS.

ThemeRoller does a nice job of creating some of the themed elements for your site, but you will have noticed that there are some graphic elements that do not match your new color scheme.

The Branding image appears in two locations - on the Login Screen and at the top of each page once logged in

There are two sprite image files that are used for different menu and toolbar options.

The nature of CSS (Cascading Style Sheets) is that the last style applied to a selector wins and overrides any other style that was previously assigned.
This means that we can create our own custom stylesheet and add it to the end of the listings in both of these new html pages and place our styles in that file.

The best way to determine what selectors need to be changed is to use either Chrome or FireFox's developer tools to determine what style is being applied to the selector in question.

I have included with this document the source files that I used to complete my custom theme.

You are advised not to make changes to your stylesheets that would affect the layout of items. This could adversely affect the functionality of your site.
It is recommended that you stick with color changes only.

When fcws is upgraded, it will archive and replace your fcws folder. Some files will not get replaced, yet others will. If you have customized your theme, you will have to check and move your customized files back from the archive to the active fcws folder.

NOTE: You may wish to keep a separate folder of all custom resources somewhere else on your computer so you can copy as needed,