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.

FloatLeft

The tag will be floated to the left with margins on all but the left edge. This is normally a "div" tag.

FloatRight

The tag will be floated to the right with margins on all but the right edge. This is normally a "div" tag.

SPIGridBalancedContainer

This identifies a container using the "grid" system for creating columns. Each immediate child of the container becomes a new column. Each column will have the same width balanced within its parent container. This class is usually placed on a "section" tag and the columns would normally use an "article" tag, but "div" tags also work.

SPIFlexRowContainer

This identifies a container using the flexbox system for creating columns. This is normally placed on a grouping tag like "section".

SPIFlexMain

This identifies the main column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "article".

SPIFlexAside

This identifies the minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside".

SPIFlexAside-Left

This identifies the left minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside" and is addition to the "SPIFlexAside" class which should be present on the same tag.

SPIFlexAside-Right

This identifies the right minor column inside a SPIFlexRowContainer container. This is normally placed on a grouping tag like "aside" and is addition to the "SPIFlexAside" class which should be present on the same tag.

center

This class will only work is inside a fixed width container. The item will be centered using "margin-left:auto; margin-right:auto; text-align:center;".

Borders

This places a 1 pixel border around your tag, which is usually a "div" tag. A 8px padding is used on the content of the tag.

spifitwidth

This places sets the width of the tag to the width used by the content of the tab. This uses "width: fit-content" style. This might be used with a "div" tag hosting an iframe.

spifitcontentheight

This can be used on an iframe tag to force its size to the vertical size of its content.

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.

Code Snippets

If you do not want to code a HTML tag directly, you may be able to use snippets to insert the special codes described here. At the top of the editor, use the "Insert" tab. Place the cursor where you want the code snippet placed and select the appropriate snippet item from the "Insert Code Snippet" list.

You cannot create your own snippets, but they can be helpful if you are using any of the included classes above.

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.