FAQ content

mSite Builder: Create and edit a mobile site

In this article

mSite Builder (MSB) is an additional module you can add to any LibGuides or LibGuides CMS subscription. Interested in trying it out? Contact our Springy Sales Team for more info!

Don't have a particularly mobile-friendly site? MSB can help you create a mobile menu in order to quickly & easily get the most important mobile info out to your users.

MSB uses the familiar LibGuides functionality of adding pages and Assets - you can even reuse your LibGuides assets - so it won't take long to get up & running. And since Font-Awesome is built into the system, you can use those icons in your menu instead of having to buy / scour the web for freely available icons.


Create a new mobile site

  1. Go to Content > mSite Builder from the command bar.
  2. Click the + Add Mobile Site button.

creating a new mobile site, part 1

  1. On the Add Mobile Site modal complete the details for the site:
    1. Site Name: The name of your site as it will appear in the header. This is also what appears in the site list table on the main Content > mSite Builder page.
    2. Description: The description appears below the header / above the menu items. Also appears in the site list table.
    3. Full Site URL: The website users are sent to when they click the Full Site link at the bottom of a site page.
    4. Search URL: If you want a search box to appear in the upper right-hand menu options, add a search URL here. If you do not add a search URL, the search box will not appear.
  2. Click Save.

creating a new mobile site, part 2


Edit a mobile site's settings

  1. Go to Content > mSite Builder from the command bar.
  2. Find the site you want to edit and click on its Edit Mobile Site () icon in the Actions column.

the edit icon for a site

  1. Under the Setup Options tab, in the Basic Information box, you can customize the following settings:
    1. Site Name: The name of your site as it will appear in the header. This is also what appears in the site list table on the main Content > mSite Builder page.
    2. Description: The description appears below the header / above the menu items. Also appears in the site list table.
    3. Site URL: This is the URL used to access your mobile site. You can choose from the following options:
      • Default: The non-friendly URL of the site that is created automatically when you make the site.
      • Friendly URL: An easy-to-remember URL using your LibGuides domain. This must be a unique Friendly URL that is not used in any guides or groups in your LibGuides site.
      • Custom Domain: This option allows you to have a totally separate domain for your mSite separate from your LibGuides domain. You will need to ask your IT folks to set up a DNS record for this domain. (You can find out what that DNS record should be here.) Once that is set up, come back here and add the domain in this space.
    4. Full Site URL: The website users are sent to when they click the Full Site link at the bottom of a site page.
    5. Search URL: If you want a search box to appear in the upper right-hand menu options, add a search URL here. If you do not add a search URL, the search box will not appear.
  2. Click the Save button.

the basic information panel


Copy a site's redirect code

The Mobile Redirect Code allows you to automatically redirect mobile device-based traffic your website to your mSite. 

  1. Go to Content > mSite Builder from the command bar.
  2. Find the site you want to edit and click on its Edit Mobile Site () icon in the Actions column.
  3. Under the Setup Options tab, click on the External Mobile Redirect panel to expand it and view the redirect code for the site.

copying a mobile site's external redirect URL

Where does this code go?

Copy the code you find here and paste it in the HEAD section of the index/landing page of the website that you want to redirect traffic from. If you are redirecting a LibGuides site, you will put this code in the Custom JS/CSS box under Admin > Look & Feel > Custom JS/CSS tab.

Note: In order to support rerouting to your Full Site URL, mSite Builder uses a cookie. When users click the Full Site URL from your mobile site, the cookie is in effect for two minutes. This means that if that user goes to the page where your redirect code is added at any point within that two-minute window, they will continue to see the full site instead. After two minutes, they will see the mobile site again.


Edit a mobile site's header, footer, and box styles

  1. Go to Content > mSite Builder from the command bar.
  2. Find the site you want to edit and click on its Edit Mobile Site () icon in the Actions column.

the edit icon for a site

  1. Click on the Header / Footer / Boxes tab.

the header / footer / boxes tab

