Skip to Main Content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Admin

Code

Code to create a list of links into columns in boxes.

<style>
#s-lg-box-22686158 ul {                   Put the box id of the box that you want to put  into columns.
  -moz-column-count: 2;
  -webkit-column-count: 2;                Enter the number of columns you desire. The number of columns greatly depends on your box size.
  column-count: 2;
list-style-type:none;                         This line of code lets you decide what type of bullet you want. None means you don't want a bullet.
}

</style>

*****This page is from W3 School on the different choices for bullets.  https://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=katakana-iroha

 

Changes the color of links inside boxes & underline them 

.s-lib-box-content a {color: #378276; text-decoration: underline; }

 

Changes the box title font-size & underline 

.s-lib-box .s-lib-box-title {font-size: 20px; border-bottom: 1px solid #333;}

.s-lib-box .s-lib-box-title {font-size: 20px; background-color: transparent; border-bottom: 1px solid #333;}

 

Tabbed box colors

  • borders around all tabs

         .s-lib-jqtabs .nav-tabs>li>a {border: 1px solid #a2c649;}

  • background color of active tab

         .s-lib-jqtabs .nav-tabs>li.active>a {background-color: #a2c649;}

  • border around tab content area + tab content background color

         .s-lib-jqtabs div.tab-content {border:1px solid #a2c649; background-color: #dff5a6;}

  • removes double border beneath tabs

         .s-lib-jqtabs .nav-tabs {border-bottom: none;}

 

Changes the background color of one box 

#s-lg-box-collapse-155 {background-color: #ccc;}

 

Code for resizing videos
CSS:

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100

 

Reduces the container width to 90% to widen the width of the footer and header */

.container {width: 90%;}

.container.footer {width:100%;}

#s-lib-banner {width:100%;}

 

Changes the font system-wide 

body {font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-size: 16px;}Change margin colors 

 

Change margin colors 

body {background-color: #cccccc;}

.s-lib-side-borders {background-color: #ffffff; padding-left: 10px; padding-right: 10px;}

body {background-image: url(//libapps.s3.amazonaws.com/accounts/62172/images/brady-bellini-114681.jpg)}

CSS for Divider Bars

<style>
a: link{
 color:#003A5C;}
hr {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: #003A5C;
    border-width: 6px 0 0 0;
    border-radius: 20px;
}
hr:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color:#003A5C;
    border-width: 0 0 6px 0;
    border-radius: 20px;
}
</style>

 

Code for resizing vidoes
CSS:

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;

@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  

 

 

/* Flaired edges, by Tomas Theunissen */

hr {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
    
      
    /* Single-direction drop shadow */

hr.style-four {
    height: 12px;
    border: 0;
    border-color:red;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);

 

Work Cited  for indenting second line of a citation

.workscited {

 padding-left: 30px ;

 text-indent: -30px;

 line-height: 3em;}

}

Hide the Subject Guides box from the sidebar of the Databases A-Z Subject and Databases pages

#s-lg-az-guides-div, #s-lg-sb-guides-div {display:none !important;}

 #s-lg-sel-az-vendors{
 display:none;}

 

As part of a custom look for your LibGuides website, you may want to hide the breadcrumbs.


<style>

 /*Below removes the breadcrumbs from the guide*/

#s-lib-bc {
display: none;
}

</style>

 

Part of a custom look for your LibGuides website, you may want to hide the title of the guide.

<style>

 /*Below removes the name of the guide from view*/

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

</style>

As part of a custom look for your LibGuides website, you may want to hide the tabs from being viewed, especially if your new LibGuides website only has one tab.

<style>

 /*Below removes the tabs from view*/

#s-lg-tabs-container {
display: none;
}

</style>

 

In order to make the font sizes on your website match, you may want to increase the font size on LibGuides' built in link text.


<style>

/*increase link font size*/
.s-lg-link-list {font-size: 14px}

 

</style>