Removing list bullets and indentation

Sometimes you want your links list to not look so much like a list- and for it to fit within the box better. To do this, we are going to add a script to remove those CSS styles on links that appear within the links boxes. However, when we do this, we will need to remember that ALL links in our boxes on the guide will lose those styles as well. Since I am sure that I will want fewer bulleted lists, I am okay with this- I will simply add a second script to give those links their bullets. Other folks may have the opposite inclination- they may want bullets most of the time but occasionally want to be rid of them. In that case, you will need to think a little bit differently from the instructions below.

The LibGuides default:

Screen shot of LibGuides default links list

The LibGuides default links list- small link fonts and space-hogging bullets & indentation.

The layout isn’t horrible, but the font is tiny, there’s a lot of blank space and those bullets push everything so far over.

The way I’d like to see the links:

Screen shot of the improved links list

The improved links list- larger link fonts, no indentation, and no bullets.

The improvement makes the links stand out and even though the font is enlarged quite a bit, the size of the box stays relatively the same because we have made better use of the space inside.

How to change CSS with jQuery

The first thing we are going to do is to look at identifying which elements are those that I want to target. Using Firebug, I see that the links in the ‘Menu’ box are each wrapped in a '.boxatt' <div>, within that an '.itemlist' <div>, and then each link is an <li> element inside of an unordered list, or <ul> element. Browsers automatically add margins to indent the list elements (whether you’re dealing with an ordered or unordered list)- the problem is that there needs to be room for the bullets. And even though we’re going to get rid of the bullets with a 'list-style-type:none;' CSS declaration, the margins will still be there. Additionally, we’ll need to not only get rid of the margins of the <ul> element, but also the <li> element. Using the .css() method in jQuery, we can easily do all of these things and add the following code to our script we already created in the TOC box:

 $('.boxatt li').css({
    'list-style-type':'none'
});
$('.itemlist ul').css({
    'margin':'0px'
});
$('.itemlist li').css({
    'margin':'0px'
});
$('.itemlist a').css({
    'font-size':'1.5em',
    'font-weight':'bold'
});

Notice at the end there that we added a script to change the styles of the links within the list. This will increase the font size by 150% (well, technically 1.5em) and make the text bold so that it stands out from the rest of the text. Also note that we are able to make two style declarations by separating them with a comma- but don’t leave a comma after the last declaration because it will break your script. By applying these styles to the <a> element, we aren’t changing anything with the explanatory text- which might make the box far too big. However, if you want to make additional changes to that text, you will notice that that portion of the <li> element not contained in an <a> element is wrapped in a handy '.linkdesc' <div> element. Some code like this will allow you to tweak that text to your heart’s desire:

$('.linkdesc').css({
    //make your style changes here
});

How to add Javascript hacks to any page

Add a script element in a text box to enhance your content

LibGuides has a fair number of ways to tweak the layout using CSS (and Admin privileges) – but these CSS styles affect all pages within the library’s LibGuides site. What if you want to add some functionality or change some of the styles on your page without messing up your colleagues’ pages? Well, I figured out a pretty good way, but it’s kind of ugly and a little cumbersome at first sight. Basically, you can add a <script> element to one of the Rich Text boxes on your page. I discovered that this works best with a box that is persistent on every page of your guide so that when you change the code on one page it applies to the rest- you don’t have to change the code in every page. But who has the same box on every page? Isn’t that redundant?

LibGuides uses tabs instead of menus. Research has shown that folks just don’t see the tabs- they are small and, let’s face it, tabs don’t get used a lot these days. People just aren’t used to looking for tabs when they want to navigate through a site anymore. So why not add a Table of Contents box that acts as a menu? When placed in the same position on every page, this gives the feel of a navigation menu. And since a TOC box includes a space for text (above the TOC), you can insert your <script> element in plain text and it will be hidden and persistent on every page. Be sure to create a TOC box on the first page and then ‘reuse’ that same box on subsequent pages. Also be sure not to click the ‘copy’ box – all of the boxes should be linked to the original so that future changes will apply to all TOC boxes and pages within the guide.

Starting out

To add your <script> element, simply click on the ‘Add/ Edit text’ link in your original TOC box (you can’t edit the others) and then click on the ‘Plain-Text Editor’ tab and insert the following:

<script language="text/javascript">

$( document ).ready(function() {

    //Your scripts will go here...

});

</script>

Don’t forget that with jQuery you need the $(document).ready() function to ensure that the scripts will run after the DOM has loaded. This is especially important because we aren’t adding our scripts in the best position- ideally, you’d want your scripts included in the <head> or at the end of the <body>. Ours is just going where it’s convenient for us.

To show you what it looks like in LibGuides when you add a script like this, here is a screen shot of the code above pasted into the ‘Plain-Text Editor’ textarea:

There is one very obvious de-bugging method to make sure you entered the code in the ‘Plain-Text Editor’ and not the ‘Rich-Text Editor’: if you see the code displayed on your LibGuides page within the TOC box, it’s in the wrong place and won’t run. You need to go back and move the script into the ‘Plain-Text Editor.’ If all is well, you won’t see it displayed. If you’re not convinced it’s actually there (e.g. if you add a code and it’s not running)- view the source code (right-click on the page) and/or use Fire Bug or another tool to check the HTML.

Screen shot of adding code in plain text box

Screen shot of plain text box with script added

Embiggening list box links

Now, if I ‘reuse’ this box on the other pages, this code will be present on those pages as well. For a quick illustration of what kind of styling we can do with Javascript, I will make the font-size of my links larger so that they will stand out more. Basically, I will use a jQuery selector to find the link elements that I want to enlarge. If I use '.itemlist li a', it will include all <a> elements within lists inside a links box. I therefore just need to include the following code as the script:

<script language="text/javascript">
$( document ).ready(function() {
//Make the list links stand out like headings
    $('.itemlist li a').css({
      'font-size':'1.5em',
      'font-weight':'bold'
    });
});
</script>

This will increase the font size of all links in a list box to make them stand out. Instead of looking like this:

Screen shot of links box links with regular (small) font size

Links box links before embiggening

They will look like this:

Screen shot of links box links after enlarging the font size

Links box links post-embiggening

 

Broadening the scope of the blog

I have finally gotten my first *Librarian* job! This means that I’ve also moved to a new job- I am now a General Reference/Instruction Librarian at Humboldt State University in Arcata, CA. In my last job (as a Library Technician at the College of the Redwoods) I worked extensively with Koha- we hosted our ILS through ByWater Solutions and got support from them but most everything related to the web presence of our OPAC and staff clients fell into my lap. I started this blog to share the things that I learned through that work and at the time my entire professional web developing world was limited to Koha (for the most part).

