LibGuides: * OCC LibGuide Help: How Do I? (Advanced)

Hide Content from the Mobile Display

Hiding LibGuides items, such as images or content boxes, from the mobile view requires the addition of the Bootstrap class element class="hidden-xs" within the item’s <div> tag.

Hiding images/text on LibGuides pages:

While logged into LibGuides, click the “edit” button on lower right corner of the box containing the image/text you want to hide from the mobile view.
Click on “Source” on the toolbar to switch to the HTML view.
Find the <div> tags containing the item you want to hide. If the item is not already within a <div> tag you can add one. Add <div> before the item, and </div> after.
Add the appropriate Bootstrap class element to the opening tag (after “div” and before the closing bracket “>”), formatted like this: <div class="hidden-xs”> This will hide the item from extra small devices (phones < 768px).
Click “Save and Close.”

Hiding content on LibGuides templates:

While logged into LibGuides, click on Admin > Look and Feel from the top menu, and then click on the Page Layout tab and navigate to the template you’d like to edit.
Find the <div> tags containing the item you want to hide.
Add the appropriate Bootstrap class element to the opening tag (after “div” and before the closing bracket “>”), formatted like this: <div class=”hidden-xs”> This will hide the item from extra small devices (phones < 768px).
Scroll down to the bottom of the page and choose a Save option.

In this example, the template will now hide this content box — a book gallery on the New Books guide— from mobile devices.

</div>

** See the Responsive Utilities section of this Bootstrap overview to see more visibility options for different screen sizes. **

Add Font Awesome Icons to a Page

LibGuides allows for the use of hundreds of free icons from Font Awesome. They can be customized (size and color and placement) and used throughout our guides.

Here’s a link to an overview on the Springshare site: https://buzz.springshare.com/videohighlights/techtip/fontawesome

Font Awesome Icon List:
Icon list: https://fontawesome.com/v4/icons/

How to add an icon:

Switch to the <source> view in your LibGuide text.
Paste the basic Font Awesome HTML code (see below) into your text after the <p> to position it before the text. If text is multiple lines/paragraphs, paste it after the <br /> where you want it to appear.
Use the Icon list link above to find the icon you want to use, and copy the icon-name into this line of code.
Insert any additional attributes, like size or color into the code.

Basic HTML structure for Font Awesome icons:

** FYI: aria-hidden="true" at the beginning of the code hides the icon from screen readers for accessibility purposes.**

Example 1:

Font Awesome’s “university” icon, 12 px, using OCC’s official green color.

HTML: <i aria-hidden="true" class="fa fa-university" style="font-size:12px; color: #046A38;"></i>

NOTE: Font Awesome also includes options for embedding icons in text (see example 2 below), creating “pull-quote” style icons, and animating icons.

Code for these options can be found here: https://fontawesome.com/v4/examples/

Example 2:

Font Awesome’s “ID Card” icon, 3X its original size, embedded into the top left corner of text, using OCC’s official green color.

HTML: <i aria-hidden="true" class="fa fa-id-card-o fa-3x fa-pull-left" style="color: #046A38;"></i>

View Statistics for Your Guide

Login to LibGuides and select Statistics from the menu at the top of the screen.
Select the "Guides" tab and use the drop-down menu to select an individual guide.
Select between daily or monthly views and set the date range.
The initial report is total views for the guide.
For more detail, click the guide name in the results at the bottom to see breakdowns by Page Views (tabs) or Assets (links, documents, databases, etc.). Use the buttons near the top of the guide report results to switch between Page Views and Assets.