Argyle Library: Customizing Libguides

Copy and paste the following code blocks as desired either in

1. The "Guide Custom JS/CSS" tab (see section #1 on the welcome page) or

2. The "Custom JS/CSS Code" tab (see section #3 on the welcome page)

Ensure that the code blocks are contained within the opening <style> and closing </style> tags.

Removing all breadcrumbs:

/*Removes the breadcrumbs from the guide*/
#s-lib-bc {
display: none;
}

Removing only the first two breadcrumbs:

/*Removes the North Vancouver School District #44 breadcrumb*/
#s-lib-bc-customer {
display: none;
}

/*Removes the District Guide breadcrumb*/
#s-lib-bc-site {
display: none;
}

Note: Only use the following code block if all of your pages are within one single guide, otherwise users won't be able to navigate back to you homepage:

/*Removes the group homepage breadcrumb*/
#s-lib-bc-group {
display: none;
}

Removing the search bar:

/*Removes the default search box*/
#s-lg-guide-header-search {
display: none;
}

Removing automatic guide title:

/*Removes the name of the guide from view*/
#s-lg-guide-name {
display: none;
}

Adjusting spacing between the guide banner and your navigation tabs:

/*Adjusts spacing between banner and nav tabs*/
.s-lib-header {
height: 40px;
}

Note: The above code block can cause issues on mobile devices and when zooming in if you haven't removed the search bar. If you wish to keep the search bar but still want to cut down slightly on empty space at the top, use the following code block:

/*Adjusts margin on breadcrumbs*/
#s-lib-bc .breadcrumb {
margin: 5px 0 0 0;
}

Text wrapping:

1. In the rich text editor, select the image and click on the image icon in the top bar of the editor
2. Set "Align" to either "Left" or "Right"
3. Click "OK" and move your image and text around as desired

Custom fonts must be imported from the web using CSS. The following example will use Roboto Slab, Roboto Mono, and Roboto as they are the default fonts used on SD44 websites:

Instructions:

1. Use google fonts (fonts.google.com/) to search for the desired fonts and select them by clicking "Get Font", then clicking "Get Embed Code"

2. Select "Full axis" on all the font settings (if applicable) and select the import option

3. Copy the following code and navigate back to your Libguides guide

Or copy the following code instead to use the same fonts as this guide:

<style>

/*Import the Roboto Slab, Roboto, and Roboto Mono fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

</style>

4. Paste the code either in the "Guide Custom JS/CSS" tab (section #1 on the welcome tab of this page), or within the "Group Custom JS/CSS Code" (section #2)

6. Go back to google fonts and copy the code block labeled "CSS class for a variable style" for your desired font

7. Navigate back to where you pasted the first block of code and paste the "CSS class for a variable style" code within the <style> tags. The result should look like this:

<style>
/*Import the Roboto Slab, Roboto, and Roboto Mono fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

.roboto-slab-<uniquifier> {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
</style>

8. Change the ".roboto-slab-<uniquifier>" to the desired text formatting option ("h3" for header 3, "p" for paragraph, etc...) and customize the font to your liking by adjusting the values within the curly brackets.

Provided below are the custom fonts used in this updated Argyle guide, you can copy and paste these within the <style> tags and use them as you wish within your own guides:

:root {
/*Custom Color Variables Names*/
--light-bg: #cce0cc;
--dark-bg: #006400;
--grey-bg: #d8d8d8;
--light-text: #ffffff;
--dark-text: #000000;
--grey-text: #444444;
--link-text: #006400;

/*Font properties for custom box titles*/
--boxfont-family: "Roboto Slab", serif;
--boxfont-weight: 625;
--boxfont-size: 16px;
}

/*Large Header font*/
h3 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 650;
  font-size: 24px;
}

/*Medium header font (formerly p1)*/
h4 {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 625;
  font-size: 16px;
}

h5 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 550;
  font-variation-settings:
    "wdth" 90;
  font-size: 14px;
}

/*Font used for paragraphs*/
p {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-variation-settings:
    "wdth" 100;
  font-size: 12px;
}

/*Font used for code blocks*/
pre {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 10px;
}

/*Custom hyperlink color*/
a {
  color: var(--link-text);
}

9. Now your custom fonts are ready!

• To use the h3 through h6 fonts, select the corresponding "Header" number in the rich text editor drop-down while writing your guides.

• To use the font within the <pre> tags, select the option named "Formatted" from that same drop-down.

• The fonts within the <p>(paragraph) and <a>(hyperlink) tags will be used automatically for normal paragraph text and hyperlinks respectively.

Copy and paste the following code as desired either in

