Guides: add Rich Text / HTML content & images to a guide – Help Center

The Rich Text/HTML content item is your catch all for pretty much anything. It allows you to add text, images, tables, and even code. Anything you can do in HTML, you can also do in a rich text box.

• Rich Text /HTML content items are not included in your assets library (Content > Assets), so they can only be reused by reusing the entire box it’s in.
• If you’re adding links, databases, books from the catalog, widgets, or anything else that you can use one of the standard asset types for, you should use that asset type. Because, remember, the rich text assets are not included in your assets library. This will help ensure you’re optimizing the reuse of content throughout your guides.

Add a new Rich Text/HTML content item to a guide

1. While editing your guide, click on the  Add / Reorder button at the bottom of the box where you want add this.
2. Select Rich Text/HTML from the dropdown menu.

1. In the Add Rich Text/HTML window, use the built-in text editor to add and format your text. Check out our Using the Rich Text Editor guide for a full overview of features.
   1. Want to add or edit the underlying HTML code? Click on the Source button to switch views.
   2. As you’re working, you can click the Save button at any time to save your progress.
2. If you’re adding this to a box with other content items, use the Position dropdown to choose where your new content item should go. (Don’t worry: you can always reorder these later.)
3. When finished, click the Save & Close button.

 CAUTION: Pasting content from Word or other webpages

1. Pasting from Microsoft Word or other websites: content copied from Word or other websites will almost always include a mix of extraneous HTML tags and inline CSS styles. This can conflict with the default page styles, while also making it difficult for you to style the text yourself. 
   • To avoid any issues, we recommend that you paste as plain text.
     • In Chrome, Edge, or Firefox: press Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac)
     • In Safari, press Cmd + Option + Shift + V.
   • This will strip out all of the copied formatting, leaving only the text.
   • Often times, this yields the best results, as you can then use the Rich Text Editor to apply formatting to the text yourself.
2. Pasting images: we do not recommend pasting images into Rich Text/HTML content items.
   • If the content was copied from another webpage, the image will be added using its original URL. As a result, if the original image is taken down for any reason, you’ll end up with a broken image in your guide.
   • Instead, please upload the image to your Image Manager library, then insert it using the Rich Text Editor.

How to use the rich text editor

The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, it will allow you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code.

Features of the rich text editor

Learn more about the different features of the rich text editor below.

Styles

The Styles menu allows you to apply several different built-in styles to your text, such as Computer Code or Keyboard Phrase.

1. Highlight the text you want to format, then select the style you want from the Styles dropdown. Each option in the list will appear using that style, so you can preview how it looks.

Styles are grouped into two main categories:

• Block Styles: if you select one of these, they will be applied to the entire paragraph.
• Inline Styles: these can be applied to individual words within a line of text.

 Return to features list

Paragraph formats

The Paragraph Format menu allows you to format selected paragraphs as headings, normal text, or formatted text.

1. Select the paragraph(s) you want to format, then select the format you want from the 

   Paragraph Format 

   dropdown (this will display “Normal” by default). Each option in the list will appear using that format, so you can preview how it looks.

In most cases, “Normal” is the best format for general rich text, while “Formatted” is best when you need to present multiple lines of plain text (such as a block of code, for example).

 Headings and accessibility

Although headings do have their own styles, which can help visually organize content on the page, they also play a critical role in helping users of screen readers navigate the content on your page.

When using the default page templates in LibGuides, the page heading will be set to <h1> and box headings set to <h2>. To help ensure headings used in Rich Text/HTML content follow the correct hierarchy, Admins of CMS systems have the ability to hide the Heading 1 and Heading 2 options from the Paragraph Formats menu.

As a general rule, don’t use headings just to make text appear bigger. Instead, increase the font size and/or apply other formatting. For more detailed info on using headings, check out WebAIM and the WAI Web Accessibility Tutorials.

 Return to features list

Fonts

