Creating and Using Custom CSS Style Sheets

If you are an advanced HTML coder and familiar with the use of CSS style sheets, you can upload a custom style sheet so you can reference the classes in that sheet in your custom pages. Your style sheets only affect your organization's website.

System Defined Style Classes

The handling themes involves loading hundreds of different style sheets based on the current theme. There are a few system defined CSS classes that might be useful. You would just add the "class=" parameter on your tag, which is typically a "div" tag.

SPIHideWhenPrinting
This prevents the contents of the tag from being printed is the Print button is used in the browser.
SPIHideMobile
The tag contents will not be displayed if being viewed on a phone.
FloatRight
The tag will be floated to the right with margins on all but the right edge. This is normally a "div" tag.
ErrorPanel
This is used on a "div" tag to create a block of highlighted text formatted to display an error message. This is the same formatting used when displaying Alerts.
HighlightTextPanel
This is used on a "div" tag to create a highlighted block of text with the themed border and background.

Style Sheet Classes

Your website already has dozens of css style sheets and hundreds of styles defined for controlling nearly every aspect of the pages displayed. You do not want to interfere with the processing provided by these style sheets. The style sheets allow the pages to change when a different theme is selected.

Use unique names that cannot conflict with more generic or common names that might already be defined. We recommend starting the class names in your css file with "custom" to signal it is a class that you defined and will not conflict with other class names.

Since the system needs to adapt colors and formatting to match the current theme, your custom css class might easily disrupt that functionality. Avoid setting colors. Do not attempt to set styles for HTML tags, like "h1", or your pages will not display properly when the theme is changed. Your classes might also be ignored in cases of conflicts with system values needed.

Style Sheet Usage

All style sheets are loaded on all pages. You will not be able to restrict style sheets to individual pages. There are dozens of sheets active at any time.

CSS style sheets have a complex method of resolving conflicts when the same class name is used in multiple style sheets. It is important in your custom style sheets to use unique names for each class you define. With unique names it never matters which style sheet defined the formatting class.

A typical use might be set styles for a "div" tag. This could be used to float text or apply responsive formatting to better match the current device. Special margins, borders, or background colors could be set.

You must not attempt to define styles for basic HTML tags. Instead, define a class that you can attach to a tag. For example, if you wanted "p" tags to be 20 point text, you would create a class called something like "customBigText" and have it set to large font size. You would then code your paragraph tag as '<p class="customeBigText">'.

Uploading a CSS Style Sheet

Use the "Manage Downloads" page to upload your css file. You can upload it as a non-specific file type and later change the type to "Style Sheet". Once you specify the type as a style sheet, it becomes active immediately. Any HTML tags you created that reference its classes will immediately use those classes.

Typically you would only upload a single style sheet. The system supports, however, any number of style sheets. They all can be active for your organization at once.

If you find that your class definitions are ineffective, it is likely because they conflict with system standard classes. You can use F12 on your browser to diagnose issues with your page formatting and identify why your classes are not used.



This website is hosted by Visual Pursuits, a service provided by Software Pursuits, Inc.