Styling Portal Tabs

A portal with tabs uses HTML, CSS, and JavaScript to asynchronously load content on a portal page without having to reload the entire page when navigating from one tab to another.

The display of the tabs themselves can be further customized with additional CSS. This can be added to the portal via custom CSS rules.

Tabs Source Code

For an overview of tab functionality in portals, please see Portal Tabs.

In the portal view, tabs are added to the Source as list items (<li></li>) in an unordered list (<ul></ul>). The <ul> element has a class attribute with a value of subtabs.

Tabs as seen in view's Source

<ul class="subtabs">
<li>
<a data-tab="home" href="#">Home</a>
</li>
<li>
<a data-tab="volunteers" href="#">Volunteers</a>
</li>
<li>
<a data-tab="events" href="#">Events</a>
</li>
</ul>
Each individual list item itself contains an anchor (<a>) element, which displays the name of the tab. Each <a> element also has data-tab attribute values that correspond to that particular tab method's action. 

JavaScript allows the contents of a tab (via its associated method) to render on the page: 

JavaScript associated with tabs functionality

<script type="text/javascript">/*<![CDATA[*/ var loadTab=function(tab, isBack){
if (!isBack) history.pushState(tab, null, "?tab=" + tab);
$("a[data-tab]").removeClass("active");
$("a[data-tab='" + tab + "']").addClass("active");
FW.Lazy.Fetch("?cmd=" + tab, $("#content_body"));
};
window.addEventListener("popstate", function(e){
  if (e.state) loadTab(e.state, true);
       else history.back();
 });
$("a[data-tab]").on("click", function(){
loadTab($(this).data("tab"));
return false;
});
var qs = FW.decodeFormValues(location.search.substring(1));
if (qs["tab"]) loadTab(qs["tab"]);
else loadTab("home");
/*]]>*/</script>

The following image shows the resulting HTML for the page:

HTML of tabs section of portal

The tabs (i.e. <ul> element) are nested within a parent div element with a class of part, as well as an ID that consists of part plus a hexadecimal string.

The active class is added to the current tab being viewed, i.e. the Home tab by default upon first entering the portal, or the tab that is clicked on. 

On a rendered portal page, the HTML, as well as any existing CSS, can be viewed in-browser, typically by right-clicking the element and selecting "Inspect Element" or opening the browser's Developer Tools.

Customize Tabs with CSS

The tabs (specifically, <ul> elements with a class of subtabs, and nested or child <li> and <a> elements) are styled by default CSS as part of Slate's standard branding. This default CSS can be overridden by adding custom CSS rules in the portal editor (i.e. from the main portal editor page, click "Edit" on the upper right).

The following are example CSS rules that you can copy and paste into the Custom CSS Rules editor. You can further customize these rules, as well as add your own, to use your desired properties and values or to better suit your institution's branding.

Custom CSS rules editor

Allow the browser to automatically adjust the height of the tabs, instead of setting a fixed value:

#content ul.subtabs li a {height: auto; font-size: 14px; text-align: center;}

Set a margin-top of 0:

.part ul.subtabs {margin: 0 0 1em; width:100%;}

Adjust tab width:

.part ul.subtabs li {width:20%;}

Modify tab colors, padding, margin, and apply rounded corners:

.part ul.subtabs li a {background-color: #f5f5f5; color: #000000; padding: 5px 15px; border-radius: 3px; margin-right: 7px;}

Modify color of the "active" tab:

.part ul.subtabs li a.active {color: #fff !important; background-color: #00669e;}

Modify color of a tab upon mouse hover:

.part ul.subtabs li a:hover {background-color: #fafafa !important; color: #00669e !important;}

  Tip

If a custom CSS rule doesn't appear to have any effect, you could try adding the !important keyword (e.g. { width: 20% !important; }), and/or change the CSS selector so that it becomes more specific to the element you're trying to update (e.g. #content ul.subtabs li a). To see the changes on a more immediate basis, sometimes you might also need to do a hard refresh on your browser (Ctrl + R).

Was this article helpful?
6 out of 6 found this helpful