Now, however, I’m at a library that uses Voyager and I’m no longer working in technical services or circulation. The primary web development work I do now is in LibGuides. I am certain that my work will involve other CMS and ILS and acronyms ad nauseum, so I’m now trying to keep the purpose of this blog more open-ended. For the time-being, however, my next post will involve customizing LibGuides (not LibGuides 2.0) using JS and jQuery to style the content better and make the service more user-centered. IMO LibGuides is a great tool for Librarians, but not so user-friendly to the patron. From what I’ve seen, LibGuides 2.0 has done a lot to change that- but for those of us not yet migrated to the new system there are some simple things we can do to enhance the user’s experience.

Notice the change in the blog’s title, tagline, and, most importantly, structure and use the links at the menu above to access the pages on Koha’s CCSR and Bootstrap themes. Soon I’ll be adding the LibGuides content and link in that menu as well.

But I still am more than happy to help anyone with questions about using the hacks that I have posted for Koha’s CCSR and Bootstrap themes. While I won’t be planning on adding any Koha-specific content anytime soon, I can still answer questions and can even create new entries for folks with specific problems. Just add a comment to any page to get my attention!

Tim

Bootstrap Theme

How to use these techniques with the Bootstrap theme

All of the other entries in this blog are dedicated to addressing issues with the mobile CCSR theme. The new(er) Bootstrap theme in Koha is more responsive and resolves many of the problems that I address in the tutorial on the CCSR mobile theme entries. However, the techniques will also work in the Bootstrap theme after you have made some small changes to the sample CCSR code snippets. Some examples follow.

Note: it is assumed that you have read the earlier posts about the CCSR theme, so if you think that some info is missing please check the older posts.

Making the search box more user friendly

In the CCSR tutorial we added some placeholder text and put the cursor in the search box (yes, these don’t work simultaneously- you can choose one or the other or have both and let one be a back-up when the other won’t run). The basic code snippet will not work in the Bootstrap theme because of one small but major problem- the HTML is significantly different, which means you will need to use those different elements and/or attributes in the scripts. For example, to make the cursor appear inside the search box you will need to find the new attributes to point the script to the search form text box. It is in the <form> element which has the id="searchform" and then also within the search box (the <input> element with class="transl1"). To figure all of this out, you can use the Firebug Inspect tool instead of looking at the source code to find the name of the new id and class. Therefore, that id and class will be used to point the focus() function:

//Place cursor in search box
$('#searchform .transl1').focus();

Next, we can add the placeholder to the search box by figuring out which id or class we need to use. In this case, the name of the attribute is the same, but instead of being a class (.transl1), it is an id (#transl1). Now we just need to change that one character (the . to a #) and we’re done:

//Add placeholder to search box: "Search the catalog"
$( ".transl1" ).attr( "placeholder", "Search for library items" );

We then do the same thing for the drop-down menu- this time you will need to change the id that is used- instead of #filters, you will need to use #masthead_search. The code snippet will be:

//Change "Library Catalog" to "Keyword" in search dropdown menu
$("#masthead_search option:first").text("Keyword");

Now these snippets should work just fine- if you have any issues you can use the Firebug Console to see what errors you’re getting.

Scroll to top button

The button we added so that users can scroll to the top of the page on mobile devices (rather than swiping their finger up and up and up and up) is a bit more tricky. Arguably, the code that I used in the CCSR theme could be a bit better, so let’s consider this an upgrade in our code. First of all, in the CCSR technique I added the caret (^) by using Javascript to insert the HTML. This time we want to add the caret without using Javascript to do so (this is a bit cleaner and doesn’t rely on Koha’s ever-changing HTML DOM structure- it is most often a better idea to change the actual HTML rather than using Javascript to do so). We will add it to a more permanent area- the opaccredits field:

<!--Button to scroll to top of screen-->
<div class="toTopNav">^</div>

It doesn’t really matter where this div element goes because we are going to move it with the CSS later. However, the opaccredits show up in the footer of the page. When you get to the end of this project and notice that something has gone wrong because you can’t see your button, get rid of the Javascript code (or comment it out temporarily) and verify that the caret is in the footer.

Next, we are going to add the Javascript code to give that little caret its functionality. Note the class that we’ve assigned to our caret- .toTopNav. This is what we will use to point our script to the caret:

//Create button to scroll to top of page
$('.toTopNav').css('cursor', 'pointer');
//Scroll to the top of page
$('.toTopNav').click(function(){
    $('html, body').animate({scrollTop:0}, 'fast');
    return false;
});
//Make button appear only when scrolled below 100px
$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.toTopNav').show();
    }
    if ($(this).scrollTop() < 100) {
        $('.toTopNav').hide();
    }
});

In the first script,

$('.toTopNav').css('cursor', 'pointer');

we are simply giving the caret a hyperlink-like feel. When the user hovers the mouse over the caret, the arrow pointer turns into a hand pointer. The next script gives the caret its magic:

$('.toTopNav').click(function(){
    $('html, body').animate({scrollTop:0}, 'fast');
    return false;
});

When the caret is clicked (click(function()) the page will scroll to the top of the page (pixel #0- scrollTop:0). The last script is optional- it simply hides the button until the user has scrolled 100 pixels down. The idea being that why would s/he need to scroll up if s/he is already at the top of the page?

//Make button appear only when scrolled below 100px
$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
        $('.toTopNav').show();
    }
    if ($(this).scrollTop() < 100) {
        $('.toTopNav').hide();
    }
});

The finishing touch is to style the caret and, most importantly, move it so that it isn’t in the footer anymore. Enter the following into the OPACUserCSS field:

.toTopNav {
    background-color: #980100;
    color: #FFFFFF;
    font-size: 2em;
    max-height: 2em;
    opacity: 0.6;
    padding-top: 0.25em;
    text-align: center;
    width: 1.5em;
    height: 1.3em;
    position: fixed;
    list-style: none;
    right: 3%;
    top: 80%;
    border-radius: 3px;
    color: #FFF;
    box-shadow: 3px 3px 10px #888888;
    z-index: 100;
    display: none;
}

For an explanation of the CSS for this button, see my CCSR post- Add a ‘Scroll To Top’ button to the search results page. The CSS is the same as that for the CCSR theme except that we had to add a max-height, a z-index (so it would appear on top of other elements), the list-style: none; (to get rid of bullets) and display: none; (which hides it until the user scrolls down and the script ‘shows’ it).

 

Add links to top bar

The functionality of this has changed a bit with the Bootstrap theme because of the use of a more responsive top bar that, when viewed in smaller screens, uses collapsible menus for the cart and lists and even for the user info. However, if we want to add persistent links to the top bar so that users are just a click (or tap) away from other resources we can still use the same method we employed in the CCSR theme. This time, we need to select a different element in our script- #menu-left will no longer work. It is a bit tricky with the Bootstrap theme and we will need to get crafty. This time we will use the :nth-child(n) selector to insert the new links before (.prepend()) the login link. We are also going to give our new links (which are list elements) their own class (.extLink) so that we can style them.

