Styling Portal Tabs

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.

<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>

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

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

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.

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.

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;}