FAQ content

Guides: Add, reuse, or edit boxes on a page

In this article

When building a guide, content is organized into pages. Each page can contain one or more boxes, which are what contain the different content items (i.e. rich text or assets, such as links, books, databases, etc.) that visitors will see.

On a page, boxes are laid out in columns. Depending on the type of guide layout you are using (tabbed or side-navigation), you may have just one column of boxes or up to four. When adding a box to a column, you can choose its position (top, bottom, or between other boxes). However, you can reorder and move boxes on the page at any time.


Types of boxes

There are a few types of boxes that you can add. A standard box is likely the most common box type you'll use, as it allows you to add assets and Rich Text/HTML content to your pages. A standard box is flat, in the sense that the content you add displays directly on the page.

standard box example

Other types include:

  • Tabbed boxes: allows you to have a single box with content organized under one or more tabs
  • Gallery boxes: allows you to create a box with scrolling slides that can contain images, book assets, databases, or other content
  • Profile boxes: displays the LibApps profile info of a specific user

Add an empty standard box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the  Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on  Add Box - Column 2.

Clicking the Add Box link

  1. In the Add New Box window, enter the title for your box in the Box Name field.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
Please note: Only limited HTML tags are allowed in a box's title. These include: <strong>, <b>, <em>, and <i>. For best results, however, we recommend using CSS code to style box titles.
  1. Select Standard from the Type dropdown.
  2. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  3. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    • While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box () icon appear in the heading.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  4. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  5. Click the Save button.

Adding a new standard box


Copy or reuse a box

When adding boxes to your guide, you don't always have to start from scratch with an empty box. You can instead reuse existing box -- either from the same guide, or from a different guide. There are two ways to reuse a box:

  • Mapping a box: this adds a box to your guide that is linked to the original box that you would like to reuse. As the original box is updated, the changes will be reflected automatically in the mapped version so it's always got the latest and greatest content. The trade-off, though, is that you are not able to edit any content in the mapped version of the box.
  • Copying a box: this will create a standalone copy of the original box you would like to reuse. Because it's not linked to the original box, you have the ability to edit the copied box as much as you need. The trade-off, though, is that any changes to the original box will not be reflected in the copies made of that box.
 Important notes about reusing boxes
  • Admin and Regular-level users with the Edit All Guides permission can reuse boxes from any guide, including those in Internal groups.
  • When reusing existing boxes, you may notice that you cannot select Profile boxes to map or copy. That's because, unlike other box types, Profile boxes are inherently mapped. When you add a user's profile box to a page, it will remain updated any time the user updates their profile box's content. As a result, there's no need to map or copy a profile box -- simply add a new profile box to a page and it'll stay up-to-date automatically.
  • Regular-level users can reuse boxes from any guides that they own or those where they have been added as an editor.
  • Boxes from a guide that has its sharing status set to No can only be reused its owner, editors, Admins, and Regular-level users with the Edit All Guides permission.
  • Boxes from guides that have a guide status of Published or Private and are not assigned to a group or are in a Public group can be reused by any Regular-level users.
    • Note: this also applies to Published or Private guides in base LibGuides systems.
  • Boxes from guides that have a guide status of Published or Private and are assigned to a Restricted or Internal group can be reused by Regular-level users that have regular access to that group
    • Regular-level users with Read-Only access for an Internal group cannot reuse boxes from guides assigned to that group.
  • Boxes from guides that are set to the Template guide type can be reused by anyone regardless of account level, guide status, or group access.
    • Pro tip: set guides that will be used as blueprints or as a storage / reusable content guide to use the Template guide type. 

To add a copied or mapped box:

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the  Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on  Add Box - Column 2.

Clicking the Add Box link

  1. Click on the Reuse Existing Box tab.

Reusing an existing box

  1. Select the Guide containing the box you want to reuse.
  2. From the Box dropdown, select the box you want to reuse.
  3. In the Box Name field, enter a title for your box.
    • If you are adding a mapped box to your guide, the name of the original box you're reusing will be displayed.
    • Or, enter a new box name to display instead of the original box's title.
    • Please note: Only limited HTML tags are allowed in a box's title. These include: <strong>, <b>, <em>, and <i> (as used in Font Awesome icons). For best results, however, we recommend using CSS code to style box titles.
  4. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  5. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  6. If you would like to create a copy of this box, rather than mapping it, select the Copy checkbox.
    • This will create a standalone copy of the box and add it to your guide.
    • If the copied box contains original assets, they will also be copied and you will be assigned as the owner of those new assets.
    • If the copied box contains mapped assets, though, those assets will remain mapped in the new box.
  7. Click the Save button.
 Don't see the Copy checkbox? Depending upon your screen size, you may have to scroll down to see it. If you use a Mac, remember that scrollbars do not display by default. But don't worry: you can still scroll. :)