//Add links to top-bar
$(".navbar-inner ul.nav:nth-child(1)").prepend("
<li class='extLink'><a href='http://www.redwoods.edu/eureka/library/dbs/' target='_blank'>Articles & Databases</a></li>
<li class='extLink'><a href='http://www.redwoods.edu/_webmaster/mail/askalibrarian.aspx' target='_blank'>Ask a Librarian</a></li>
");

Styling the links will be pretty simple- to make them look like the other top bar links we simply need to make them white:

#members .extLink a{
color: #FFF;
}

With the Bootstrap theme, these links will be listed within the login drop down menu (with the icon of a bust) and do not need a lot of tweaking to ensure they fit on smaller screens. You will need to be sure, however, that you don’t add too many links or use text that is too long. Just be sure to double check to see that the new links don’t spill over as the top bar shrinks. One area where you can ‘trim the fat’ is the home button (the Koha icon)- give it a smaller width when the screen shrinks to a certain size (it comes out of the box with a lot of extra space on either side):

/*For the top nav bar- so that the Koha logo doesn't take up too much space*/
@media only screen and (min-width: 701px) {
    #logo {
        width: 70px;
    }
} /********************************************************/
/**********************************************************/

Disclaimer: I personally use the Opera Dragonfly tool instead of Firefox’s Firebug. It is purely a personal choice- I have used both and both are fine. I like Dragonfly for my own workflow and work habits (I prefer the Opera browser for a variety of reasons) but Firebug is an excellent choice. The error console in Dragonfly is more intuitive *to me* but not necessarily everyone. Point being: there are many tools to help you in web development. Don’t be afraid to try more than one and don’t bash your head against a wall with Firebug if you’re used to a different browser- every browser has a sufficient tool. I am linking to Firebug because it is open source, it works with the open source Firefox browser, and Koha is open source, too!

Add a ‘Scroll To Top’ button to the search results page

One way to make it less frustrating to get back to the top of a long page on a mobile device

The Koha default: In the mobile site, a search results page can be very long and when a user has scrolled down and found that she needs to start a new search scrolling all the way back up can be frustrating and cause links to be selected accidentally.

We want: With some simple jQuery and CSS we can create a simple little button that appears in the lower right-hand corner as a fixed element (position: fixed;). Once the button is clicked, the page automatically scrolls to the top of the page where new search terms can be entered.

Note: Not all mobile browsers allow fixed positioning- almost all current versions do, but even some of those are clunky and jerky. This is certainly something to keep in mind when implementing this feature. For more in-depth info on browser support for fixed positioning see http://bradfrostweb.com/blog/mobile/fixed-position/ and for a more up-to-date listing of compatibility see http://mobilehtml5.org/

This fix is going to use jQuery to insert the HTML for the button- and we will add the script inside our function that only runs when the screen size is less than 700px, the size used for the OPACMobileUserCSS (see line 7 in the code snippet below). The upward-facing arrow is a caret (shift+6)- you can substitute an image or other text simply enough. The next step is to give that HTML some properties to make it function like a button. The snippet on line 8 that gives the button cursor mouseover properties probably isn’t necessary because we’re dealing with mobile users and touchscreens, but why not cover our bases? On line 10 we create our click function and assign to it the scrollTop animation. You can choose to not scroll all the way to top (instead of 0, enter the number of pixels from the top you’d like to scroll to) and the speed of the scroll (instead of ‘fast’ you can choose ‘slow’ but this has a somewhat dizzying effect on mobile devices).

Enter the following into the opacuserjs field:

// Mobile site: these are scripts run when display < 700px

var windowSize = $( window ).width();
if (windowSize < '700') {

  //Create button to scroll to top of page
    $("#results #container").prepend('<li id="toTop" class="toTopNav">^</li>');
    $('.toTopNav').css('cursor', 'pointer');
  //Scroll to the top of page
    $('.toTopNav').click(function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
    });

} //end of scripts for <700px -----------------------------

But we still have to style and position the button and make sure that it’s fixed in place- that it stays on the screen as the user scrolls down. The positioning is done with the  position: fixed; declaration and then the top  and  right  values. Opacity allows any content that is obscured by the button to still be read, making the button less obtrusive. The  box-shadow  is a subtle  skeuomorphic CSS3 declaration that makes the button stand out – it becomes more visible because it appears to hover over the rest of the page.

Screenshot showing the 'Scroll To Top' button in the lower right-hand corner

Screenshot showing the ‘Scroll To Top’ button in the lower right-hand corner

Enter the following into the   OPACMobileUserCSS field:

li.toTopNav {
    background-color: #980100;
    color: #FFFFFF;
    font-size: 2em;
    max-height: 2em;
    opacity: 0.6;
    padding-top: 0.25em;
    text-align: center;
    width: 1.5em;
    position: fixed;
    list-style: none;
    right: 1%;
    top: 80%;
    border-radius: 3px;
    color: #FFF;
    box-shadow: 3px 3px 10px #888888;
}

A quick note about adding javascript and jQuery scripts: you should wrap them all in a document.ready() function. All of your scripts can be inside the same document.ready() function, but your jQuery likely won’t run if you skip this step.

Koha hacks, tips & tricks

While there are many wonderful things about Koha’s CCSR mobile layout, this post is going to focus on some of the issues that you may see when you make the switch. I will offer some ideas on how to cope with the changes using CSS whenever possible and then using Javascript or jQuery to help us along when CSS isn’t powerful enough.

A quick note about adding javascript and jQuery scripts: you should wrap them all in a document.ready() function. All of your scripts can be inside the same document.ready() function, but your jQuery likely won’t run if you skip this step.

If you are new to working with web pages (HTML/CSS, jQuery & Javascript are all you need for these tips), working with Koha, or the OPAC module in Koha, you may want to take some time to briefly go over some basics. While many of the tips below are easy to implement without any deep knowledge of these concepts, it is always good to have a fundamental understanding of web development and Koha if you want to have a truly customized OPAC. Please refer to my research guide: Customizing Your Koha Online Catalog.

