Koha advanced theming guide

This page builds on the simple theme created in the simple themeing guide page. Still working with sysprefs, the tutorial below extends up to themeing the rest of the OPAC, as well as looking at including some responsive CSS.

advanced theme tutorial

This tutorial picks up where the simple theme left off. Currently the stylesheet for the OPAC only contains styling for the home/main page. So next we are going to style the search page.

First up on the search page is styling the facets link menu.

/*search results page*/
#menu h4 a, #search-facets h4 a {
  background: #84bc01;
  background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
  background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
  color:#fff;
}

Next we will style the toolbar at the top of the table for search results. This is the last item we will style on the search page.

.toolbar {
  background: #84bc01;
  background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
  background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
}

.searchresults a.highlight_toggle {
  color:#fff;
}

.searchresults a.highlight_toggle:hover {
  text-decoration:underline;
}

#selections-toolbar, .selections-toolbar {
  background:#ffffff;
}

Next we move onto the details page for a book. On this page we will style the toolbox and navagation between books on the right side of the page.

/*book details page*/

.nav_results .l_Results a {
  background: #84bc01;
  background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
  background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
  color:#fff;
  -moz-border-radius:8px 8px 0px 0px;
  -webkit-border-radius:8px 8px 0px 0px;
  border-radius:8px 8px 0px 0px;
  border:none;
}

.pg_menu {
  background:#84bc01;
  border-top:none;
}

.pg_menu li a, .pg_menu li span {
  background-color:#84bc01;
  color:white;
}

.pg_menu li a:hover {
  text-decoration:underline;
}

#action {
  background:#fff;
}

Next we will style the tabs at the top and bottom of the details page

.ui-tabs .ui-state-default a, .ui-tabs .ui-state-default a:link, .ui-tabs .ui-state-default a:visited {
  background:#fff;
  color:#84bc01;
}

.view {
  background:#fff;
  color:#84bc01;
}

Next we're going to click around all the hidden pages to check styling there is also being applied. First up is the carts page. To view the page add an item to the cart, then click on view items in cart.

Using this theme in my installation of Koha the links in the toolbar aren't quite readable in their current state so the code below is a fix for that.

/*cart page*/
.detail, .send, .download, .print-large, .empty {
color:#fff;
}

Next up is the lists page. Create a test list in order to check the styling there.

On my local install I find that by default the button is red, and because of my styling some of the links in the toolbar are unreadable. So to fix that, use inspect element to find the id names and then in the CSS, use a selector to override existing styles:

/*lists page*/
a.newshelf, a.print-small, input.editshelf, input.deleteshelf {
color:white;
}

a.newshelf:hover, a.print-small:hover, input.editshelf:hover, input.deleteshelf:hover {
color:#001a4d;
}

Now that the lists page is done, I'm going to check all the little side pages that contain user specific information. When checking I would work down the menu but to save space I will only include pages that I needed to correct styling issues on my local koha. The first page I came across which needed fixing was the personal details page, which hadn't picked up the styling for the button.

The easiest way to fix this is not to rewrite the CSS again at the bottom of the file. Instead what I recommend is adding the selector/id of that particular button to the original button styling further up in the file.

Currently I'm using the default koha styling on buttons and so that code doesn't actually exist in my sysprefs CSS. In that situation you do have to write out the styling seperatly, which is what I'll do below.

/*fix personal details page button*/
button.btn, input.btn[type="submit"] {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #0044cc;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color:#fff;
}

button.btn:hover, input.btn[type="submit"]:hover {
  background:#0044CC;
  color:#fff;
}

The search results page is another page I am playing around with here. The styling doesn't need fixing, but I thought I would update the table to fit in with the more general theme. ANy table styling applied here will also apply to pages such as search results, and book details when there are several results for physical holdings of a book.

First I'll change the header row background

/*table styling. This will apply to all tables across the OPAC with the same HTML set up*/

th, .table-bordered>thead>tr:first-child>th {
background: #84bc01;
background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
color:#fff;
}

Then I'll set alternate rows to a different colour. Here I've chosen to make the grey rows a pale green.

.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
background:#edfdce;
}

Finally, returning to the home page, I will play around with the dropdown menus to see if they can be made to fit in with the more general colour scheme.

/*dropdown menus*/
.dropdown-menu > li > a {
    background: none;
    color: #001a4d;
    border-bottom: 0;
}

