NU SpringShare Playbook

System Reserved Fonts

H1 and H2 are used throughout Springshare as system headers. It can be a little confusing for people used to building webpages or documents with built-in headings that H3 is the largest heading available in RichText/HTML containers. . 

H1 is reserved for the page (guide) title. 

font size

H2 is reserved for box and tab titles. 

<h2 class="s-lib-box-title">

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

------------------------------------

Rich Text / HTML Box Fonts

As much as possible we want to stick to the standard font settings and sizes. That way when we make system-wide changes, everything automatically updates. If you routinely adjust the font size of content outside of the standard h3, h4, h5 and paragraph, then manual updates would be required. 

Heading 3 <h3>

.h3, h3 { font-size: 24px; }

 

Heading 4 <h4>

.h4, h4 { font-size: 20px;  }

 

Heading 5 <h5>

.h5, h5 { font-size: 18px; }

 

Heading 6 <h6>

.h6, h6 { font-size: 16px; }

 

Normal (Paragraph text) <p>

body {
    font-family: Arial,Helvetica,Verdana;
    font-size: 16px;
    line-height: 1.75;
    padding-left: 15px;
    padding-right: 15px;
}

 

 

BLOCK STYLES

Italic Title

Subtitle

 

INLINE STYLES

Marker

Big

Small

NU Updated Palette 2020

For easy copy/paste into Source code

Maroon = #32071a

Red = #7a052a

Gold = #ffa400

Forest Green = #00552a

Winter Green = #6FAC88

Amethyst = #5d2152

Berry = #ad71a7

Navy = #1b4264

Frost Blue = #7c9fc3

Gray = #404040

Light Gray = #eeeeee

System Wide Breadcrumb

Globally the root of the breakdcrumb redirects to the NU Library homepage. The second level is the LibGuides listing which is only utilized by the Library at this time. 

Resource Center Breadcrumb

To avoid confusion for students and faculty directly accessing a resource center, we can hide the first two levels of breadcrumbs (NU Library, LibGuides). This would make the root level link be the resource center rather than the NU Library. 

How To Hide Initial Two Links

1. Navigate to Group > Custom JS/CSS Code
2. Paste the below code into the Group JS/CSS Code window.

<style>
#s-lib-bc-customer {
  display: none;
}
#s-lib-bc-site {
  display: none;
}
</style>

Other Breadcrumb Modifications 

For more information on all the breadcrumb assignments on guide pages, group pages, and more. https://ask.springshare.com/libguides/faq/1838

Site Level Banner

The default site banner is set to the NU Library and all native banners route to the main Library homepage. 

 

Resource Center Banners

As new groups and resource centers join the LibGuides ecosystem, they will need to establish a custom banner.

Group Level Banner

Set a custom banner at the Group level to apply to all guides assigned to that Group. 

1. Navigate to Group > Header/Footer/Tabs/Boxes.
2. Select Display this HTML
3. Paste the below code into the window, replacing URL_OF_RESOURCE_CENTER, RESOURCE_CENTER_NAME, and RESOURCE_CENTER_BANNER.PNG with the appropriate link and image.

<div class="container" style="padding-left: 0px; padding-right: 0px; ">
<a href="URL_OF_RESOURCE_CENTER" title="RESOURCE_CENTER_NAME" target="" aria-hidden="true" tabindex="-1">
<img alt="Banner Image" name="s-lib-banner-img" id="s-lib-banner-img" class="img-responsive" src="RESOURCE_CENTER_BANNER.PNG" aria-hidden="true" tabindex="-1"></a>
</div>

 

Guide Level Banner

Set a custom banner at the Guide level to apply to a single guide.

1. Navigate to the LibGuide > Guide Layout > Guide Custom JS/CSS
2. Paste the below code into the window, replacing URL_OF_RESOURCE_CENTER, RESOURCE_CENTER_NAME, and RESOURCE_CENTER_BANNER.PNG with the appropriate link and image. 

<div class="container" style="padding-left: 0px; padding-right: 0px; ">
<a href="URL_OF_RESOURCE_CENTER" title="RESOURCE_CENTER_NAME" target="" aria-hidden="true" tabindex="-1">
<img alt="Banner Image" name="s-lib-banner-img" id="s-lib-banner-img" class="img-responsive" src="RESOURCE_CENTER_BANNER.PNG" aria-hidden="true" tabindex="-1"></a>
</div>