This website examines the CCSR mobile theme, but many of the techniques can be tweaked to work with the newer Bootstrap theme. The HTML and DOM structures were changed fairly significantly with the Bootstrap theme, but some of the Javascript tips will work fine without any major changes to the code (such as adding an ‘On Shelf’ note). Others will require an examination of the DOM to select different elements and/or attributes (such as with the changing of the ‘Library Catalog’ wording to ‘Keyword’ in the search field drop menu– instead of using #filters, you will use #masthead_search). So though the information is specific to the CCSR theme, many of the techniques will also work well with the Bootstrap theme. One caveat being that the Bootstrap CSS is quite different from the CCSR theme. The Bootstrap theme follows the @media query technique that I have employed with the CCSR theme, but is a fairly large difference from the CCSR theme and requires a greater departure from the code snippets listed here.

This tutorial takes a mobile first view- when we updated our Koha OPAC, we were thinking of how it would function on a mobile device; our desktop version was secondary. That said, the Koha layout is desktop-centric and thus the tutorial will begin with how to tweak features in the desktop. Many of these changes will translate to making the site fully responsive and will help to make the ‘desktop’ layout render well on larger mobile screens (tablets). The second section of the tutorial covers the mobile layout and how to make sure everything looks great and functions as it should.

Customizing your OPAC

All right- so at this point, we are assuming you are familiar with making changes to the Koha OPAC by using the OPAC module in the staff client. You should already have experience making changes to the OPAC styles using the OPACUserCSS field. However, in order to get your OPAC customized exactly how you would like with a fully responsive site, the first step is to enable the mobile layout [Note: this is not absolutely necessary- you can also create media queries within the OPACUserCSS field, but if you are able, you should go ahead and activate the mobile functionality as well]. This means that you will be using the OPACUserCSS field to set any CSS styles for the desktop site and the OPACMobileUserCSS field to make any changes to the mobile only site. The changes made in the OPACMobileUserCSS field will only occur when the display screen is less than 700px wide. This will mean that on many tablets the page will render according to the desktop styles when in landscape orientation and in mobile styles when in portrait orientation. This is something you should keep in mind when determining how you will control the styles on your site (e.g. check to make sure a page renders well in both orientations and that key functionality is not lost- if a module that is not available in mobile mode is being accessed in landscape mode, how that work when the user switches to portrait mode?). Contact your Koha administrator or host if you are unsure how to enable the mobile layout. Once you have this set, we can begin with some basic tips.

Desktop site customizations

First, let’s go over some of the issues with the general OPAC layout. Many of these will affect the mobile layout as well and will help set the stage for creating a fully responsive site. Some of these are minor tweaks to make the OPAC customized and the exact choices you make may be different from the ones I demonstrate below, but the techniques are useful. Some tips are completely optional and unnecessary to making a responsive mobile site- when that is the case, I have tried to explain this clearly.

The main search box, which is persistent throughout the site, is not as user-friendly as we’d like.

The Koha default: There is no placeholder and the label for keyword searches is “Library catalog”. This seems slightly counter-intuitive to us (the other options in the drop-down menu after ‘library catalog’ are ‘author’, ‘title’, etc.), so we decided to change the wording to be more clear.

Screenshot of default search box layout

How the search box appears by default

We want: a couple things-

1)      a cursor that automatically appears in the search box when the page loads,

— or —

a jargon-free placeholder in the search box (this is the greyed-out text  you sometimes see- e.g. placeholder=”Search for library items”), and

2)      to re-name the drop-down search option to ‘keyword’.

These changes make searching simpler, more fluid and more intuitive. [Note: focusing the cursor automatically will negate the placeholder, so only one of these will work. However, it doesn’t hurt anything to add both scripts- that way, when a user clicks outside of the search box, the placeholder appears.]

Screenshot of hte customized version of the search box

The customized version of the search box

To make these customizations, enter the following into the opacuserjs field:

//Place cursor in search box
document.searchform.transl1.focus();
//Add placeholder to search box: "Search the catalog"
$( "#transl1" ).attr( "placeholder", "Search for library items" );
//Change "Library Catalog" to "Keyword" in search dropdown menu
$("#filters option:first").text("Keyword");

Create and format customized links on top-bar (a.k.a. opacheader) for added links.

The Koha default: Only the cart, list and login links are available in this menu.

Screenshot of the default upper menu

How the upper menu appears by default

We want: Since this top menu bar is persistent (though not on the mobile site), we want to take advantage of this by adding external links to other library content such as databases or ask-a-librarian/chat services (content not available within the OPAC).

Screenshot of the customized upper menu

The customized version of the upper menu

To add the links, enter the following into the opacuserjs field:

//Add links to top-bar
$("#menu-left").append("
<ul>
    <li id="listsmenulink2"><a href="your-articles-and-databases-url" target="_blank">Articles & Databases</a></li>
    <li id="listsmenulink2"><a href="your-ask-a-librarian-url" target="_blank">Ask a Librarian</a></li>
    <li id="listsmenulink2"><a href="your-library-home-page-url" target="_blank">Library Home Page</a></li>
</ul>
");

Which will create the following html inside the #top-bar div (after the ‘Lists’ link — this is the result of the step above- you do not need to add this code anywhere):

<ul>
    <li id="listsmenulink2">
        <a href="your-articles-and-databases-url" target="_blank">Articles & Databases</a>
    </li>
    <li id="listsmenulink2">
        <a href="your-ask-a-librarian-url" target="_blank">Ask a Librarian</a>
    </li>
    <li id="listsmenulink2">
        <a href="your-library-home-page-url" target="_blank">Library Home Page</a>
    </li>
</ul>

To format the new links to match the existing ones, enter the following CSS into the OPACUserCSS field:

/* ---------------------------------------
Added links at top menu:
 articles & databases,
 ask-a-librarian,
 library home page*/
li#listsmenulink2 a {
    border: medium none;
    color: #FFF; /* add more contrast */
    font-family: Arial;
    font-size: 0.8em; /* 13px */
    font-weight: bold;
    margin: 2px 0 0;
    text-decoration: none;
    line-height: 225%;
}

ul#menu-left li#listsmenulink {
    padding: 0 8px 0 10px;
    margin-top: -3px;
}
/* ------------------------------------- */

Get your content in line and tame the width.

The Koha default: There is no set width for the page, so it will render oddly on very large monitors (very long strings of text, massive white space).

Screenshot of the Koha default entire page width

How the page width appears by default

We want: Set max-width for content so it doesn’t display strangely on large monitors- this one is optional and many popular sites don’t employ this, but we wanted to tame the look of our site. Text is easier to read in shorter lines and much of the Koha content, such as item records, has a maximum width because the text strings aren’t extremely long anyway- this results in large white space between elements and can make the page difficult to read. This technique will also help to ensure a uniform look across multiple desktop screen sizes.

We will be setting our largest container divs to have a max-width. A very common max-width is 980px, but we want to use em so that the site is responsive to different screen sizes. To calculate the em equivalent, divide the px by 16. The equivalent width to 980px is 61.25em (980/16 = 61.25). [Caveat: this may be a bit different for different sites. You may need to size more than just the body- ideally, you would size the nested containers to get the same effect but setting the body works fine. The main thing is to get the larger containers to have a max-width.]

Screenshot of the customized entire page width