Reorder or move boxes

If you need to change the order of boxes in a column, or move boxes between columns or pages: 

  1. Edit your guide and click on the page you want to customize in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click on the  Page menu, which is located next to the Page URL above your guide's content columns.
  3. Under the Reorder/Move section of the dropdown, click on Boxes.

Selecting the option to reorder boxes from the Page menu

  1. Drag and drop the boxes into the order in which you want them to appear in your navigation menu.
    • Drag and drop each box into the preferred order.
    • You can move a box up and down in the same column, or move it to a different column.
    • To move a box to a new page, drag it to the desired page in the Pages column.
  2. Click on the Save button.

Example of reordering and moving boxes


Floating box mode

When Floating Box mode is enabled for a box, it will display without a header or border on the public view of your guide. This gives the content of your box the effect of floating directly on top of the guide, rather than contained within a box.

While editing your guide, the box will still display with borders and a heading (so that the Edit Box option will still be visible). The only difference is that you'll see the Floating Box () icon appear in the heading. However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.

Comparison of a normal box to a floating box

To enable or disable floating box mode:

  1. While editing your guide, click on the page you want to customize in your guide's navigation menu (i.e. tabs or side-navigation).
  2. In the box's heading, click on the Edit Box () icon.

Editing a box

  1. In the Edit Box window, select or deselect the Floating Box checkbox accordingly.
    • When the checkbox is selected, this means Floating Box mode is enabled and the box will not display borders or a heading on the public view of the guide.
    • When the checkbox is not selected, this means your box will display with borders and a header. 
    • If a box is currently floating, a life preserver () icon will display in the box's heading.
  2. Click the Save button.

Clicking the Floating Box checkbox


Draft mode (show/hide box)

Draft Mode allows you to change the visibility of a box. For example, if you are adding a new box to a published page, you could place it in Draft Mode while you're adding content to it. While in Draft Mode, the box will not appear to the public (this includes when you preview your guide, as well). Once the changes are ready to go, you can then take the box out of Draft Mode to make it visible to the public.

  1. While editing your guide, click on the page you want to customize in your guide's navigation menu (i.e. tabs or side-navigation).
  2. In the box's heading, click on the Edit Box () icon.

Editing a box

  1. In the Edit Box window, select or deselect the Draft Mode checkbox accordingly.
    • When the checkbox is selected, this means Draft Mode is enabled and the box is not visible to the public. It will also not be visible when previewing your guide.
    • When the checkbox is not selected, this means your box is currently visible to the public. 
    • If a box is currently hidden, a slashed eye () icon will display in the box's heading.
  2. Click the Save button.

Clicking the Draft Mode checkbox

 Unable to take your box out of Draft Mode? If the Draft Mode option is disabled, this means your system has the Publishing Workflow enabled. Only users who have been designated as reviewers can change the visibility of hidden boxes on Published guides.

How to find a box's ID number

If you know where the box is located

  1. Edit the guide containing the box.
  2. Click on the page where the box is located.
  3. Find the box and click on the pencil () icon in its header. This will launch the Edit Box window.

The pencil icon in a box's header

  1. You'll find the Box ID number right at the top of the Box Info tab.

The Edit Box window, showing a Box ID number

If you do not know where the box is located