The Font menu allows you to change the font style of your text, while the Font Size menu allows you to resize your text. Several of the most common fonts are available, including Arial, Courier New, Tahoma, and Times New Roman.

1. Select the text you want to format, then select the font style you want to apply from the Font menu. The default font style in LibGuides is Arial.

2. Use the Font Size menu to select the size of your text (this menu will display the current font size). The default font size in LibGuides is 12px.

 Return to features list

Text colors

The Rich Text Editor allows you to customize both the text color and background color of selected text. 

1. To change the color of your text, select the text you want to format. Then, click on the Text Color button and choose the color to apply.

2. To change the background color of your text (to make it look highlighted), select the text you want to format. Then, click on the Background Color button and choose the color to apply.

 Colors and accessibility

When customizing text colors, always be mindful of the contrast ratio of the foreground and background colors. If the contrast between two colors is too small, then it may be hard for some users to read. 

For help selecting accessible colors, check out the free WebAIM Color Contrast Checker. This tool allows you to check if your colors are accessible and, if they’re not, adjust the colors until you achieve an optimal contrast ratio.

 Return to features list

Bold, italic, and strikethrough formatting

1. To make text bold, select the text and click on the Bold button (it appears as the letter B).

2. To italicize text, select it and click on the Italic button (it appears as an italic letter I).

3. To strike out text, select it and click on the Strikethrough button (i.e. the letter S with a horizontal line through the middle).

 Return to features list

Remove text formatting

1. If you ever need to return text to its default formatting, click on the Remove Format button (it appears as an italic letter T followed by a subscript letter X). This is especially helpful if you pasted text into the Rich Text Editor and are having difficulty changing its styles. When you click this button, it will clear the following formats:
   • Font style
   • Font size
   • Text and background colors
   • Bold, italic, and strikethrough formats
   • Paragraph alignment and indentation

 Return to features list

Copy, cut, and paste text

1. To cut text, select it and click on the Cut () button.

2. To copy text, select it and click on the Copy () button.

3. You can also right click within your text and select the Cut or Copy option from the context menu.

What about pasting?

To protect your security, modern browsers do not allow apps such as the rich text editor to access content from your clipboard directly. Instead, please use the following keyboard commands to use your browser’s paste feature:

• To paste the contents of your clipboard with formatting, press Ctrl + V (Windows or Linux) or Cmd + V (Mac).
• To paste the contents of your clipboard as plain text (no formatting):
  • In Chrome, Edge, or Firefox: press Ctrl + Shift + V (Windows or Linux) or Cmd + Shift + V (Mac)
  • In Safari, press Cmd + Option + Shift + V.

 CAUTION: Pasting content from Word or other webpages

1. Pasting from Microsoft Word or other websites: content copied from Word or other websites will almost always include a mix of extraneous HTML tags and inline CSS styles. This can conflict with the default page styles, while also making it difficult for you to style the text yourself. 
   • To avoid any issues, we recommend that you paste as plain text.
   • This will strip out all of the copied formatting, leaving only the text.
   • Often times, this yields the best results, as you can then use the Rich Text Editor to apply formatting to the text yourself.
2. Pasting images: we do not recommend pasting images into Rich Text/HTML content items.
   • If the content was copied from another webpage, the image will be added using its original URL. As a result, if the original image is taken down for any reason, you’ll end up with a broken image in your guide.
   • Instead, please upload the image to your Image Manager library, then insert it using the Rich Text Editor.

 Return to features list

Undo and redo changes

1. To revert your most recent change, click on the Undo () button.

2. Undo one too many times? You can undo your undo by clicking the Redo () button.

 Return to features list

Paragraph alignment

1. To align text to the left margin, select the text and click on the Align Left () button. This is the default alignment.

2. To center text, select the text and click on the Center () button.

3. To align text to the right margin, select the text and click on the Align Right () button.

4. To justify text, select the text and click on the Justify () button.

 Return to features list

Numbered and bulleted lists