The customized version of the page width

Enter the following CSS into the OPACUserCSS field:

 body {
    max-width: 61.25em; /* 980px */
}

Make the desktop site responsive.

The Koha default: As the screen size gets smaller, the site doesn’t scale well until you get down to 700px, at which point the mobile CSS takes over. For tablets, this gives us a jumbled mess for screens over 700px and the page is rendered quite differently if in profile or landscape.

We want: This is a bit tricky and may be a bit different for different sites. The idea is that you want to set all widths (as well as min- and max-widths) to em instead of pixels. Remember- to do this, divide the number of px by 16. This basically means that you’ll need to go through and set all widths for all elements to ems. This will be different for different sites- our library prefers a clean look so we don’t have left or right nav menus and we’ve hidden our login element. Therefore, we don’t need to set the widths for those. You can basically go through and see which elements are not responsive and then set those widths to em.

Note: this is just the beginning of making the site fully responsive- but it is a necessary step. You will need to follow some of the other tips and make your own tweaks to bring it all together.

For example, enter the following into the  OPACUserCSS field:

/* ---------------------------------------
Set all widths to em for responsive site */

h1#libraryname, h1#libraryname a, #masthead {
    width: 7.5em;
}

.advsearch table tr td {
    width: 43.75em;
}

#holds, #opac-auth {
    min-width: 76.875em;
}
/* --------------------------------------- */

Add an ‘On Shelf’ note.

The Koha default: In the item record table under the due date column, Koha does not display a note telling the patron to check the shelf when an item is available- it is just blank.

Screenshot of Koha's default holdings table
The table shows no info in the due date column

We want: For larger libraries with advanced functionality for indicating exactly where an item is as it is processed, this won’t work. But we just wanted a simple note. Add “On Shelf” note for items that aren’t checked out- this adds clarity to finding items with nothing in the due date field of the item info table and allows for proper display of vertical tables in the mobile layout (see below). This tip is more to show you how to use a for loop to run a more advanced script. For loops can be used in many different ways to change the look or content of your site. This for loop simply goes through the page and finds the due date column cells that are empty and populates them with “On Shelf”.

Screenshot of revised holdings table with "On Shelf" message
The revised table tells the patron the item is on the shelf

To add these notes, enter the following into the opacuserjs field:

//Add "On Shelf" note (this helps with the mobile layout as well)
    var dueLength = $("td.date_due").length;
    for (var i=0;i<dueLength;i++) {
     var dueDate = $('td.date_due:eq(' + [i] + ')').html();
     if (dueDate !== "") {
     } else {
       $('td.date_due:eq(' + [i] + ')').text("On Shelf");}
}

Note: if you are unsure about writing such scripts and don’t understand how this works, don’t fear. There are plenty of great tutorials to learn this pretty easily. I liked the hands-on Codecademy tutorial best. Also, you can’t ‘break’ your site by trying this type of thing- if it doesn’t work, go back and erase the script!

Change the top-bar login wording.

The Koha default: The wording for the login link in the upper (#top-bar) menu is unnecessarily long (“Log in to your account”) and causes problems as the screen size gets smaller. This is more of an issue once someone is logged in (their full name appears and the Sign Out link appears) and when you add extra links to the left-hand list.

Screenshot of the Koha default login link
The Koha default Login link

We want: A less wordy message for logging in and out- very simple. This is a minor one, but a good demonstration of how to use Javascript to change an element’s text even when you don’t have an id or class to drill down to. For this one, we’re using ‘contains’ which looks for the text contained in the element.  For these elements, there are other ways to find the elements’ text, but this shows how to do so when you have no better way to get there.

Screenshot of the customized login link
How the login looks with the revision

Enter the following into the opacuserjs:

//Change wording for top-bar Log in
    $("#members a:contains('Log in to your account')").text("Account Log In ");
    $("#members a:contains('Log Out')").text("Sign out");

Hide the homepage login element.

The Koha default: The homepage has a large login form on the right-hand side as well as the login link in the upper menu (#top-bar). This feels redundant and we like a cleaner look.

Screenshot of the default homepage with the login element
The login element takes up precious space in the default layout.

We want: Again, this one is optional and may not be right for everyone. We chose to hide the login element because we felt the persistent link in the top menu was sufficient- it is in the ‘usual’ spot (e.g. most sites have login links in the upper right menu) and is not required or necessarily helpful to search our catalog.

However, this was very tricky because all of the Koha style sheets converge to create a tangle that refuses to remove the ‘ghost’ of the element- you can easily hide it with ‘display: none;‘ but the layout still is spaced out as though it is there (i.e. it acts like ‘visibility: hidden;‘). So I also made sure the div just before it (div#notloggedin div.first) was full width and had margins set to auto. After that, we need to ensure the rest of the page layout is okay. For us, this means centering the #opacmainuserblock where we have our welcome message and Twitter feed. However, this proved more tricky that it should be and we had to also bring the #notloggedin div that contains the #opacmainuserblock div to full width as well.

Screenshot of the customized homepage with the cleaner look
The customized page with no login element- a cleaner look.

To hide the login element and make the rest of page take it’s place, enter the following into the OPACUserCSS field:

/* Hide login box on homepage and center message */
#login {
    display: none;
}

div#notloggedin div.first {
    width: 100%;
    margin: auto;
}
/* --------------------------------------------- */

Now let’s move on to the Mobile OPAC layout.

The mobile layout works fairly well set up out of the box, but there are some glaring problems as well as some more minor issues. If you are interested in making big customizations, you may appreciate not learning about some of these the hard way.

Set two different sizes- one for tablets and one for phones- based on display size.

The Koha default: The default simply sets the mobile site to one screen size (anything smaller than 700px) and doesn’t work well with slightly larger sizes or very small sizes (anything under 320px).

Screenshot of Koha default page on medium-sized display cuts off elements

The Koha default does not scale well for medium-sized displays- elements get cut-off.

We want: A fully responsive site that scales to any practical display size- from 27″ iMacs to 176px Motorola Razors. We started the work and (now have the very large screen covered) when we made the entire site responsive (ensure all widths are in em). Now we will set up two new media types (a.k.a. media queries) to help out with the inbetween sizes- large tablets and tiny phones. We’ll need to create a media query for the large tablets in the OPACUserCSS. We will also create a media query to make sure the header that contains the library name resizes smoothly as the screen size shrinks- this helps to make sure the header is an appropriate size for the screen and different headers will require different display size queries. (Later on, we’ll also need to create a query for the tiny phones in the OPACMobileUserCSS. We will cover this below when we work on the mobile version of the account login page).

Screenshot of revised responsive site with elements displaying properly

The customized site is responsive and elements are all displayed properly.

For example, to make a separate CSS for tablet/netbook displays but smaller than desktop displays (larger than 700px) enter the following into the OPACUserCSS:

 /*
 FOR LARGER SCREEN TABLETS
*/
@media all and (min-width: 700px) and (max-width: 970px) {

    #ulactioncontainer ul {
        padding-left: 0em;
    }

} /* keep this bracket to end the css for 700-970px screen size */ 

