Your database uses a branding template to define how it renders externally-facing pages.

Portals default to this template, so, by default, they’ll have the same institutional branding as all of your other Slate-hosted pages.

If you want to make portals look different than your default branding, you can use custom CSS rules or templates. We cover both in this article.

With these tools, you can configure portals to:

• use their own distinct branding

• overwrite parts of your institutional branding

• use no branding at all

How branding works in Slate

When we talk about branding, we’re talking about pieces of code that work together to make your website look like your website. This code sets the rules that a web browser interprets and renders as headers, footers, navigation menus, colors, fonts, and more.

In Slate, this branding is controlled by the Branding Editor, which lets you edit and preview Slate branding.

📖 Further reading: Branding Editor

Modifying this branding requires a solid foundation in HTML and CSS, two of the three programming languages essential to web design.

Method output

Your branding comes through in a portal via the portal’s methods.

When you configure a portal method, you’re met with several options for the method’s output type. The output type determines whether or not your institutional branding is applied to your portal.

The output type Default Branding does what it sounds like: any portal part utilizing this method inherits your existing branding, while still allowing for portal-specific customization.

If your portal doesn’t have a default method, your default view is still rendered with your institutional branding (as if Default Branding was selected).

📖 Further reading: Portal methods

Changing portal branding with custom CSS rules

Cascading Style Sheet (CSS) rules let you apply different styles to specific portals, rather than relying on (or changing) your default Slate branding.

A portal method inherits your institutional branding when you select Default Branding as its output type.

The method then looks for custom CSS rules that you’ve entered. 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.

With CSS rules, you can

• force tables and buttons to adhere to a specific color scheme

• add spacing between portal parts

• develop entirely new styles for exclusive use within your portal

• and more

📝 If you’re not yet comfortable using CSS, consult your web design and marketing teams for advice on what styles or rules to implement in an individual portal.

Adding custom CSS rules

To add a new CSS rule, navigate to the top-level page of your portal and select Edit.

In the Custom CSS Rules field, enter CSS code.

Look to the next section for some examples.

✨ Tip

Writing new CSS rules often requires identifying the IDs of HTML parts in your portal, usually table or div IDs. You can find these IDs with your web browser's Inspect Element tool (Right click → Inspect, or press F12).

Example CSS rules

Use these examples to acquaint yourself with custom CSS rules and apply them to your own portals.

Styling portal view widgets

All portal widgets in a given view have a CSS class of part. You can reference this class in a CSS rule to affect the display of all widgets. You can also add a class or classes to specific portal widgets to control how they render.

You can add one or more class names, separated by spaces, to the portal view widget’s CSS Class Name field. You can then reference those class names in your portal CSS rules.

Because you can add multiple class names to a given widget, you can style each widget individually.

Or, add the same class name to more than one widget to style them all with a single rule.

For example, you could add classes of even or  odd to each widget to apply styles to alternating widgets.

Add space below a widget

For example, to add spacing below a particular widget:

1. In the CSS Class Name field, enter space-below.

2. Select Save.

3. In the portal overview page, select Edit.

4. In the Custom CSS Rules field, enter the following custom CSS rule:

   div.part.space-below { margin-bottom: 30px; }

Adjust the amount of spacing by changing the number of pixels of spacing represented by px.

Add a border

You can add CSS rules not just for spacing, but for any other number of styles.

The following example adds a custom CSS rule for bright_border that adds a border around any widget with that CSS class:

div.part.bright_border { border: 2px solid #251d6f; padding: 5px; }

Table styles

By default, a table might look like the following (that is, all table rows having the same background color):

After adding a custom CSS rule, the table rows are now rendered with alternating background colors:

Separating table styles

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, apply 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:

#c_footer {visibility: hidden;}

#part_admissions table.table>*>tr>td {white-space: normal !important;}

Change checklist column width

In some cases, columns on checklist widgets will need to be made wider or more narrow, depending on the default font size or the font family that is specified to be used by the global branding template.

div#part_admissions table.table col:nth-child(4) {width: 300px !important;}

This kind of rule can also be updated to target different parts of your portal view code. If one is using the 'Checklist By Section' widget, it could be helpful to set the same date column for all the checklist tables (section tabs) in one instruction.

div[id^='part_checklist_'] table.table col:nth-child(4) {width: 15% !important;}

In general, the [attribute^=value] CSS selector matches every element whose attribute value begins with a specified value. In this example, we are targeting the 4th column of a table element with class of 'table' that is nested within any div element whose id attribute starts with the string part_checklist_. This would set the width for that column for all the section tabs that are configured in that portal widget.

Depending on the desired adjustments, the width can be set to either a specific pixel width or percentage. The !important property indicates that subsequent rules on the element should be ignored.

Dot/Ellipsis after checklist icon fix

You might sometimes see a period next to checklist icons. This is actually the beginning of an ellipsis which is displayed when there is too much text or content for a given element and the overflow setting on that element is configured in a particular way.

To fix this, either:

• Increase the width of the first column using the technique described previously

• Unset the text overflow property of the table cells. Example for an Admissions Checklist table below:

  #part_admissions table.table col:nth-child(1) {width: 28px !important;}
  #part_admissions table.table>*>tr>td {text-overflow: unset !important;}

Changing portal branding with templates

Templates let you create a style for their portals that is completely distinct from their institutional branding. By configuring a template, all methods and views within a will use the custom branding specified in the template. While it is possible to create a template using only the tools available in the WYSIWYG editor, making the most of templates requires a strong foundation in HTML and CSS.

Configuring a template

To configure your portal to use a template, navigate to the top-level page of your portal and select the ‘Edit Template’ button in the top right-hand corner of the screen:

An Edit Template popup appears with the familiar WYSIWYG editor. Here, you can include the template content that should be accessible on every page.

After crafting your content, insert the special-use merge field {{Content}} to specify the location of the portal content. Slate will render all the usual portal elements with the new branding template in the location you placed the {{Content}} merge field.

Using the source code editor, you can also insert alternative/external stylesheets and JavaScript libraries without the need to include these in every view within your portal, and without the need to add them to the institutional branding used throughout Slate.

✨ It’s possible to insert bootstrap code in your templates using this method.

Portal content disappears after adding a template

Don’t forget to insert the {{Content}} merge field within your template.

Insert this merge field at the location you want your portal content to appear. For example, between the template’s header and footer.

Additional resources

For additional assistance with branding in portals, we highly recommend the following resources:

• Preferred Partners: The Slate Preferred Partner Program recognizes organizations that integrate with Slate and offer implementation support, while providing meaningful contributions to the higher education community.

• Community Forums: The Community Forums are used by members of the Slate community (including Technolutions staff, Preferred Partners, and our Community Ambassadors) to empower crowd-sourced ideas, comments, and changes. Production updates and new features provided through our rapid release cycle are announced here frequently.