Krueger Library custom JS/CSS code
10/02/13
<link rel="shortcut icon" href="http://www.winona.edu/favicon.ico" />
<style>
...
Krueger Library custom JS/CSS code
10/02/13
#tabsI a, #tabs12 a {background:transparent;background-
color:#F1F1F1;border:1...
Krueger Library custom JS/CSS code
10/02/13
border-radius: 0px 0px 3px 3px !important;
}
div.roundbox.headerbox {
backgrou...
Krueger Library custom JS/CSS code
10/02/13
}
li.subject_link {
padding:2px 0;
margin: 2px 6px;
list-style-type: none;
fon...
Krueger Library custom JS/CSS code
10/02/13
line-height 1.5em;
}
</style>
<!-- jquery.columns was written by Karl Swedberg...
Krueger Library custom JS/CSS code
10/02/13
// Toggle the child 'ul' element
$(this).children('ul.guide_links').slideToggl...
Upcoming SlideShare
Loading in …5
×

Krueger Library Custom CSS for LibGuides

672 views

Published on

This is the Winona State University's Darrell W. Krueger Library custom CSS for their LibGuides Research Hub. See the CSS in action at http://libguides.winona.edu/researchhub

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
672
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Krueger Library Custom CSS for LibGuides

  1. 1. Krueger Library custom JS/CSS code 10/02/13 <link rel="shortcut icon" href="http://www.winona.edu/favicon.ico" /> <style> /*hide location and today's hours text on hours box, old text color 5E5E5E*/ #hours-col-l, .hours-col-loc, #hours-col-t {display: none;} .hours-col-time {color:#000000; font: 18px Helvetica, Arial, sans-serif; font- weight: bold; padding: 0px 0px 10px 40px; position:relative;} /* change table of contents box */ .box_toc_page, .box_toc_subpage, .box_toc_current { font: 14px Helvetica, Arial, sans-serif; font-weight: bold; padding: 0 2px 4px 2px; } /* hide search box row and guide description */ .stitle, .guidedesc { display:none; } /*change guide title font and spacing*/ .guidetitle { font: 20px Helvetica, Arial, sans-serif; padding: 15px 0px 0px 0px; } /*change link color to WSU purple*/ a {color:#4B08A1;} /*tab customization*/ #tabsI, #tabs12 { font: 12px Helvetica, Arial, sans-serif; font-weight: bold; !important; text-transform: uppercase; background:transparent; float: left; padding: 0; margin: 0 0 15px -2px; position: relative; border-bottom:1px solid #BBB; width:990px;} #tabsI ul, #tabs12 ul {padding: 0;}
  2. 2. Krueger Library custom JS/CSS code 10/02/13 #tabsI a, #tabs12 a {background:transparent;background- color:#F1F1F1;border:1px solid #ADADAD;border-bottom:0;padding: 3px 2px 3px 4px;margin-left:4px;border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;-webkit-border-radius: 2px 2px 0 0;-khtml-border-radius: 2px 2px 0 0;} #tabsI #current a, #tabs12 #current a {color: #fff;font-weight: bold;background:transparent;background-color:#4B08A1;border:1px solid #777;border-bottom:0;} #tabsI a span, #tabs12 a span {background:transparent;color:#000;padding: 0 10px;} #tabsI #current a span, #tabs12 #current a span {color:#EEE; } #tabsI a:hover, #tabs12 a:hover {background:transparent;background- color:#888;border:1px solid #adadad;border-bottom:0;} #tabsI a span:hover, #tabs12 a span:hover {color:#fff;} .dropmenudiv {border:1px solid #BBB;} .dropmenudiv a {background-color:#EEE;font-color:#FFF;font-size:12px Helvetica, Arial, sans-serif; !important;} .dropmenudiv a:last-child {border-bottom:0;} .dropmenudiv a:hover {background:#4B08A1;color:#FFF;} /*box customization */ .headerbox h2 { font: 14px Helvetica, Arial, san-serif; !important; /* add this back in if you want the font bolded: font-weight: bold; */ text-transform: uppercase; color: #FFF; font-size: 14px; padding: 2px; } #container { background: #fafafa !important; } div.innerbox.roundbox {
  3. 3. Krueger Library custom JS/CSS code 10/02/13 border-radius: 0px 0px 3px 3px !important; } div.roundbox.headerbox { background: #888888; border-radius: 3px 3px 0px 0px; } .outerbox { padding: 0px !important; background: transparent; border: 1px dotted #ddd; } .itemlist li { font-weight: bold !important; } .linklist li { font-weight: bold !important; } </style> <style type="text/css"> .column, .floatcols { float: left; width: 49%; padding: 0; margin: 0; } .column-wrapper { overflow: hidden; } ul#mylistid{ width: 100%; padding: 0;
  4. 4. Krueger Library custom JS/CSS code 10/02/13 } li.subject_link { padding:2px 0; margin: 2px 6px; list-style-type: none; font-size: 1.15em !important; } li.subject_link:hover { background: #eee; cursor: pointer; } a.toggle_button { text-decoration: none; text-align: center; color: #FFF; background: #4B08A1; border: 1px solid #ccc; font-weight:bold; margin: auto 6px auto 0; padding:1px 3px; display:inline-block; width:15px; cursor: pointer; } span.toggletext { cursor: pointer; } ul.guide_links li { margin:3px 3px 3px 26px; list-style-type:disc; } ul.guide_links { margin: 6px 0; padding: 0;
  5. 5. Krueger Library custom JS/CSS code 10/02/13 line-height 1.5em; } </style> <!-- jquery.columns was written by Karl Swedberg. See the file source for more attribution information --> <script src="http://demo.libguides.com/data/custom/1/jquery.columns.js"></script> <script type="text/javascript"> // Contributors: Dan Brubaker Horst, Laura J. Harris, thorbroo (#code4lib), Erin R. White, Derik Badman. // Code is licensed under a Creative Commons Atrribution license: http://creativecommons.org/licenses/by/3.0/us //compatibility mode for $ namespace (which might get used by other js libraries) better to use jQuery in these cases jQuery.noConflict(); // Wrapping with: (function($){ ...code...})(jQuery); replaces '$' with 'jQuery'. (function($){ $(document).ready(function() { $('#myScript').remove(); // creates the columns through the column plug loaded above $('.mylist').columns({columns: 2}); // 'hide' function is called on each of the 'ul' elements with the class 'guide_links' $('ul.guide_links').hide(); // DOM insert a link element inside of each of the subject list items. $('li.subject_link').prepend('<a href="javascript://toggle guide links" class="toggle_button">+</a>'); // enable toggle action on each Subject LI $('li.subject_link').bind("click", function(){ // toggles text in the link between '+' and '-'. if($(this).children('a.toggle_button').text() == '+'){ $(this).children('a.toggle_button').text('-'); } else { $(this).children('a.toggle_button').text('+'); }
  6. 6. Krueger Library custom JS/CSS code 10/02/13 // Toggle the child 'ul' element $(this).children('ul.guide_links').slideToggle("fast"); }); $('a.subject_link_a').contents().unwrap(); }); })(jQuery); </script>

×