For smaller screen sizes (small tablets & large phones) enter the following into the OPACMobileUserCSS:

@media all and (max-width: 530px) {

    h1#headerLibrary {
        font-size: 1.2em;
    }

    .askHide {
        display: none;
    }

    ul#mobileMenu li {
        list-style: none;
        display: block;
        max-width: 11em;
        margin: 0.2em auto;
        border: 1px solid #CCC;
        border-radius: 5px;
        background-color: #E8ECF0;
        text-align: center;
    }

} /* keep this bracket to end the css for < 530px screen size */

The above CSS is just an example, but one thing you may want to do is shrink down white space, such as the automatic padding that is created for ul elements. I also resized the font in the tables and other elements so they’d fit better. There are many more little tweaks that you’ll have to make to ensure everything renders correctly- just remember to include in the @media query. To make your site render well with small smartphones, you may want to create another @media query for displays smaller than 320px (the standard display size).

Format tables to better fit the mobile screen size.

The Koha default: Many of the tables aren’t formatted any differently to be viewed on mobile screens. They are very long horizontal tables that don’t fit on the narrower screen size. To make matters worse, browsers often don’t allow horizontal scrolling.

Screenshot of the koha default item record table- it doesn't fit the small screen

The horizontal tables in the mobile layout don’t scale well

We want: There is a clever trick to turn horizontal tables into vertical tables. I found this trick at CSS Tricks: http://css-tricks.com/examples/ResponsiveTables/responsive.php. The cumbersome part of this method is that each table needs to be formatted separately because you will be giving each table header it’s own name. The code below is for changing the Holdings Table (#holdings) on the item record page. To change another table, enter the appropriate id/class names for the next table.

Screenshot of the customized item record table scaled to fit a small screen

The customized vertical table looks cleaner and scales perfectly.

Enter the following into the OPACMobileUserCSS:

 /* --- Special trick to make tables better format to fit on screen.
from: http://css-tricks.com/examples/ResponsiveTables/responsive.php --- */

/* Holdings Table (Item record page) */
#holdings {
    padding: 5px;
}

/* Force table to not be like tables anymore */
#holdings table, #holdings thead, #holdings tbody, #holdings th, #holdings td, #holdings tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#holdings thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

#holdings tr { border: 1px solid #ccc; }

#holdings td {
/* Behave like a 'row' */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 30%;
}

#holdings td:before {
/* Now like a table header */
    position: absolute;
/* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    min-width: 45%;
    padding-right: 5px;
    white-space: nowrap;
}

#holdings td {
    padding-left: 50%;
}

/* Label the data */
#holdings td.itype:before {
    content: 'Loan Period'; }
#holdings td.location:before {
    content: 'Location'; }
#holdings td.collection:before {
    content: 'Collection'; }
#holdings td.call_no:before {
    content: 'Call Number'; }
#holdings td.status:before {
    content: 'Status'; }
#holdings td.date_due:before {
    content: 'Date Due'; }
#holdings td.vol_info:before {
    content: 'Volume Info'; }
/* Hide copy number info */
#holdings th.item_copy {
    display: none; }
#holdings td.copynumber {
    display: none; }
/* ------------------------------ */ 

 

Hide ‘Browse Shelf’ link because it doesn’t work in the mobile site.

The Koha default: The item record screen (…/opac-detail.pl) shows a table with information about the item. Within the Call Number column, each item has a link to ‘Browse Shelf’ so that the patron can see a list of items by call number (as they would appear on the shelf). However, the mobile site does not bring up the list when the link is clicked- it’s just a dead link.

Screenshot of item record with non-functional 'Browse Shelf' link
The ‘Browse Shelf’ link doesn’t work in the mobile version.

We want: We can get rid of the link and the text, but it’s a bit more difficult than a simple CSS:  td.call_no a { display: none; } because we also need to get rid of the parentheses around the link <a> tag. To do this, we need some Javascript/jQuery magic. First, we need to wrap the script into a function that will only run when the screen size is under 700px (or include it with other scripts already within such a function). Then we will create a for loop (see above for more info) to run through every item on the page separately- otherwise we’d end up with the same info in each cell based on the first that appears. For all practical purposes, this would most likely suffice since each item would presumably have the same call number within the same bib record. However, that’s not always the case- some collections may have a copy of the same version of ‘One Flew Over the Cuckoo’s Nest’ in the fiction section (with ‘Kesey’ as the call number) and in the non-fiction section (with PS3561.E667 O5 1963 as the call number). To get them both to show up properly, we need a for loop. Then we will store the call number text in a string variable and strip the ‘(Browse Shelf)’ text from it and re-insert the cleaned up string into the cell.

Screenshot of the customized item record without the links or parentheses
The customized item record has the link and parentheses deleted- notice the different table layout as well.

Enter the following into the opacuserjs:

// Mobile site: these are scripts run when display < 700px

var windowSize = $( window ).width();
if (windowSize < '700') {

 //Remove 'See Similar Items' link b/c it is dead
   var callNoSize = $("td.call_no").length;
   for (var i=0; i<callNoSize; i++) {
     var callNoStr = $( 'td.call_no:eq(' + i + ')').text();
     var callNo = callNoStr.replace("(See Similar Items)","");
     $( 'td.call_no:eq(' + i + ')' ).text(callNo);
   }

} //end of scripts for <700px ----------------------------- 

Resize the page header font to shrink as the screen gets smaller.

The Koha default: The header font size can be changed for displays under 700px, but the difference between a tablet at 700px and a phone at 320px is rather large. Finding a font size that is appropriate for a 320px display is too small for 700px and vice versa.

Screenshot of mobile view of very large header
If you don’t resize the header, it takes up a lot of real estate.

We want: This is a simple one: let’s resize the header for better layout- the goal will be to keep it on one line (to take up minimal vertical real estate). We want to center the header for the mobile layout and resize the font when the screen size gets smaller than the width of the line of text (roughly 530px for us). Once we determine the screen size at which the header spills onto a second line, we can do this by using a @media query. This is the same technique I showed you in the section on making different layouts for different display sizes. Note: MeasureIt is a good Firefox addon for measuring sizes- just resize your window until the line spills over and then measure it. Also, for our site, I gave the library header it’s own id="headerLibrary" if you don’t have that id included in the opacheader, you can achieve the same results with div#opac-custom-header.

Screenshot of the customized header fitting the mobile screen
The resized header allows for more content to appear without scrolling.

Enter the following into the OPACMobileUserCSS:


