Skip to Main Content

Storage Guide: Coding to Change Standard Settings

Intructions

Paste the code into the Guide Custom JS/CSS box from the Guide Layout drop-down list in the right corner. 

How to enlarge links within the guide

Change the font to whatever size you'd like by changing the number following 'font-size:"

<style>
.s-lg-link-list {
    font-size: 16px;
}
#s-lib-bc .breadcrumb {
    display: none;

</style>

How to stop displaying drop-down lists when hovering over tabs with multiple sub-tabs

<style>

#s-lg-guide-tabs ul.nav li.dropdown a.s-lg-tab-drop:hover~ul.dropdown-menu, #s-lg-guide-tabs ul.nav li.dropdown ul.dropdown-menu:hover, #s-lg-guide-tabs ul.nav li.dropdown:hover ul.dropdown-menu {display: none;}

</style>

How to hide guide tabs from view

This will hide the tabs from view even when logged in as admin.

<style>
#s-lg-guide-tabs {display:none;}
</style>

How to change the font colour within the hours widget


<style type="text/css">#api_hours_today_iid3447_lid0 {
  color: #fff;
}
</style>
 

 

Changing colour of an individual navigation tab

For guides with no sub-tabs (simple nav) 

<style>
/*Tabbed Guide Nav: Target the Xth page tab and change the background color*/
#s-lg-guide-tabs .nav-tabs li:nth-child(X) a {
background-color: green !important;
}
</style>

 

For guides with sub-tabs and more complicated nav

<style>
a[href*="p=#######"] {
  background-color: darkred !important;
}

</style>

The p=####### is an ID for a specific page/tab that you want the colour changed. This ID can be found under: Page Settings > Reorder/Move Pages > Page ID in brackets 

 

How to hide a guide title

<style>

#s-lg-guide-name {display: none;}

</style>

How to enlarge box headers

Change the font to whatever size you'd like by changing the number following 'font-size:"

/* font size box header */

.s-lib-box .s-lib-box-title {font-size:14px;}