CSU Library Website Customization
Design and File Structure
This page's design followed the Texas A&M University Libraries Libguides'. Their guide is shared with the community and so if you create a new guide and choose "Copy content / reuse existing guide" and search the community guides for "Library Guides", find one created by Elizabeth German at Texas A&M. They uses w3.css for their homepage, but CSUL doesn't use own customized css.
Steps
- Create a separate template for homepage. Admin -> Look & Feel -> Page Layout -> Guide -> copy and paste default side navigation -> Change the content area to make column 9 + column 3 layout.
- Create a regular guide based on the new template, style it, and set it as the default guide. Redirect libguides' homepage link is needed.
Customized Look
Admin Look
Custom Layout's Content Area
<!-- content section -->
<div id="s-lg-guide-tabs-title-bar" class="container s-lib-side-borders"></div>
<div id="s-lg-side-nav-content" class="container s-lib-side-borders pad-top-med">
<div class="row">
<div class="col-md-9 s-lg-tab-content">
<div id="s-lg-guide-main" class="tab-pane active">
{{content_col_1}} <!-- create that "+ add box column 1" line , then divide each box to 3 columns -->
</div>
</div>
<div class="col-md-3 s-lg-tabs-side">
{{content_col_2}} <!-- For adding special topics -->
{{content_box_18522718}} <!-- Mapped Library Help Box -->
</div>
</div>
{{page_prev_next_links}}
</div>
<!-- Move URL and Print to the bottom of content area -->
<div class="row" id="s-lg-guide-print-url"> {{guide_url_display}} | {{print_url_display}} </div>
</div>
Getting Started Section
This section includes automatically generated code. All code are generated by Tools -> Widgets.
1. Help by subject has a frame which points to the subject guides page.
2. Help by course column has a frame which points to the course guides page.
3. Find a guide includes a search box also generated by widgets.
Code:
<div class="col-sm-4">
<p class="homepage_box_header">Help by Subject</p>
<p>Subject guides can help you find sources in general subject areas, such as Agriculture, Health Sciences, or Vet Medicine.</p>
<iframe height="150" id="s-lg-widget-frame-1530039318282" scrolling="yes" src="//lgapi-us.libapps.com/widget_box.php?site_id=346&widget_type=8&output_format=2&widget_title=Subject+Guides&widget_height=250&widget_width=100%25&widget_embed_type=1&guide_id=827947&box_id=19264026&map_id=22604123&content_only=0&config_id=1530039318282" style="border: 1px solid #bbb; border-radius: 4px;" width="100%"></iframe>
<p> </p>
<p style="text-align: center;"><a href="https://libguides.colostate.edu/grouped_guides/subject">VIEW ALL SUBJECT GUIDES</a></p>
</div>
<div class="col-sm-4">
<div class="homepage_box_header">
<p class="homepage_box_header">Help by Course</p>
</div>
<p>Course guides help you with research in a specific course. Try a subject guide if you don't see your course below.<br />
</p>
<iframe height="150" id="s-lg-widget-frame-1530042818549" scrolling="yes" src="//lgapi-us.libapps.com/widget_box.php?site_id=346&widget_type=8&output_format=2&widget_title=Course+Guides&widget_height=150&widget_width=100%25&widget_embed_type=1&guide_id=827947&box_id=19264085&map_id=22604197&content_only=0&config_id=1530042818549" style="border: 1px solid #bbb; border-radius: 4px;" width="100%"></iframe>
<p> </p>
<p style="text-align: center;"><a href="https://libguides.colostate.edu/grouped_guides/course">VIEW ALL COURSE GUIDES</a></p>
</div>
<div class="col-sm-4">
<div class="homepage_box_header">
<p class="homepage_box_header">Find a Guide</p>
</div>
<p>Know exactly what you're looking for? Search all of our research help guides.</p>
<p> </p>
<script>
springshare_widget_config_1523654448777 = { };
</script>
<div id="s-lg-widget-1523654448777"> </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=346&widget_type=7&widget_embed_type=1&output_format=1&search_box_type=1&group_id=0&placeholder_text=Search+all+guides&button_text=Go&widget_height=&widget_width=180&config_id=1523654448777";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","s-lg-widget-script-1523654448777");</script>
<p> </p>
<p style="text-align: center;"><a href="https://libguides.colostate.edu/grouped_guides/owner">VIEW GUIDES BY OWNER</a></p>
<p style="text-align: center;"><a href="https://libguides.colostate.edu/grouped_guides/all">VIEW ALL GUIDES</a></p>
</div>
Script Generated by Widget
We created subject guides and course guides pages first. Then ask widget to create a content box to point to them.
- Tools -> Widgets -> Content Box
- Make selections and then copy and paste code in the Embed Code section
By default, the content box will display the main content area for course and subject guides, including text formats and box title. We want hide box title and not showing list dots.
Preview the home page, turn code inspection on and select the box to find its content box ID and the exact element to be styled. For this example, it is #s-lg-content-42742161
Go to your custom.css, add code
// #s-lg-content-42742026 is the subject guide box.
#s-lg-content-42742026 ul li {
list-style: none;
margin-left: 5px;
font-size: 12px;
font-weight:100;
}
#s-lg-content-42742026 a {
font-size: 14px;
font-weight:100;
}
// #s-lg-content-42742161 is the course guide box
#s-lg-content-42742161 ul li {
list-style: none;
margin-left: 5px;
font-size: 12px;
font-weight:100;
}
#s-lg-content-42742161 a {
font-size: 14px;
font-weight:100;
}
Hide box title
Go back to subject and course guides pages, select boxes, and check floating box option.
Newly styled boxes.
Fixing Search Box's Position Problem
By default, the search box's position is off. Have to use CSS to style it.
Default look
Solution:
Locate the widget's number. For example we want the search box occupy the entire width and put search button on the next line. Since this box is only used on this page, I choose to add the following code to this page only so it is included in Top right corner -> Picture icon -> Guide Custom JS/CSS. If you decide to use this box on other pages, you need add code between <style> </style> to your custom.css.
<style>
#s-lg-embedded-search-widget-1523654448777 #s-lg-guide-search {
display: block !important; //This ultimately fixed the problem.
margin-left: 0;
width: 100% !important;
height: 34px; // make the search box taller to match the height of search button.
}
#s-lg-embedded-search-widget-1523654448777 .btn{
margin-top: 10px; // add a little space between search box and button
}
</style>
Fixed Version
Header Look - Styled Paragraph
Each column within content section looks like a box but they are not. They are columns within a box.
The header section is actually a paragraph with padding and text transformed to upper case.
Embedded CSS
This is the style you can either embed to the homepage's page style or you can added to your custom.css for libguides.
For the guide, you just add the style to the text where you needed.
<p class="homepage_box_header">Help by Subject</p>
