Customizing Your Site’s CSS
The look and feel of JICS is controlled by a series of default stylesheets containing preconfigured style choices, plus a custom stylesheet, which is intended for your customizations. All of these stylesheets are added to your system when JICS is installed.
If desired, you can also apply a “portal design theme.” JICS comes with several portal design themes already available for your use (and you can also create your own theme). Each theme has its own stylesheet, which supersedes all other stylesheets. Themes are described in more detail in Portal Design Themes; this section deals mainly with the way that JICS handles the theme’s stylesheet in relation to other .css files.
The Stylesheets Used by Default
In general, stylesheets are always loaded in the same order, but some stylesheets may be skipped depending on whether your site is using a portal design theme. For example, if you are using a custom theme, you might have configured it so that JICS will ignore some of the sitewide stylesheets mentioned in point 1 below.
The system loads stylesheets in the following order:
Default Stylesheets that Affect the Whole Site – These stylesheets are already set up with style choices. These files should not be modified. If you are using a custom theme, you can configure your site to ignore some of these stylesheets. For more information
Default Stylesheets that are Feature Specific – These stylesheets should not be modified. They are always loaded and used by the system.
Custom.css – This file has a structure but is essentially empty of style choices after an installation; it is intended to hold your customizations and therefore may be modified.
The CSS File for a Theme – If you are using a theme that was installed with JICS, then its stylesheet should not be modified. If you are using a theme that you created, then you may modify it.
For more details, refer to the following applicable stylesheet sections.
The stylesheets that affect the entire site are contained in the following directory:
Drive:\Program Files\Jenzabar\ICS.NET\Portal\UI\Common\Styles
None of the styles in this directory should be customized. If you want to supersede or bypass any of these stylesheets, you can use Custom.css or a custom portal design theme.
About the Files in Common\Styles
The Styles directory contains the following files:
divStyle.css – Defines the style of divs (by default, the main site layout does not use divs—for details on how to configure this, see the next section, Using divStyle Instead of tableStyle). This is one of those stylesheets that you can choose to actively ignore if you create and activate a theme.
IEOnly.css – Applies only to content displayed in Internet Explorer, not other browsers. This stylesheet isalways used.
lightbox.css – Applies to content controlled by the lightbox JavaScript plug-in, which is used by JICS to display images. This stylesheet is always used.
print.css – Defines the style of the print-only views in JICS. This stylesheet is always used.
siteStyle.css – The main stylesheet for the site. This is one of those stylesheets that you can choose to actively ignore if you create and activate a theme.
tableStyle.css – Defines the style of tables (note that by default JICS uses tables instead of divs). This is one of those stylesheets that you can choose to actively ignore if you create a theme.
If you see other files in the Common\Styles directory besides those listed above, they are probably files that were added by a pre-7.5.x version of JICS and are no longer relevant.
Using divStyle Instead of tableStyle
By default, the system uses tables for the site’s main layout (and uses tableStyle.css). However, if desired, you can configure JICS to use divs instead of tables. You do this by adding a row to the FWK_ConfigSettings table.
Note that by default the FWK_ConfigSettings table does not contain a record related to the site’s layout—it contains a row for this setting only if you add it. If you want to add this row, the values you insert are as follows:
Category – UI
Key – HtmlProviderType
Value – your choice of one of the following:
div
table
custom
DefaultValue – table
A GUID will be automatically generated for the ID column.
The system includes a stylesheet for each feature. These stylesheets are located in the directory for each feature type, which can be found in the following parent directory:
Drive:\Program Files\Jenzabar\ICS.NET\Portal\Portlets\
These stylesheets should be not be modified, and they cannot be bypassed. If you want to supersede them, you can do so by modifying Custom.css, or by using a theme. If you are using either of those methods to customize the look and feel of a feature or feature instance, note that the following two classes that may be helpful:
pt – identifies the type of feature, such as Announcements or Calendar.
pi – identifies the name given to the feature instance.
Each feature instance in JICS uses these classes. So, for example, a Calendar feature instance named “Athletics Events” would have the following class definition:
class="portlet pt_CalendarPortlet pi_Athletics_Events"
This change may also be useful if you want to customize a feature’s behavior using jQuery.
The main stylesheet intended to contain your customizations is Custom.css. By default, this file is located in the following directory:
Drive:\Program Files\Jenzabar\ICS.NET\Portal\ClientConfig\HtmlContent
When you want to make changes to this stylesheet, you should do so from the Custom CSS section of the Site Manager > Portal design themes screen. Changes that you make on that screen are saved to the Custom.css file.
 |
If you are using a portal design theme, the last stylesheet loaded is the one associated with your theme. This stylesheet is located in the folder for the theme.
Of those themes that are installed with JICS, their folders are located in the following directory:
Drive:\Program Files\Jenzabar\ICS.NET\Portal\UI\Themes
If you create themes, your custom theme’s folders are located in the ICSFileServer folder, in a Themes subdirectory.
For more information on themes, see Portal Design Themes.
Other Features that Complement Custom CSS
If you have created—either in your Custom.css file or elsewhere—a custom CSS class that affects a particular layout, JICS includes an option in the UI for pointing to this class.
This feature is available on the Layout screen. If you want to use this feature, just enter the name of the custom class in the Use an existing CSS class to create a custom layout field and click Use this.
 |
Once you click Use this, the system will apply your custom call to the div that surrounds the page’s columns.
When you use this option, the system assumes that you are using a three-column layout. If in fact you are using only two columns, the third column is ignored.
Note that only a member of the Administrators role can select the Custom Layout using CSS Class option. However, anyone with access to Context Manager can deselect the option.