1. To insert a numbered list, click on the Insert/Remove Numbered List () button.
   • To convert existing text to a numbered list, select the text and then click the Insert/Remove Numbered List button.
   • To remove items from a list, select the text and then click the Insert/Remove Numbered List button.
   • To configure a list’s starting number and type, right click any of the list items and select Numbered List Properties.

2. To insert a bulleted list, click on the 

   Insert/Remove Bulleted List

    () button.

   • To convert existing text to a bulleted list, select the text and then click the 

     Insert/Remove Bulleted List

      button.

   • To remove items from a list, select the text and then click the 

     Insert/Remove Bulleted List

      button.

   • To configure a list’s bullet type, right click any of the list items and select 

     Bulleted List Properties

     .

 Return to features list

Indenting paragraphs and list items

1. To decrease the indentation of text or a list item (i.e. shift it left), select it and click on the 

   Decrease Indent

    () button.

2. To increase the indentation of text or a list item (i.e. shift it right), select it and click on the Increase Indent () button.

 Hanging indentation

When adding citations to a guide, hanging indents are necessary to follow certain style manuals. Although hanging indents are not native to HTML and CSS styles, there is a workaround.

1. Go to Admin > Look & Feel > Custom JS/CSS (note: only an Admin can do this step).
2. Add the following CSS code:

   <style>
   .hangingindent {
     padding-left: 22px ;
     text-indent: -22px ;
   }
   </style>

3. Next, edit your guide and locate the box with your citations in it.
4. Edit that rich text content item, then click on the Source button in the Rich Text Editor. This will display the underlying HTML code.
5. If each citation is in its own <p><p> (paragraph) element, add class="hangingindent" inside the first <p> tag, like so:

   ​<p class="hangingindent">

6. If there is a style attribute inside of that <p> tag (e.g. style="margin-left: 5px"), you may want to remove it to ensure this displays well.
7. Save your changes.

 Return to features list

Quotations

If you want to include a quotation in your Rich Text/HTML content item, you can apply some special formatting to help it stand out from the rest of your text.

1. Select the text you want to format, then click on the Block Quote () button. This will format the text in a <blockquote> element, which will make it appear indenting with a gray border along the left margin.

The following is an example of text in a block quote:

The block quote format applies to entire paragraphs, so you cannot use it for inline quotations.

You can apply this formatting to multiple paragraphs to format longer quotations.

 Return to features list

You can easily turn text into clickable links using the Rich Text Editor. (Please note: links added to your Rich Text are not able to be tracked in your LibGuides Assets statistics. If you want to track click stats on a link, consider adding a link asset to your page instead.)

1. To add or edit linked text, highlight the text and click on the Link button (you can also edit an existing link by right-clicking it and selecting Edit Link). There are three types of links you can create:
   • URL: enter the full URL of the webpage you want to link to. Use the options under the Target tab to if you want to customize the window target (e.g. current window or new window).
   • Link to anchor in the text: if you inserted anchors into your Rich Text/HTML content item (more about these below), you can select one to link to.
   • E-mail: enter the email address you want to link to. You can also add an optional subject line and body text for the new messages, as well.

2. To remove a link, place the cursor anywhere in the link and click the Unlink button (or right-click on the link and select Unlink). This will leave the text, but remove the hyperlink.

3. To insert an anchor, place the cursor where you want the anchor to go and click the Anchor (flag) button.
   • You will then be prompted to give your anchor a unique name, which will allow you to create a link to that anchor.
   • Once you save your anchor, a red flag icon will appear next to it when editing the Rich Text/HTML content item.
   • Why use anchors? An anchor is essentially a placeholder allowing you to create a direct link to a specific section of a page.

 Linking to anchors in other Rich Text/HTML content items