If you need to find a box's ID number, but can't remember where the box is located, an admin user can help you find it by using the Search & Replace tool.

  1. Go to Tools > Search & Replace.
  2. From the Search Type dropdown, select "Content Box".
    • When the Box Name checkbox appears, make sure it remains selected.
  3. In the Search For field, enter the name of the box, or even just a keyword or two. (Leave the Replace With field empty -- it's not used here.)
  4. For the Match Type option, select "Contains".
    • Only select "Exact "if the text you entered in the Search For field is the exact name of the box you are looking for.
    • When using exact matching, remember that all characters must match exactly as entered in the Search For field, including punctuation.
  5. For the Case Type option, select "Insensitive".
    • Only select "Sensitive" if the text you entered in the Search For field is in the exact same case as the actual name of the box you are looking for.
    • When using case sensitivity, remember that the name of the box and the text in the Search For field must have the same upper and lowercase letters.
  6. Click the Search button. The results will display on the page.
    1. In the ID column, you will find the ID of each matching box. Click on the ID to view the box itself. This will take you directly to the page containing the box.
    2. To the right of the ID, you'll find the Name of the box.

The Search & Replace tool configured to locate a box by its name


View a box's direct link & embed code

To make it easier to share a box, you can either copy its direct link or embed the entire box on another webpage.

  1. While editing your guide, click on the page you want to customize in your guide's navigation menu (i.e. tabs or side-navigation).
  2. In the box's heading, click on the Edit Box () icon.

Editing a box

  1. In the Edit Box window, click on the Box Link & Widget Code tab.
    1. The Box Link contains a link to the current page, with an anchor to the box. This allows you to create a link directly to the box.
    2. The Box Widget Code provides you with the HTML code needed to embed the widget on an external webpage, in one of three formats:
      • Simple Javascript: this will display the box directly on the page. This contains the same JavaScript files used by LibGuides, so please do not embed this type of widget in another LibGuide page.
      • Simple URL provides a URL you can use to view the box's widget.
      • Framed provides the code for displaying the box inside of an iframe.
    3. The CSS Class shows the class name applied to this box, which you can use to target the box with custom CSS code.
    4. The jQuery Selector provides the syntax you would need to select this box in a jQuery script.
  2. You can close the Edit Box window when finished.

Viewing a box's link and widget code


Delete a box

 Be careful when deleting boxes!

Deleting a box will permanently remove the box from your system and cannot be undone.

  • When deleting a box, all Link, Media/Widget, Book, Document/File, RSS Feed, Poll, LibAnswers Widget, and LibWizard Item assets will remain in your assets library, so can still be used.
  • However, all rich text/HTML content items will be deleted.
  • If the box is being reused (i.e. mapped) on other guides, deleting the box will also remove it from those guides.

​​If the box is being reused elsewhere, or if you are just hoping to hide the box from the public without completely deleting it, consider placing the box in Draft Mode, instead.

  1. While editing your guide, click on the page you want to customize in your guide's navigation menu (i.e. tabs or side-navigation).
  2. In the box's heading, click on the Delete Box () icon.

Clicking the Delete Box icon

  1. In the Delete Box window, review the list of content that will be deleted. This will indicate if the box is being reused and where.
    • If this is a mapped box from another guide (i.e. the recycling icon () appears in the box header), this will simply remove the mapped version from your guide. It will not affect the original box or other mapped versions of it.
    • If this box is being reused on other guides (i.e. the sharing icon () appears in the box header), then deleting the box will also remove it from those guides.
  2. To proceed, click on the checkbox next to I understand this cannot be undone.
  3. Click the Delete button.

Deleting a box 


Advanced: Customize box styles with custom CSS code

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS map for a standard box

Diagram of a Standard box


Pointer - section 1

The entire box:

.s-lib-box: use this class to target all boxes in your guides.

Tip: Remember, if you want to change the border color or width, you can do this in your look & feel settings!

Default CSS:

.s-lib-box {
  border-color: #cccccc;
  border-width: 1px;
  box-shadow: 0 8px 6px -6px #AAAAAA;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}

Pointer - section 2

The box header and title:

.s-lib-box .s-lib-box-title: use these classes to target your box headings.

Tip #1: Remember, if you want to change the header background color or the font color, you can do this in your look & feel settings!

Tip #2: If you decide to hide your box titles, we suggest that you check the "Do not include this code on guide edit page" check box on your Custom JS / CSS page.

Default CSS:

.s-lib-box .s-lib-box-title {
  background-color: #f1f1f1;
  background-image: none;
  color: #888;
  border-bottom: 1px solid #cccccc;
  border-radius: 3px 3px 0px 0px;
}

Pointer - section 3

The box content:

.s-lib-box-content: this class applies to the content of every box type; you likely won't use this class very often.

How you'll style the box content depends on the type of box you're using:

Default CSS:

.s-lib-box-content {
  padding: 10px;
}

Want to style just one specific box?

Click on the box's edit () icon and copy the box ID value. Then, use that number to create the HTML ID. For example, if your box ID is 123, use #s-lg-box-123 as the selector in your CSS rule.

If you want to target a specific part of that box (like the box header) just combine the header's CSS selector after the box's selector, like so:

#s-lg-box-123.s-lib-box .s-lib-box-title {
  background-color: #ff0099;
}