div#opac-custom-header {
    text-align: center;
}

@media all and (max-width: 530px) {

    h1#headerLibrary {
        font-size: 1.2em;
    }

} /* keep this bracket to end the css for < 530px screen size */

 

Add a ‘Home’ button to the top-bar.

The Koha Default: In the mobile layout, there is no easy way to navigate to the homepage. The logo link (a.logo) is hidden to save room.

We want: We have a variety of choices to deal with this one. Most involve adding some html via jQuery scripts (using.append() or .prepend()) and then styling the added element to make it look how we want. Possibilities for placement abound and include the #header-wrapper (where the name of the library appears), div.ft (at the bottom of the page but above the footer), within the text somewhere, or any other place you can think of. We chose to place a link in the #top-bar, on the left-hand side (see below). For this link, we are going to use the #listsmenulink2 id to ensure that the styles will match the links we already added to the top-bar (this is an id that Koha assigns to the List link in #top-bar). We’re going to wrap our list in a new div so that we can better control its display in the mobile layout- we can display our div even though the rest of the left-hand side of the top-bar div is hidden.

Screenshot of the upper menu with customized 'Home' button
The customized ‘Home’ button makes it that much easier to navigate the site.

Enter the following into the opacuserjs field (be sure to wrap it in a function to only run on screens under 700px):

// Mobile site: these are scripts run when display < 700px

var windowSize = $( window ).width();
if (windowSize < '700') {

  //Add home link to top-bar
  $("#top-bar").prepend("
  <div id="mobileHome">
    <ul>
      <li id="listsmenulink2"><a href='http://library.redwoods.edu'>Home</a></li>
   </ul>
  </div>
  ");

} //end of scripts for <700px -----------------------------

Enter the following into the OPACMobileUserCSS field:

 div#top-bar div#mobileHome {
    display: block;
    float: left;
} 

Add @media queries to the main CSS.

The Koha default: For some reason, the mobile CSS does not show up for the account page (body id="opac-login-page"). This is frustrating when you first discover this (“why aren’t my styles showing up!?) but actually it’s a pretty easy fix.

Important Note: you have probably noticed that if you have kept all things default on the accounts page, it scales well and the login message appears fine. For those to work, the page doesn’t need the mobile CSS. However, if you have made changes to the page (like we did with the login instructions) you will need the following fix.

We want: We will set up a @media query for screen sizes under 700px (the criterion used for the mobile CSS) and place that in the OPACUserCSS. Then simply include any CSS that is required for that page. The only real trick is to be sure to remember to make future changes in this @media query, rather than the mobile CSS. I have included all of the styles I have added to that page below, but yours may be different depending on your login message (we made some changes to the default text using a script- to make your own, follow the same instructions included in the ‘Change the text of an element‘ post, but I’ve included ours below as well). The CSS will also remove the #top-bar element and search box to re-style the page so it is more of a strictly login page.

Screenshot of a mobile view of the account login page
The output of this customization is pretty straight-forward: a clean rendering of the page.

Enter the code to change the wording of the login instructions into the opacuserjs field:

   $(&quot;#auth div&quot;).html(&quot;&lt;h5&gt;CR students, faculty, and staff:&lt;/h5&gt;&lt;p&gt;Your username is the same as your Webadvisor User ID (e.g., flast123, same as WebAdvisor: first initial + lastname + last 3 digits of your student ID number.)&lt;br&gt;&lt;br&gt;Your password is your 6-digit birthdate (mmddyy).&lt;/p&gt;&lt;h5&gt;Can't log in?&lt;/h5&gt;&lt;p&gt;Please stop by or call the Circulation Desk during Library hours at (707) 476-4260.&lt;/p&gt;&quot;); 

To style the account login page, paste the following into the OPACUserCSS field:

 /* ------------------------------------
 TO MAKE LOGIN, LISTS, etc. PAGES RESPONSIVE
 BECAUSE THE MOBILE STYLES DO NOT APPEAR */
@media all and (max-width: 700px) {

    body#opac-login-page, body#opac-login-page #doc3, body#opac-login-page #container {
        max-width: 43.75em;
        min-width: 1em;
    }

    form#auth fieldset.brief {
        max-width: 18em;
        min-width: 1em;
        border-radius: 5px;
    }

    form#auth, div#opac-auth, #nologininstructions, #opac-auth, #userauth {
        max-width: 43.75em;
        min-width: 1em;
        width: auto;
    }

    #headerLibrary {
        text-align: center;
    }

    body#opac-login-page form#searchform {
        border-radius: 5px;
    }

    #opac-auth h3 {
        padding-top: 0.8em;
    }

    input#userid, input#password {
        max-width: 11em;
        min-width: 1em;
    }

/* some styles for just the login page */

    body#opac-login-page form#searchform, body#opac-login-page div#top-bar {
        display: none;
    }

    body#opac-login-page #header-wrapper {
        margin-top: -32px;
        margin-bottom: -10px;
    }

    div.buttonLink {
        max-width: 11em;
        margin: 0.2em auto;
        border: 1px solid #CCC;
        border-radius: 5px;
        background-color: #E8ECF0;
        text-align: center;
    }

}
/* ------ END OF STYLES FOR < 700px ------ */ 

 

Change the text of a dynamic element and make the invisible visible.

The Koha default: In the mobile site, once the user is logged in, there is no ‘Log out’ link- the ‘Log out’ link that is present in the desktop site is not displayed. Additionally, a welcome message is displayed in the right-hand side of the upper menu which includes the user’s full name (including middle name if present in the system).

Screenshot of the welcome message and logout link on the desktop site
The welcome message and logout link on the desktop site
Screenshot of the welcome message and logout link on the mobile site
The mobile site has lost the logout link

We want: If we want to make the ‘Log out’ link available, we will need to make some room and shorten the welcome message- getting rid of the string ‘Welcome,’ and also getting rid of the middle and last names. This requires some tricky Javascript- the ‘Welcome,’ portion is relatively straight-forward (using the .replace() method)  but shortening the name is more tricky because that text is dynamically generated (i.e. it’s different for every user). To shorten the name we will use a regular expression to select only the first name and then replace the full name with the shortened one. Making the ‘Log out’ link appear requires some CSS. [Note: we already changed the wording to ‘Sign out’ because that seems more user-friendly to us.]

Screenshot of the revised shorter welcome message and logout link on the desktop site
We cleaned up the message a bit on the desktop site
Screenshot of the revised shorter welcome message and logout link on the mobile site
And the mobile site now has the log out link as well as inheriting the shorter message

To get the welcome message a bit shorter enter the following into the opacuserjs field:

