OPAC Changes Coming in 18.11

by Lucas Gass on Jun 3, 2019

If you have recently upgraded to 18.11 you will have noticed some minor cosmetic changes to your OPAC. Don’t fear, these changes were implemented intentionally. If the look and feel of your OPAC is different there are several ways to change/revert these changes and get your OPAC looking the way you want.

The easiest way to do this will be to install the latest version of our Galadriel plugin. (v1.0.44 or later) The latest version can be downloaded here: Github - ByWater Solutions. Libraries who have never used plugins may need to enable the System Preference, UseKohaPlugins.

Galadriel Plugin Tutorial Video

OPAC CSS Changes with System Preferences or Galadriel Plugin

If you are unable to install plugins, don’t worry, there is another option. We can manually add changes using the ‘OPACUserCSS’ system preference. Let’s take a look at what was changed and what we can do about it.

THE KOHA BRAND LOGO

The default color of the Koha logo has been changed to Koha green. There is now a configuration option in Galadriel that allows users to pick either green, black, or white. Alternatively, use this CSS in the ‘OPACUserCSS’ system preference:

For Black:

#logo {

background-image: url(/opac-tmpl/bootstrap/images/koha-logo-navbar-black.png);

}

For White:

#logo {

background-image: url(/opac-tmpl/bootstrap/images/koha-logo-navbar.png);

}

BODY BACKGROUND COLOR

The overall body background color has changed a bit. Instead of white, it is now a light shade of gray. Galadriel includes an option to change the body background color. Alternatively, you can use this CSS:

body {

background: {color};

}

OVERALL FONT COLOR
The font family of several elements has also changed. This may, or may not, suit the look and style of your OPAC. Galadriel includes an option to override these changes. If you want to write that override with CSS use this:

body {

font-family: {font-family} !important;

}

LEFT & RIGHT PAGE PADDING

You also may have noticed some extra space on the right and left side of your OPAC. If you would like to eliminate that with Galadriel use the ‘Eliminate extra left/right body padding’ option in the configuration. Alternatively you can use this CSS:

#wrap {

padding-right: 0;

padding-left: 0;

}

NAVBAR COLOR OPTIONS

There are several color changes to the top navigation bar that may affect your site. Every one of these is addressed by Galadriel. Look for each of these options in the ‘General Color Options -> Navigation bar’ section.

CART and LIST ICON COLOR

These are the icons next to the text. To change the color:

#carticon, #listsmenu .fa {

color: {color};

}

CART, LIST, and LOGIN TEXT COLOR

To change the actual text color:

.cartlabel, .listslabel, .loggedinusername {

color: green;

}

CART and LIST HOVER COLOR

When you hover over the text for ‘List’ or ‘Cart’ it will now change to green. If you would like to override that use this:

.listslabel:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .nav li.dropdown.open >

.dropdown-toggle, .navbar-inverse .nav > li > a:focus, .navbar-inverse .nav > li > a:hover {

color: {color};

}

You may also notice a small triangle (caret) next to ‘List’. When you hover over ‘List’ this will turn green. If you prefer another color:

.navbar-inverse .nav li.dropdown > a:focus .caret, .navbar-inverse .nav li.dropdown > a:hover .caret {

border-top-color: {color} !important;

border-bottom-color: {color} !important;

}

SEARCHBAR FOCUS COLOR

When you click on the main search bar and begin to type you will notice that it gains a green outline. You can change the color of this:

input[type="text"]:focus {

border-color: {color};

box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,0,0,.075);

}