Site Header

  1. In the Site Header panel, use the Header Display options to choose the type of header to use.
    1. Site Name: this will display the name of your mobile site. You can optionally select the Add a Font Awesome Icon checkbox to display an icon in front of your site name (using the fa fa-<icon-name> format). Click on the Icons link to search a list of available Font Awesome icons.
    2. Image: upload or select a banner image from your Image Manager.
    3. HTML: create your own customer header using HTML code.
  2. To customize the header background, click inside the Background Color field, select a color using the picker, and click the field's Save button. You can also enter a color's HEX code, as well.
  3. When finished, click the blue Save button.
    1. Click the Preview link at the top of the page to see how your header looks.

Site Header options

Site Footer

  1. Click on the Site Footer panel to expand it.
  2. In the text box, enter the HTML code you want to use as your footer. This code will be inserted right before the closing </body> tag on each page.
  3. When finished, click the Save HTML button.
    1. Click the Preview link at the top of the page to see how your footer looks.

Site Footer options

Site Box Options

Just like on your guides, content on your mobile site's pages are organized in boxes. You customize the appearance of these boxes for each site, including the border, background, and header styles.

 Before you begin

Always keep accessibility in mind when selecting box colors. Contrast is extremely important for users with color blindness or visual impairments, so make it a priority to select font and background color combinations that pass accessibility tests.

  • Not sure how to check? Try running your colors through the free WebAIM Color Contrast Checker.
  • This tool will let you know if your colors have an accessible contrast ratio, while letting you make live adjustments until you find a combo that passes all WCAG tests.

To customize the box style for a mobile site: 

  1. Click on the Site Box Options panel to view the available options.
    1. Shape: choose whether to give your boxes squared or rounded corners.
    2. Border Width: enter a number to increase or decrease the border width of your boxes. Set this to 0 if you do not want to display any borders.
    3. Border: use the color picker or enter a HEX code to change the color of your borders, then click the Save button. (Leave this blank to use the default color.)
    4. Background: use the color picker or enter a HEX code to change background color of your boxes, then click the Save button. (Leave this blank to use the default color.)
    5. Header Background: use the color picker or enter a HEX code to change background color of your box headers, then click the Save button. (Leave this blank to use the default color.)
    6. Header Font: use the color picker or enter a HEX code to change font color of your box headers, then click the Save button. (Leave this blank to use the default color.)

the site box options panel


Add custom CSS or JavaScript code to a mobile site

Each mSite that you create includes a space to add custom Javascript (JS) and CSS code to site's Look & Feel options. This can be helpful if you want to customize the look & feel of the mSite pages, without affecting any other mSites or your LibGuides site.

 CAUTION: Please read before adding custom code!
  • Custom code added to a mSite will be included on all pages within the site.
  • LibGuides does not validate your custom code, so please double check that you've included all proper closing tags (HTML tags, brackets, quotation marks, etc.).
  • DO NOT include any <script> tags that load the jQuery JS library (e.g. some version of jquery.min.js). LibGuides already loads jQuery on every page; including it again will create a conflict, preventing jQuery-powered elements (such as the various guide option menus) from working.
  • You are limited to a maximum of 65,000 characters. Code in excess of this limit will be truncated, which can break the functionality of your pages if you save it.
    • If you have a large amount of custom code, consider adding it to a CSS file and upload it to Upload Customization Files panel below the Custom JS/CSS Code panel.
    • This will generate a <link> tag you can include in your custom JS/CSS code instead.
  • Some external JS files may include code that conflicts with LibGuides, so we cannot guarantee compatibility with third-party JS code. If a conflict occurs, we will help to remove the code in order to restore functionality to your guide, but will not be able to modify the code to prevent the conflict.

To add or edit custom CSS or JavaScript code:

  1. Go to Content > mSite Builder from the command bar.
  2. Find the site you want to edit and click on its Edit Mobile Site () icon in the Actions column.

the edit icon for a site

  1. Click on the Custom JS/CSS Code tab.
  2. In the text area of the Custom JS/CSS Code panel, enter your custom code.
    • Place all CSS code between <style></style> tags
    • Place all JS code between <script></script> tags
  3. Carefully review your code to make sure you did not leave any unclosed tags, then click Save.

adding JavaScript and css to a mobile site

Upload JS, CSS, XML, and other customization files to use with a mobile site

If you need a place to upload customization files for your mSite, such as stylesheets, JavaScript files, or fonts, you can do so right from within the mSite Builder. When you upload a file, LibGuides will automatically generate the appropriate HTML code you'll need to include it in the mSite's Custom JS/CSS code.