• To link to that anchor within the same Rich Text item, add a link like you normally would. Then, change the Link Type to “Link to anchor in the text” and select your anchor from the list.
• To link to that anchor from within a different Rich Text item, however, you need to do something a little different.
  1. Insert your anchor(s) where needed in your first Rich Text/HTML content item.
  2. When creating your link in the other rich text item, select “<other>” as the protocol.
  3. In the URL field, enter a # followed by the name of the anchor in your other box. For example, if you named your anchor “paragraph2”, then you’d enter #paragraph2 as the URL.
  4. Save your changes.
• To link to an anchor on a different page, enter the full URL of the page followed by a hash and the anchor’s name. For example: https://yourlibrary.libguides.com/myguide/overview#anchorname

 Return to features list

Images

1. To insert an image, place the cursor where you want the image to go and click on the Image () button.

2. In the Image Properties window, click the Browse Server button.

3. In the Image Manager window, select or upload a new image.
   1. To upload and insert a new image, click the Upload New Image. You can upload any JPG, JPEG, GIF, PNG, or ICO file up to 5MB in size.
   2. To insert an existing image, click on the Reuse this Image () icon under its thumbnail

4. Back in the Image Properties window, you can customize the image using the options under the Image Info tab.
   1. URL: this contains the URL for your image from your Image Manager library.
   2. Alternative Text: we strongly recommend adding descriptive alternative text so that your image is accessible to users of screen readers.
   3. Width and Height: customize the dimensions of your image.
      • When the padlock icon is locked, entering a width or height will automatically calculate the other dimension so your image retains its aspect ratio.
      • You can click on the padlock icon to toggle the aspect ratio on/off.
      • To restore the default dimensions, click the Reset Size icon.
   4. Border: enter a value to apply a border around your image. The larger the value, the thicker the border.
   5. HSpace and VSpace: enter a value in these fields to apply a margin around the image.
      • Use the HSpace to apply a margin to the left and right sides.
      • Use the VSpace to apply a margin to the top and bottom.
   6. Alignment: use this to align the image to the left or right of the Rich Text/HTML content item.

5. If you would like your image to link to a URL, click on the Link tab.
   1. URL: enter the URL of the page you want to link to.
   2. Target: select whether to open the link in the current window or a new window.
6. Click OK to insert the image. (Don’t forget to save your Rich Text/HTML content item!)

Editing an existing image

1. To edit an image you’ve already added to your Rich Text/HTML content item, simply right-click on it and select Image Properties from the context menu.

 Return to features list

Tables

The Rich Text Editor includes a table builder, which makes it easy to create and manage tables in your guides. Tables are best used to organize and present data and information, rather than for laying out content. Try to avoid using tables as a way to create columns inside of a box. Instead, consider using the Bootstrap grid system or a CSS grid.  

1. To insert a table, place the cursor where you want the table to go and click on the Table () button.

2. In the Table Properties window, use the options under the Table Properties tab to customize your table.
   1. Rows: enter the number of rows you want to add (you can also add more rows later).
   2. Columns: enter the number of columns you want to add (you can also add more columns later).
   3. Headers: indicate whether the first row and/or first column of the table are headers. 
   4. Caption: enter an optional caption for your table. This will display above the table in a <caption> element and can assist with making your table accessible.
      • For more info on creating accessible tables, check out WebAIM.
   5. Summary: enter an optional summary for your table (this will be included in the <table> element’s summary attribute).
   6. Class: select one of the many available CSS classes to apply to your table. Each class makes it easy to apply built-in styles to your table without any extra CSS code.
   7. Optionally, you can adjust the options under the 

      Legacy Properties

       tab to fine-tune your table’s styles. However, fore best results, we strongly recommend you use the available CSS classes instead.

3. Click the OK button to insert the table. (Don’t forget to save the changes to your Rich Text/HTML content item!)

 Editing an existing table

1. To edit an existing table, right-click on a table cell and select from the available options.
   • Cell: these options allow you to insert, delete, merge, and split cells. You can also select Cell Properties, which allows you to customize things such as the height, alignment, and background color.
   • Row: these options allow you to insert and delete rows.
   • Column: these options allow you to insert and delete columns.
   • Delete Table: this will completely delete the table and its contents.
   • Table Properties: this will allow you to adjust the initial table properties, such as the headers, caption, and class.

 Return to features list

