HTML & CSS Library

From Koha Wiki
Jump to navigation Jump to search

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

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 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;
}

Remove the Cart and corresponding links in the OPAC

  • Developer: Lucas Gass, ByWater Solutions
  • Purpose: Remove the Cart and corresponding links in the OPAC
  • System preference edited: opacusercss
  • Theme: Bootstrap
  • Version: Developed on 19.11
/*Removes the cart icon, label, menu, and the links in the OPAC search results and bib records*/
.addtocart, #carticon, #cartlabel, #cartmenulink {
	display: 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; }


Make hold options visible all the time

  • Developer: Caroline Cyr La Rose, inLibro
  • Purpose: Make hold options (hold not needed after, hold notes, item-level holds) visible all the time without having to click on "See more options"
  • System preference edited: OPACUserCSS
  • Theme: Bootstrap
  • Version: Developped on 18.05
/*Show holds options all the time */
.toggle-hold-options {
    display : none !important;
}
.hold-options {
    display : block !important;
}

Red OPAC note in patron file

  • Developer: Caroline Cyr La Rose, inLibro
  • Purpose: When the patron has an OPAC note, it is displayed in red in their file
  • System preference edited: IntranetUserCSS
  • Theme: Prog
  • Version: Developped on 19.05
li#patron-opacnote {
  color: #c00;
  font-weight: bold;
}

What it looks like

Change intranet background colour

  • Developer: Caroline Cyr La Rose, inLibro, based on Lib Power Tech blog post
  • Purpose: Change the staff interface background colour (for a test environment for example)
  • System preference edited: IntranetUserCSS
  • Theme: Prog
  • Version: 20.05
body {
background: #E7FAF9;
}

Change Navbar Items and Search on Home page to a different color

  • Developer: Doug Dearden
  • Purpose: Change links and search on home page from green to a different color
  • System preference edited: OPACuserCSS
  • Theme: Bootstrap
  • Version: Developed on 19.11


/*change search button and box to red*/
.mastheadsearch .btn-primary,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.btn-primary:visited{
background-color:#ff0000;
background-image:linear-gradient(180deg,#ff0000,#ff0000)
}
input[type=text]:focus{
border-color:#ff0000
}

/*change navbar items to red */
.navbar .nav li.dropdown>a:focus .caret,.navbar .nav li.dropdown>a:hover .caret{
border-bottom-color:#ff0000;border-top-color:#ff0000
}  
.navbar .navbar-inner .nav li>a:focus,.navbar-inverse .navbar-inner li>a:hover{
 color:#ff0000
} 
.navbar .navbar-inner .nav li.dropdown>a:focus .caret,.navbar-inverse .navbar-inner li.dropdown>a:hover .caret{
border-bottom-color:#ff0000;border-top-color:#ff0000
} 
.navbar .navbar-inner .nav li.dropdown.open>.dropdown-toggle{
background-color:transparent;color:#ff0000
}
.navbar .navbar-inner .nav li.dropdown.open>.dropdown-toggle .caret,.navbar-inverse .navbar-inner li.dropdown.open>.dropdown-toggle .caret:hover{
border-bottom-color:#ff0000;border-top-color:#ff0000
} 
#basketcount span{
background-color:#ff0000
}

Always "Show more options" when placing a hold

  • Developer: Lucas Gass, ByWater Solutions
  • Purpose: Make the expiration date and item-specific options always show
  • System preference edited: OPACuserCSS
  • Version: Developed on 20.05


#opac-holds .hold-options {
	display: block !important;
}
#opac-holds .toggle-hold-options {
	display: none !important;
}
#opac-holds ul li label {
	line-height: unset;
}

Changes background of the news area for readability


/* -Home- Changes background of the news area (makes it easier to read) */
#area-news, #area-pending {
    background-color: #E0ECF8;
}
Retrieved from "https://wiki.koha-community.org/w/index.php?title=HTML_%26_CSS_Library&oldid=29393"