Skip to Main Content

Cheat Codes for Advanced Layout in LibGuides: Widgets

About Widgets

LibGuides allows users to create widgets which is a great way to maintain changing content. For layout purposes, widgets help you separate your content from your design - and allow users to update content without touching a complicated page design.

To Reuse a Content Box

  1. Click Tools in the LibGuides navigation bar.
  2. Choose Widgets.
  3. Click the Content Box tab.
  4. Use the box selection section to choose the guide and the box you want to use.
  5. Choose the Output Format: Simple and Embed Type: Javascript Code
  6. Since you'll be reusing the box within LibGuides, make sure the Include jQuery Library checkbox (under the embed code) is NOT checked.
  7. Copy the embed code after the line that says <!-- !box_widget_includes_js.twig -->. (If you include the code above that, it WILL BREAK YOUR BOX - ie. you won't ever be able to edit it again.)
  8. Paste that bit of code into to HTML view of your design where you want that content to appear.

 

Sample Embed Code

The following is an example of a LibGuides-generated embed code. Delete everything above the box_widget_includes.js.twig (highlighted in example).

<!-- box_widget_includes_js.twig -->
<script type="text/javascript" src="//lgapi-us.libapps.com/web/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//lgapi-us.libapps.com/web/js2.14.1/springshare.public.min.js"></script>
<script type="text/javascript" src="//lgapi-us.libapps.com/web/js2.14.1/springshare.common.min.js"></script>
<script type="text/javascript" src="//lgapi-us.libapps.com/web/js2.14.1/common/springspace_sui_helptip.js"></script>
<link rel="stylesheet" href="//lgapi-us.libapps.com/web/jquery/css/jquery-ui.min.css?2695"/>
<link rel="stylesheet" href="//lgapi-us.libapps.com/web/bootstrap/3.4.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//lgapi-us.libapps.com/web/css2.14.1/springshare.public.min.css"/>
<link rel="stylesheet" href="//lgapi-us.libapps.com/web/css2.14.1/springshare.common.min.css"/>
<link href="//lgapi-us.libapps.com/web/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//lgapi-us.libapps.com/web/css2.14.1/common/springspace_sui_helptip.css" rel="stylesheet">

<script>
var springStats = springStats || {};
springStats.saConfig = springStats.saConfig || {
    site_id: 775,
    tracking_parameters: {"_st_site_id":775},
    tracking_server_host: "libguides-proc.springyaws.com"
};
</script>
<script async  src="//lgapi-us.libapps.com/web/js/sa.min.js?3116" ></script>

<script>
    springSpace.Common = springSpace.Common || {};
    springSpace.Common.constant = {PROCESSING: {ACTION_DISPLAY_POLL: 159 }};
    springSpace.Common.baseURL = "//lgapi-us.libapps.com'/";
    springSpace.Common.apiLoad = true;
</script>
<!-- !box_widget_includes_js.twig -->

<script>springshare_widget_config_1644945492271 = { path: 'boxes/27069569' };</script><div id="s-lg-widget-1644945492271"></div><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://lgapi-us.libapps.com/widgets.php?site_id=775&widget_type=8&output_format=1&widget_title=records&widget_height=250&widget_width=100%25&widget_embed_type=1&guide_id=1152588&box_id=27069569&map_id=31817839&content_only=0&include_jquery=0&config_id=1644945492271";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","s-lg-widget-script-1644945492271");</script>

Removing Box Padding, Border, and Background

If you use widget code to pull in content you may want to remove the default box settings (border, background color, and padding). To do this:

  1. Set the original box to floating box.
  2. Using the example below, replace the number with your box number.
  3. Add the code to the page CSS.

<style>

#s-lg-box-28230574 { background-color:transparent; }
#s-lg-box-28230574-container .s-lib-floating-box-content { padding:0; border:none; }

</style>

Top Bottom