Horizontal lines

Horizontal lines (aka horizontal rules) can help visually separate sections of text in your Rich Text/HTML content items.

1. To insert a horizontal line, position the cursor where you want it to go and click the Insert Horizontal Line button. This will insert an <hr> element into your Rich Text/HTML content.

 Return to features list

Special characters

To insert special characters into your text, such as symbols or accented letters:

1. Position your cursor where you want to place the character and click the Insert Special Character (Ω) button.

2. Select the character you want to insert from the table.

 Return to features list

Full screen mode

1. To give yourself more screen space to work on your content, click on the Maximize () button.
   • This will expand the text editor to fill the entire browser window. (This does not put your browser into full-screen mode.)
   • Click the button again to return the editor to its default size.

 Return to features list

Source code view

In addition to using the WYSIWYG (What You See Is What You Get) functionality of the Rich Text Editor, you also have the ability to view and edit the underlying HTML code. This can be helpful for power-users who want to fine tune HTML attributes, add elements, or customize styles directly.

1. To toggle between the WYSIWYG and HTML views, click on the Source button.

 Be careful when adding and editing HTML code

The Source view of the Rich Text Editor is best used for modifying the layout and styles of your text. For example, you could add things like <div> elements or class attributes. As you can imagine, this is a very powerful tool.

However, editing the HTML code isn’t without its risks. Before making any changes, please consider the following:

• Proofread your code before saving. Unclosed elements (e.g. an <iframe> without a closing </iframe> tag) or attributes could prevent your guide from loading correctly. 
• Avoid embedding widgets in Rich Text/HTML content items. We strongly recommend embedding things like YouTube videos, search boxes, or other widgets using Media/Widget assets. If something in the widget’s code causes issues with your page, this will allow you to edit or remove the widget by going to Content > Assets. You do not have this luxury with Rich Text/HTML content items, since they are not added to your assets library.
• Do not add jQuery calls. If you must embed code inside of a Rich Text/HTML content item, be on the lookout for widgets that include <script> elements loading some version of the jquery.min.js file. Because LibGuides already loads jQuery on every page, loading a duplicate version will create a conflict that causes jQuery-powered elements (like page menus and tabbed boxes) from working. Be sure to remove these from your code before saving.

If you encounter issues after saving HTML code, please contact Springy Support for help restoring your guide.

 Return to features list

Edit an existing Rich Text/HTML content item

1. Click on the Edit () icon in the lower-right corner of the Rich Text/HTML content item that you want to edit.
   1. To edit the content using the Rich Text Editor, select  Edit from the dropdown menu.
   2. To edit the content using the HTML editor, select  HTML from the dropdown menu.
      • Note: the HTML editor does not validate your code, so be careful when adding and editing code.
      • Any unclosed elements or attributes could prevent your guide from loading correctly. Contact Springy Support if you need help restoring your guide.

Delete a Rich Text/HTML content item

 Be careful when deleting Rich Text/HTML content items!

• Deleting a Rich Text/HTML content item will permanently remove it from your system and cannot be undone.
• If the Rich Text/HTML content item contained an image stored in the Image Manager, the image will not be deleted from the Image Manager.

Unlike assets, Rich Text/HTML content items are not stored in your assets library. As a result, when you remove one from a box, it will be permanently deleted from the system.

1. While editing your guide, click on the 

   Edit 

   () icon for the asset you want to remove.

2. Select  Delete from the dropdown menu.

3. After reviewing the Delete Asset dialog box, click on the checkbox next to I understand that this cannot be undone.
4. Click the Delete button to permanently remove the content item.
   • If the content item was removed from a box that is being reused on other guides (i.e. the sharing icon () appears in the box header), then it will be removed from those boxes as well.