Editing templates on libguides, libcal, and 3D libraries
- Kyle Davis (Unlicensed)
There are currently 3 other sites with templates that match OU libraries site to some degree. This will break down how to edit the templates when/if needed.
LibGuides
https://ou.libapps.com/libguides/settings/lookfeel
Using the link above as an admin, you will be able to edit the template for LibGuides.
Header & Footer tab
Header
<!-- OU Global Header -->
<div class="global_header">
<div class="global_header-wrapper">
<ul class="pull-right">
<li><a alt="OU Home link" class="tip home" href="http://www.ou.edu/web.html" tabindex="-1" target="_blank"><!-- <span>OU Homepage</span>--></a></li>
<li><a alt="OU Search link" class="tip search" href="http://www.ou.edu/content/ousearch.html" tabindex="-1" target="_blank"><!-- <span>Search OU</span>--></a></li>
<li><a alt="OU Social Media link" class="tip social" href="http://www.ou.edu/web/socialmediadirectory.html" tabindex="-1" target="_blank"><!-- <span>OU Social Media</span>--></a></li>
<li class="wordmark">The University of Oklahoma</li>
</ul>
</div>
</div>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="https://libraries.ou.edu/">
<img id="header-logo" src="https://libapps.s3.amazonaws.com/accounts/19179/images/LibrariesLinear201RGB_copy.png" class="img-responsive" alt="OU Libraries">
</a>
</div>
</div>
</div>
</div>Footer
<div class="site-footer">
<div class="row footer_div">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="row text-center">
<img src="https://ul-web-services.s3.amazonaws.com/libraries/LibrariesLinearWhite_footer_0.png" alt="OU Libraries Logo">
</div>
<div class="row text-center">
<ul class="footer_social_icons list-unstyled list-inline social">
<li><a class="btn social-icon button" href="https://www.facebook.com/oulibraries" target="_blank"><i aria-hidden="true" class="fa fa-facebook social_icon_white"> </i><span class="visually-hidden">OU Libraries Facebook</span></a></li>
<li><a class="btn social-icon button" href="https://twitter.com/OU_Libraries" target="_blank"><i aria-hidden="true" class="fa fa-twitter social_icon_white"> </i><span class="visually-hidden">OU Libraries Twitter</span></a></li>
<li><a class="btn social-icon button" href="https://www.youtube.com/channel/UCvRR9Wy7ECUS0DQbOp2dnbg" target="_blank"><i aria-hidden="true" class="fa fa-youtube social_icon_white"> </i><span class="visually-hidden">OU Libraries Youtube</span></a></li>
<li><a class="btn social-icon button" href="https://www.instagram.com/oulibraries/" target="_blank"><i aria-hidden="true" class="fa fa-instagram social_icon_white"> </i><span class="visually-hidden">OU Libraries Instagram</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="row text-center footer_header_row">
<h2>Contact Us</h2>
<p class="whitefont_links">University Libraries<br>
401 W. Brooks St<br>
Norman, OK 73019<br>
(405) 325-3341</p>
<br>
<a href="/ask-us">Ask Us</a></div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="text-center row footer_header_row">
<h2>Important links</h2>
<ul class="list-unstyled quick-links whitefont_links card-columns">
<li><a href="https://libraries.ou.edu/content/about-website">About This Site</a></li>
<li><a href="https://libraries.ou.edu/content/jobs-ou-libraries">Libraries Jobs</a></li>
<li><a href="https://www.ou.edu/publicaffairs/WebPolicies/accessstatement.html">Accessibility</a></li>
<li><a href="https://www.ou.edu/content/publicaffairs/WebPolicies/copyright.html">Copyright</a></li>
<li><a href="https://www.ou.edu/content/web/landing/policy.html">OU Policies</a></li>
<li><a href="https://www.ou.edu/content/web/landing/legalnotices.html">Legal Notice</a></li>
</ul>
</div>
</div>
</div>
</div>Custom JS/CSS tab
This is where we store and js and css files needed for the template.
Customization Files
Editor css and js files are used when an admin is editing a libguide.
Local js and css files are used for the main styling and js of the site in general.
To edit these, copy them down, edit and re-upload.
Custom CSS
This is simply inline css that is added to every page. This is the main css for the styles that were used for the OU global header, libraries header, and libraries footer.
<style>
/* GLOBAL HEADER
----------------------------------------- */
.global_header {
background-color: #333;
height: 30px;
}
.global_header ul {
height: 30px;
list-style: none;
padding: 0;
float: right;
margin: 0;
padding-right: 40px;
}
.global_header ul::after {
content: "";
display: block;
}
.global_header ul li { float: left; }
.global_header ul li a.home,
.global_header ul li a.search,
.global_header ul li a.social {
display: block;
height: 30px;
width: 30px;
}
.global_header ul li a {
background-image: url(https://libraries.ou.edu/themes/custom/ou_lib_subtheme/img/ou-global_header-icons.png);
background-repeat: no-repeat;
line-height: 0;
}
.global_header ul li a.home { background-position: 0 0; }
.global_header ul li a.home:hover { background-position: 0 -30px; }
.global_header ul li a.search {background-position: -30px 0;}
.global_header ul li a.search:hover { background-position: -30px -30px; }
.global_header ul li a.social { background-position: -60px 0; }
.global_header ul li a.social:hover { background-position: -60px -30px; }
.global_header ul li a:hover { background-color: #e8e8e8; }
.global_header ul li.wordmark {
text-indent: -99999px;
width: 200px;
height: 30px;
margin-left: 1em;
background-image: url(https://libraries.ou.edu/themes/custom/ou_lib_subtheme/img/ou-global_header-wordmark.png);
background-repeat: no-repeat;
background-position: center center;
}
/*New Global Footer*/
.site-footer {
padding: 2% 13% 2% 13%;
font-weight: 300 !important;
font-style: normal;
background: #841617;
}
.footer_header_row h2 {
border-bottom: none !important;
}
.footer_div img {
max-width: 100%;
height: auto;
}
.site-footer .text-center {
text-align: center !important;
}
.footer_social_icons {
margin: 0 auto;
}
.social_icon_white {
color: #fff;
font-size: 25px;
}
.footer_social_icons {
list-style: none;
}
.footer_links {
list-style: none;
}
.footer_links li a, .footer_header_row h2 {
color: #fff;
}
.footer_header_row .whitefont_links {
color: #fff;
}
.footer_header_row .whitefont_links li a:visited {
color: #fff;
}
.footer_header_row a:hover, .footer_social_icons a:hover {
color: #fff;
background-color: #841617;
}
ul.footer_social_icons li {
display: inline;
}
.site-footer a {
color: #fff;
text-decoration: none;
}
@media (min-width: 1164px) {
.footer_header_row ul {
column-count: 2;
}
}
.site-footer .extlink {
color: #fff;
}
</style>LibCal
https://libcal.ou.edu/admin/look-and-feel/general#s-lc-tab-general
Using the link above as an admin, you will be able to edit the template for LibCal
The only section you need to worry about is the “Code Customizations - public pages” section
Custom JS/CSS Code
The first line adds in the libcal.css file from AWS S3. This can be edited and reuploaded on S3 to update.
The second line imports the typekit from adobe. This includes the fonts needed for the template.
Custom Header Code
Custom Footer Code
3D Libraries/Elevator
This is managed by Kristi currently and is based on a project by the University of Minnesota.
https://it.umn.edu/services-technologies/elevator
The site is here: https://3d.libraries.ou.edu
Users can be granted admin access by Kristi after they log in with their OU account.
To edit the template, go to: https://3d.libraries.ou.edu/instances/edit/1
Go to the “Custom Styling and Display section”
Custom Header Content
Custom Footer Content
Custom CSS Content