Skip to Main Content

style options

Custom CSS (Use Carefully!)

The use of custom CSS code takes some advanced skill. RILINK staff makes the following recommendations:

  • Make copies of pages and practice tweaking custom code on the copies before working with live pages
  • Proceed cautiously before making changes to custom code
  • RILINK staff can help with minor code changes as expertise allows but does not take responsibility for errors or other unintended consequences
  • A basic CSS tutorial is available here 
  • Springshare Help provides basic guidance here.

Unless otherwise noted in the instructions for each type of change, add custom JS/CSS code by clicking on the Guide Layout (landscape) button at the top right, then select Guide Custom JS/CSS:

Add the JS/CSS code to the code box:

Document asset icons indicate document types (PDF, Word document, Excel document, PowerPoint file, etc.) and are automatically added to embedded document links. Here are some examples:

 

 

Document asset icons can be hidden in two ways:

  • At the Group level (this will hide all document asset icons throughout your site; requires Admin access by Sharon, Karen, or Jackie): Copy and paste the appropriate JS/CSS code from one of the options below to Admin > Look & Feel > Custom JS/CSS
  • At the individual Guide level (this will hide one or more document asset icons throughout the selected Guide; does not require Admin access): Copy and paste the appropriate JS/CSS code from one of the options below to the Guide Layout (click the icon next to the gear icon on the upper right) > Guide Custom JS/CSS > Copy and paste appropriate code > Save

The following code will hide the document asset icons for all document assets associated with the Group or Guide.

<style>
.s-lg-file-icon {
    display: none;
}
</style>

 

The following code will hide document asset icons for individual documents at the Guide level (requires further code editing as indicated below).

 

<style>
#s-lg-content-123456 .s-lg-file-icon {
    display: none;
}
</style>

 

Replace 123456 with the ID of that particular asset (which you can find by editing the asset).

With special thanks to Tim Bowersox of Springshare for the above code and tips!

Please note: This type of custom code change is not made in the Guide Layout JS/CSS code area.

To center an image already added* to a Rich Text area, follow these steps:

1. Click the Rich Text area's Edit icon and select the Edit option

2. Click on the Source button to view the HTML code

3. Your image will appear in an <img> tag that will look similar to this <img> code below (take care to find the right <img> tag if your content area contains multiple images):

<p><img alt="" src="//s3.amazonaws.com/libapps/accounts/465/images/bookbuddha.jpg" style="border
width: 15px; border-style: solid; margin: 15px 10px; float: left; width: 250px; height: 333px;" /></p>

4. Find the last semi-colon after the image's height attribute (in the sample code above, the last semi-colon has been bolded in red; in your code, it will be the same size and color as all other code text)

5. Replace the last semi-colon with the entire code below (copy and paste it), from the semi-colon on the left to the semi-colon on the right (be careful not to delete the closing quotation mark at the end of the existing code).

;display: block; margin-left: auto; margin-right:auto;

 

6. Save your changes and enjoy your centered image.

With special thanks to Springshare's Tim Bowersox for code and tips!

*If the alignment is set on Center before adding the image, the image will be centered.

By default, a search box appears on every LibGuides page to enable users to search for LibGuides content on your site.

 

 

Search boxes can be hidden at the individual Guide level* (and will affect all pages in that Guide). The result looks like this. 

 

 

Custom JS/CSS code:

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

 

*If you prefer to hide the LibGuides search box across all of your Guides, please contact Sharon, Karen, or Jackie who will add the custom JS/CSS code to your Group settings.