HTML & CSS Library

From Koha Wiki

Jump to: navigation, search
Library
Home > Documentation
Home > Koha Versions > 3.10
Home > Koha Versions > 3.12
Home > Koha Versions > 3.14
Home > Koha Versions > 3.16
Resources

Below are snippets of code that Koha libraries use to make tweaks to their OPACs.

Contents

Templates

Developers: Please use the following template to add your HTML and CSS statements to the wiki.

HTML Title

  • Developer: Name of HTML developer
  • Purpose: Purpose of the HTML script
  • System preference edited: Where did you put this code?
  • Theme: What theme you're using
  • Version: (The Koha version you are using this with, or Any, if applicable)
  Some HTML code

CSS Title

  • Developer: Name of CSS developer
  • Purpose: Purpose of the CSS script
  • System preference edited: Where did you put this code
  • Theme: What theme you're using
  • Version: (The Koha version you are using this with, or Any, if applicable)
  Some css code

HTML

Search New Items Pull Down

  • Developer: Nicole C. Engard, ByWater Solutions
  • Purpose: Show a pull down that searches for item type and sorts by acquisition date newest to oldest. Libraries will have to edit the item type to match their library's item type codes. The item type is after the "mc-itype:" part in the code.
  • System preference edited: I've used it in: opacnav, opacnavbottom, opacnavright and/or opacmainuserblock before
  • Theme: CCSR, Bootstrap
  • Version: 3.12+
<p><strong>New Items</strong></p>
<p><form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl">
<input name="idx" value="kw" type="hidden">
<input name="sort_by" value="acqdate_dsc" type="hidden">
<input name="do" value="OK" type="hidden">
<select name="limit" onchange="this.form.submit()">
<option>-- Please choose --</option>
<option value="mc-itype:BOOK">Book</option>
<option value="mc-itype:BOOKCD">Book on CD</option>
<option value="mc-itype:DVD">DVD</option>
<option value="mc-itype:LRG_PRINT">Large print book</option>
<option value="mc-itype:MAGAZINE">Magazine</option>
<option value="mc-itype:NEWSPAPER">Newspaper</option>
<option value="mc-itype:VIDEO">Videocassette</option>
</select>
</form>
</p>

CSS

Change color of black bar at the top

  • Developer: Nicole C. Engard, ByWater Solutions
  • Purpose: Change the color of the black bar at the top of every opac page
  • System preference edited: opacusercss
  • Theme: Bootstrap
  • Version: 3.14+
/*Change navbar color to red*/
.navbar-inverse .navbar-inner {
    background-image: linear-gradient(to bottom, #680A1A, #680A1A);
    border-color: #680A1A;
    background-color: #680A1A;
}
 
/*change navbar font to white*/
.navbar-inverse .brand, .navbar-inverse .nav > li > a, #members a {
    color: #fff !important;
}
 
/*remove black bars from nav bar*/
.navbar-inverse .divider-vertical {
    border-left: none;
    border-right: none;
}

Change logo and background color of masthead

Use logos pictures of the given size if you don't want to change the given code.

  • Developer: Marc VĂ©ron
  • Purpose: Change the original Koha logos and the color of the masthead
  • System preference edited: OPACUserCSS
  • Theme: Bootstrap
  • Version: 16.11
/* Replace logos */
 
#logo {
  background: rgba(0, 0, 0, 0) url("http://yourdomain.xx/yourlogo-67-20.jpg") no-repeat scroll 0 center;
}
 
@media only screen and (max-width: 700px) {
  #logo{
    background: transparent url("http://yourdomain.xx/yourlogo-14-14.jpg");
  }
}
 
/* Change background color */
 
.navbar-inverse .navbar-inner {
  background-color: #416100;
  background-image: none;
  border-color: #416100;
}
 
.navbar-inverse .divider-vertical {
  display: none;
}

Change color of selected boxes

  • Developer: Nicole C. Engard, ByWater Solutions
  • Purpose: Change the highlight color on input boxes and selected tabs in the staff client
  • System preference edited: intranetusercss
  • Theme: prog
  • Version: 3.16+
/*make highlights on selected boxes purple*/
 
input:focus, textarea:focus { 
border-color: #CC0099 !important; 
}
 
div#header_search div.residentsearch {
border-color: -moz-use-text-color -moz-use-text-color #CC0099 !important;
}
 
#header_search ul.ui-tabs-nav li.ui-tabs-selected {
border-color: -moz-use-text-color #CC0099 #CC0099 !important;
}
 
#menu ul li.active a {
border-left: 1px solid #CC0099;
border-color: #CC0099 -moz-use-text-color #CC0099 #CC0099;
}

Remove "Return" column from table in checkout

  • Developer: John Andrews, Washoe County Library System
  • Purpose: Hides the "Return" column in checkout table in circulation.pl
  • System preference edited: IntranetUserCSS (in 'Staff client' tab)
  • Theme: Bootstrap
  • Version: 3.16.3
#issues-table thead th:nth-child(10), #issues-table tbody td:nth-child(10) {
     display: none;
}

Hide No Image Found

  • Developer: Nicole C. Engard, ByWater Solutions
  • Purpose: Hide the no image found icon
  • System preference edited: opacusercss
  • Theme: bootstrap
  • Version: 3.16+
/* Hide the no image found image */
.no-image { display: none !important; }
Personal tools