1. The "Guide Custom JS/CSS" tab (see section #1 on the welcome page) or

2. The "Custom JS/CSS Code" tab (see section #3 on the welcome page)

Ensure that the code block is contained within the opening <style> and closing </style> tags.

Using your custom fonts on the top navigation tabs:

/*Changes font on nav tabs*/
#s-lg-guide-tabs {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
}

Customizing color & shape:

If you have not already assigned your guide its own group, please refer to section #3 on the Welcome tab of this page for initial setup instructions

1. Navigate to your group's tabs and boxes page (Admin > Groups > *edit button beside your previously created group* > "Header / Footer / Tabs / Boxes" > "Tab & Box Options" drop-down)

2. Libguides includes a user-friendly customization UI for basic tab/box options, the following picture shows the settings used in this guide:

Note: If you are using custom boxes from the "Boxes" page in this guide, leave these boxes without any color and with their Shape as "Square"

The default libguides boxes leave much to be desired in terms of aesthetics. To bring your boxes more in line with other district websites (i.e: sd44.ca and/or individual school homepages) you can copy the following code into the HTML editor for individual boxes.

Setup Instructions:

1. To use the CSS code in the following examples, paste it into the HTML editor of the desired box. (see section #2 on the welcome tab of this guide)

2. Replace the green highlighted number in the examples below with the "Box ID" of the desired box (found on the "Box Info" page accessible by clicking the top right icon resembling a pen beside the box title)

3. To get the custom box titles to display properly, please follow the instructions in the "Fonts" tab of this guide. Specifically the following snippet from the code block in step #8:

:root {
/*Custom Color Variables Names*/
--light-bg: #cce0cc;
--dark-bg: #006400;
--grey-bg: #d8d8d8;
--light-text: #ffffff;
--dark-text: #000000;
--grey-text: #444444;
--link-text: #006400;

/*Font properties for custom box titles*/
--boxfont-family: "Roboto Slab", serif;
--boxfont-weight: 625;
--boxfont-size: 16px;
}

4. Edit the color hex codes as desired to match your specific school theme. The "light-bg" color is the one used in example #1 below, the "dark-bg" color is used in examples 2 and 3, and the "grey-bg" color is used in example #4. Edit the font properties corresponding to your desired box title font throughout your guide.

Example Templates:

#1:

<style>
#s-lg-box-16929358.s-lib-box {
box-shadow: none;
border-color: var(--light-bg);
border-width: 20px 20px 40px 20px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 12px));

.s-lib-box-title {
background-color: var(--light-bg);
font-family: var(--boxfont-family); 
font-weight: var(--boxfont-weight); 
font-size: var(--boxfont-size);
color: var(--dark-text);
text-align: left;
}
}
</style>

#2:

<style>
#s-lg-box-16929401.s-lib-box {
box-shadow: none;
border: 0px;

.s-lib-box-title {
background-color: var(--dark-bg);
padding: 15px 15px 30px 15px;
clip-path: polygon(100% 0, 100% 100%, 0 80%, 0 80%, 0 0);
font-family: var(--boxfont-family); 
font-weight: var(--boxfont-weight); 
font-size: var(--boxfont-size);
color: var(--dark-text)
text-align: left;
color: var(--light-text);
}
}
</style>

#3:

<style>
#s-lg-box-16929402.s-lib-box {
box-shadow: none;
border: 2px solid var(--dark-bg);

.s-lib-box-title {
background-color: var(--dark-bg);
padding: 15px 15px 30px 15px;
clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 80%, 0 0);
font-family: var(--boxfont-family);
font-weight: var(--boxfont-weight);
font-size: var(--boxfont-size);
color: var(--dark-text)
text-align: left;
color: var(--light-text);
}
}
</style>

#4:

<style>
#s-lg-box-16950954.s-lib-box {
box-shadow: none;
border: 0px;
background-color: var(--grey-bg);
color: var(--grey-text);

.s-lib-box-title {
font-family: var(--boxfont-family);
font-weight: var(--boxfont-weight);
font-size: var(--boxfont-size);
text-align: center;
color: var(--grey-text);
background-color: var(--grey-bg);
}
}
</style>

If you have not already assigned your guide its own group, please refer to section #3 on the Welcome tab of this page for initial setup instructions

Changing the group banner image:

1. Navigate to the "Header / Footer / Tabs / Boxes" tab, then the "Group Header" drop-down

2. Upload your header image by clicking "upload / change image" > "Select new Banner"

(OPTIONAL) Changing the banner link to your school website instead of sd44.ca:

3. Copy the following HTML into the "Display this HTML" box:

<div id="s-lib-banner" class="container s-lib-banner-public">

<a href="https://www.sd44.ca/school/argyle" title="" target="" aria-hidden="true" tabindex="-1">

<img alt="Banner" name="s-lib-banner-img" id="s-lib-banner-img" class="img-responsive" src="https://d1qywhc7l90rsa.cloudfront.net/accounts/166054/images/arg-logo1.png" aria-hidden="true" tabindex="-1">

</a>
</div>

4. Change the first link (highlighted in green) to the URL of your main school webpage

5. Change the second (purple) link to the URL of your banner image, you can find this by right clicking on the uploaded banner image above then clicking "Open image in new tab" and copying the URL from the address bar

6. Make sure "Display this HTML" is selected, then click "Save HTML"

Clickable buttons can be a useful tool for guiding a user's attention within your guide, the guide below acts as a customizable template to add to your guide.

Setup:

1. Add the following code block within the <style> tags of the "Guide Custom JS/CSS" tab or the "Group Custom JS/CSS Code" tab (see sections #1 & #3 on the welcome tab of this page)

.btn-yourschoolname {
background-color: var(--dark-bg);
color: var(--light-text);
}

.btn-yourschoolname:hover {
  background-color: var(--light-bg);
  color: var(--grey-text);
}

2. To use the button within your guide, insert the following code in the "source" tab of the rich text editor (see section #2 on the welcome tab of this page) where you'd like a button to appear.

<p>
<a class="btn btn-yourschoolname" href="https://www.google.com" role="button" target="_blank">
example button</a>
</p>

example button

• Replace the "https://www.google.com" link with wherever you want your button to take the user
• Delete the text that says target="_blank" if you don't want your link to open a new tab when clicked
• Switch out of the source tab to the normal rich text editor and format/edit the text that says "example button" to your liking