Custom CSS Rules allows users to add different styles to just a particular portal, rather than change the institution's overall Slate branding.
Tip
We recommend consulting your web/marketing staff for advice on what styles or rules to implement in an individual portal, so that it remains consistent with your institution's visual brand and identity.
To effectively use this feature, you must be comfortable with or be willing to learn CSS, in order to maintain CSS rules for portals and be able to update or troubleshoot when necessary!
In the main "Edit" section of the portal, users can add custom CSS Rules.
For example, even rows of tables are to be shaded grey. This CSS rule will apply to all tables within the portal, including those in pop-ups.
Important!
Custom CSS Rules will apply the styles to that individual portal only.
Tip
We recommend that your portals inherit your main Slate branding (by selecting "Default Branding" on the relevant pop-up method), while leveraging custom CSS rules for specific items, such as making buttons or tables look a particular way. This allows specific elements or aspects of the portal to be customized at a more granular level, but without writing an entire stylesheet for the portal from scratch.
On the portal page, a table might look like the following (i.e. all table rows have the same background color), as inherited from the overall site branding of the Slate database:
After adding a custom CSS rule, the table rows are now rendered with alternating background colors:
As mentioned earlier, the custom CSS rules will apply throughout the portal. If different styles are desired for the main portal page vs. other areas like pop-ups, we recommend applying HTML classes to achieve the desired look.
Without different table classes, for example, both tables on the main page as well as in the pop-up will have grey-colored alternating rows:
With different rules for different table classes, users can specifically style tables as desired. Here, the pop-up table has light blue colored alternating rows, while the main table has grey:
Custom CSS rules can also hide elements from the main branding. For example, the main branding (and other public-facing pages such as inquiry forms, or the Slate application) might include a footer, which may not desired for a specific portal.
In the portal, a custom CSS rule can be added to hide the element (which has an ID of c_footer).
The portal will not display the c_footer element.
