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.
- This prevents the contents of the tag from being printed is the Print
button is used in the browser.
- The tag contents will not be displayed if being
viewed on a phone.
- The tag will be floated to the right with margins on all but the
right edge. This is normally a "div" tag.
- 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.
- 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
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.