.dropdown-menu > li > a:hover{
    background: none;
    color: #001a4d;
    border-bottom: 0;
    text-decoration:underline;
}
.dropdown-menu {
    background: #EDFDCE;
    color: #001a4d;
    border: 0;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
    text-decoration: underline;
    background: none;
    filter: none;
    border-bottom: 0;
}

This code changes the background on the dropdown menu to the same green as the alternate table rows and sets the link colours to navy. The text highlight has been changed from blue to white and the links have underlines fpor the hover command.

Final Stylesheet

body {
background:#ffffff;
}

h1 {
color:black;
text-decoration:bold;
}

a, a:visited {
color:#3366ff;
}

/*change link hover property*/
a:hover {
color:#001a4d;
}

#opaccredits {
background: #84bc01;
background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
padding: 20px;
color:#fff;

}

.mastheadsearch {
background:none;
}

.mastheadsearch label {
color:#001a4d;
}

#opacheader {
background:none;
}

#header-region, .navbar-inverse .navbar-inner {
background:#5bad3f;
}

.navbar-inverse .divider-vertical {
    border-left-color: #5bad3f;
    border-right-color: #5bad3f;
}

.cartlabel, .listslabel {
  color: #FFFFFF;
}

#members a {
    color: #fff;
}

#members a.logout {
color:#b30000;
}

/*search results page*/
#menu h4 a, #search-facets h4 a {
background: #84bc01;
background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
color:#fff;
}

.toolbar {
background: #84bc01;
background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
}

.searchresults a.highlight_toggle {
color:#fff;
}

.searchresults a.highlight_toggle:hover {
text-decoration:underline;
}

#selections-toolbar, .selections-toolbar {
background:#ffffff;
}

/*book details page*/

.nav_results .l_Results a {
background: #84bc01;
background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
color:#fff;
-moz-border-radius:8px 8px 0px 0px;
-webkit-border-radius:8px 8px 0px 0px;
border-radius:8px 8px 0px 0px;
border:none;
}

.pg_menu {
background:#84bc01;
border-top:none;
}

.pg_menu li a, .pg_menu li span {
background-color:#84bc01;
color:white;
}

.pg_menu li a:hover {
text-decoration:underline;
}

#action {
background:#fff;
}

.ui-tabs .ui-state-default a, .ui-tabs .ui-state-default a:link, .ui-tabs .ui-state-default a:visited {
background:#fff;
color:#84bc01;
}

.view {
background:#fff;
color:#84bc01;
}

/*cart page*/
.detail, .send, .download, .print-large, .empty {
color:#fff;
}

/*lists page*/
a.newshelf, a.print-small {
color:white;
}

a.newshelf:hover, a.print-small:hover, input.editshelf:hover, input.deleteshelf:hover {
color:#001a4d;
}

/*fix personal details page button*/
button.btn, input.btn[type="submit"] {
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(to bottom, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #0044cc;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
color:#fff;
}

button.btn:hover, input.btn[type="submit"]:hover {
background:#0044CC;
color:#fff;
}

/*table styling. This will apply to all tables across the OPAC with the same HTML set up*/

th, .table-bordered>thead>tr:first-child>th {
  background: #84bc01;
  background: -moz-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, #84bc01), color-stop(32%, #7aae09), color-stop(64%, #73a30f), color-stop(100%, #658d1b));
  background: -webkit-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -o-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: -ms-linear-gradient(-180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  background: linear-gradient(180deg, #84bc01 0%, #7aae09 32%, #73a30f 64%, #658d1b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84bc01', endColorstr='#658d1b', GradientType=1 );
  color:#fff;
}

.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
background:#edfdce;
}

/*dropdown menus*/
.dropdown-menu > li > a {
  background: none;
  color: #001a4d;
  border-bottom: 0;
}

.dropdown-menu > li > a:hover{
  background: none;
  color: #001a4d;
  border-bottom: 0;
  text-decoration:underline;
}
.dropdown-menu {
  background: #EDFDCE;
  color: #001a4d;
  border: 0;
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
  text-decoration: underline;
  background: none;
  filter: none;
  border-bottom: 0;
}

Tips and Tricks

See Koha simple theming guide for some useful tips and tricks when theming Koha via sysprefs.

Koha advanced theming guide

advanced theme tutorial

Final Stylesheet

Tips and Tricks

Navigation menu

Search