Some benefits of uploading your code include:

  • Faster page load times. If your site uses a lot of CSS code, these files can help your site load more quickly than if you included every line directly in your Custom JS/CSS code.
  • Better organization. Lumping all of your CSS and JavaScript code into a single block in your Custom JS/CSS can make it difficult to locate and update code in the future. By keeping your files separate, you can more easily identify what needs to be changed and where to fix it.
  • More reliable. Although you can link to CSS, JS, and font files from external web servers, you may run into issues if those third-party hosts take down or change those files. By hosting copies of files within LibGuides, you'll have control over any changes.
  • Local backups. By uploading files from your computer, you'll always be able to keep local copies. Not only does this allow you to keep backups of your code, but it also allows you to use code editors (such as Notepad++, Atom, or Microsoft Visual Studio Code, to name a few) to more easily edit and save your code.
  • Secure. Files uploaded to LibGuides can be loaded over HTTPS, preventing mixed content errors with your site.

To upload and include files in a mobile site:

  1. Under the Custom JS/CSS Code tab, click on the Upload Customization Files panel to expand it.
  2. Click the Upload New File button and select the file you want to add.
  3. Once uploaded, copy the code provided in the Include Code / URL column.
    1. If you need to remove an uploaded file, click the Delete button.

uploading JavaScript and css files to a mobile site

  1. Click on the Custom JS/CSS Code panel to expand it.
  2. Paste the include code in the JS/CSS Code text box.
    • Place the code outside of any <style></style> or <script></script> tags already in your custom code.
  3. Click the Save button.

adding link code to custom css


Add & edit pages

To add and edit content in a mobile site:

  1. Go to Content > mSite Builder from the command bar.
  2. Find the site you want to edit and click on its Edit Mobile Site () icon in the Actions column.

the edit icon for a site

  1. Click on the Content tab.
  2. Click on the Add/Reorder button and choose Add New Page.

adding a new page to a mobile site, 1

  1. On the Add Page modal, enter the following:
    1. Name
    2. Redirect URL (optional): If you want to redirect users to another page when they select this page, add the URL of that page here.
    3. Description (optional):  The description will appear at the top of the page.
    4. Icon: Choose to have no icon, a Font Awesome Icon, or an image of your own choosing via its URL.
    5. Position: A page can be a top-level page or a subpage. Sub-pages appear in a dropdown menu below the top-level page that you position it under, and disables the ability to "view" a top-level page. (More on this below.)
    6. Draft Mode: Allows you to add a new page and add content to the page without the public seeing it until you are ready.
  2. Click Save.

adding a new page to a mobile site, 2

Top-level pages vs. sub-pages

If you want to set up a set of pages in a dropdown list underneath a single menu item, you should add them as sub-pages under a single top-level page.

When you add sub-pages to a top-level page, you are disabling the top-level page (you cannot view it in edit mode or on the live side) and turning it into only a top-level menu /heading for the sub-pages that you have in place.

Editing a page and its content

Editing mobile site pages works exactly like editing guide pages: you add one or more boxes, each containing different types of content to display.

clicking on a page to edit

  1. Under the Content tab, click on the page you want to edit. While viewing the page, you can:
    1. Edit other pages by clicking the navigation toggle () button and selecting a page from the menu. 
    2. Edit the settings for the current page by clicking the Edit () icon.
    3. Delete the page by clicking the Delete () icon.
    4. Add/Reorder boxes on the page.
    5. Add/Reorder content items in a box.
    6. Edit or delete boxes that have been added to the page.
    7. Edit or delete content items from a box.
    8. Jump back to the home page of the mSite by clicking the  Back to Page List link.

Page and box edit options

Types of content items

The following are the types of content you can add to your standard and tabbed boxes:


Delete a mobile site

Caution: this will delete the mobile site and all of its pages. Deleting a site is permanent and cannot be undone so please be careful! 
  1. Go to Content > mSite Builder from the command bar.
  2. Click on the Delete Mobile Site () icon in the Actions column.

deleting a mobile site, part 1

  1. On the Delete Mobile Site modal, click the checkbox to acknowledge that you know the action cannot be undone.
  2. Click the Delete button.

deleting a mobile site, part 2