The use of custom CSS code takes some advanced skill. RILINK staff makes the following recommendations:
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:
CSS code to remove image designation circles from a Gallery box:
CSS code to remove distortion at left and right ends of Gallery box images:
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:
The following code will hide the document asset icons for all document assets associated with the Group or Guide:
The following code will hide document asset icons for individual documents at the Guide level (requires further code editing as indicated below):
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):
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:
*If you prefer to hide the LibGuides search box across all of your Guides, please contact Zach, Sharon, or Dorothy, who will add the custom JS/CSS code to your Group settings.