//Hide the 'Welcome,' text when logged in
 //grab the text string
   var welcomeText = $("#members").html();
 //replace it with nothing
   var welcomeGone = welcomeText.replace("Welcome, ","");
 //insert new empty string
   $("#members").html(welcomeGone);
 //grab the dynamically generated name
   var nameText = $("span.loggedinusername").text();
 //create an array, splitting on the whitespace
   nameShort = nameText.split(" ");
 //insert the second value in the array
 //the first value in the array is nothing because the name begins with a space
   $("span.loggedinusername").text(nameShort[1]);

To get the ‘Log out’ link to appear in the mobile site enter the following into the OPACMobileUserCSS field:

 div#members ul li:last-child {
    display: inline !important;
} 

Make the Accounts Page Mobile-Friendly

Add @media queries to the main CSS

The Koha default: For some reason, the mobile CSS does not show up for the account page (body id="opac-login-page"). This is frustrating when you first discover this (“why aren’t my styles showing up!?) but actually it’s a pretty easy fix.

Important Note: you have probably noticed that if you have kept all things default on the accounts page, it scales well and the login message appears fine. For those to work, the page doesn’t need the mobile CSS. However, if you have made changes to the page (like we did with the login instructions) you will need the following fix.

We want: We will set up a @media query for screen sizes under 700px (the criterion used for the mobile CSS) and place that in the OPACUserCSS. Then simply include any CSS that is required for that page. The only real trick is to be sure to remember to make future changes in this @media query, rather than the mobile CSS. I have included all of the styles I have added to that page below, but yours may be different depending on your login message (we made some changes to the default text using a script- to make your own, follow the same instructions included in the ‘Change the text of an element‘ post, but I’ve included ours below as well). The CSS will also remove the #top-bar element and search box to re-style the page so it is more of a strictly login page.

Screenshot of a mobile view of the account login page

The output of this customization is pretty straight-forward: a clean rendering of the page.

The code to change the wording of the login instructions is:

   $("#auth div").html("<h5>CR students, faculty, and staff:</h5><p>Your username is the same as your Webadvisor User ID (e.g., flast123, same as WebAdvisor: first initial + lastname + last 3 digits of your student ID number.)<br><br>Your password is your 6-digit birthdate (mmddyy).</p><h5>Can't log in?</h5><p>Please stop by or call the Circulation Desk during Library hours at (707) 476-4260.</p>"); 

To style the account login page, paste the following into the OPACUserCSS field:

 /* ------------------------------------
 TO MAKE LOGIN, LISTS, etc. PAGES RESPONSIVE
 BECAUSE THE MOBILE STYLES DO NOT APPEAR */
@media all and (max-width: 700px) {

body#opac-login-page, body#opac-login-page #doc3, body#opac-login-page #container {
max-width: 43.75em;
min-width: 1em;
}

form#auth fieldset.brief {
max-width: 18em;
min-width: 1em;
border-radius: 5px;
}

form#auth, div#opac-auth, #nologininstructions, #opac-auth, #userauth {
max-width: 43.75em;
min-width: 1em;
          width: auto;
}

#headerLibrary {
text-align: center;
}

body#opac-login-page form#searchform {
border-radius: 5px;
}

#opac-auth h3 {
padding-top: 0.8em;
}

input#userid, input#password {
max-width: 11em;
min-width: 1em;
}

/* some styles for just the login page */

body#opac-login-page form#searchform, body#opac-login-page div#top-bar {
display: none;
}

body#opac-login-page #header-wrapper {
margin-top: -32px;
margin-bottom: -10px;
}

div.buttonLink {
max-width: 11em;
margin: 0.2em auto;
border: 1px solid #CCC;
border-radius: 5px;
background-color: #E8ECF0;
text-align: center;
}

}
/* ------ END OF STYLES FOR < 700px ------ */ 

Create Persistent Navigation to the Homepage

Add a ‘Home’ button to the top-bar

The Koha Default: In the mobile layout, there is no easy way to navigate to the homepage. The logo link (a.logo) is hidden to save room.

We want: We have a variety of choices to deal with this one. Most involve adding some html via jQuery scripts (using.append() or .prepend()) and then styling the added element to make it look how we want. Possibilities for placement abound and include the #header-wrapper (where the name of the library appears), div.ft (at the bottom of the page but above the footer), within the text somewhere, or any other place you can think of. We chose to place a link in the #top-bar, on the left-hand side (see below). For this link, we are going to use the listsmenulink2 id to ensure that the styles will match the links we already added to the top-bar (this is an id that Koha assigns to the List link in #top-bar). We’re going to wrap our list in a new div so that we can better control its display in the mobile layout- we can display our div even though the rest of the left-hand side of the top-bar div is hidden.

Screenshot of the upper menu with customized 'Home' button

The customized ‘Home’ button makes it that much easier to navigate the site.

Enter the following into the opacuserjs field (be sure to wrap it in a function to only run on screens under 700px):

 //Add home link to top-bar
$("#top-bar").prepend("
<div id="mobileHome">
  <ul>
    <li class="mobileDisplay" id="listsmenulink2"><a href='http://library.redwoods.edu'>Home</a></li>
  </ul>
</div>
"); 

Enter the following into the OPACMobileUserCSS field:

 div#top-bar div#mobileHome {
    display: block;
    float: left;
} 

A quick note about adding javascript and jQuery scripts: you should wrap them all in a document.ready() function. All of your scripts can be inside the same document.ready() function, but your jQuery likely won’t run if you skip this step.

Center and Resize the OPAC Header for Best Fit in All Screen Sizes

Resize the page header font to shrink as the screen gets smaller

The Koha default: The header font size can be changed for displays under 700px, but the difference between a tablet at 700px and a phone at 320px is rather large. Finding a font size that is appropriate for a 320px display is too small for 700px and vice versa.

Screenshot of mobile view of very large header

If you don’t resize the header, it takes up a lot of real estate.

We want: This is a simple one: let’s resize the header for better layout- the goal will be to keep it on one line (to take up minimal vertical real estate). We want to center the header for the mobile layout and resize the font when the screen size gets smaller than the width of the line of text (roughly 530px for us). Once we determine the screen size at which the header spills onto a second line, we can do this by using a @media query. This is the same technique I showed you in the section on making different layouts for different display sizes. Note: MeasureIt is a good Firefox addon for measuring sizes- just resize your window until the line spills over and then measure it. Also, for our site, I gave the library header it’s own id="headerLibrary" if you don’t have that id included in the opacheader, you can achieve the same results with div#opac-custom-header.

Screenshot of the customized header fitting the mobile screen

The resized header allows for more content to appear without scrolling.

Enter the following into the OPACMobileUserCSS:


div#opac-custom-header {
    text-align: center;
}

@media all and (max-width: 530px) {

    h1#headerLibrary {
        font-size: 1.2em;
    }

} /* keep this bracket to end the css for <530px screen size */