[Koha] Customizing OPAC

Martin Renvoize martin.renvoize at ptfs-europe.com
Wed May 4 03:21:52 NZST 2011

Hi Daniel,

Your probably best off having a quick read up on css (there's some good
tutorials at http://www.w3schools.com/css/default.asp for example)

Additionally, I personally wouldn't touch the styling from the back end (i.e
i wouldn't modify opac.css). Although it can be done that way, when you come
to an upgrade you'll have to re-apply those changes as this is a "system"
file.  Rather, I'd add a few specific CSS rules to the OPACUserCSS box
Home › Administration › System Preferences

It's located within the OPAC tab.

A quick and dirty guide would be:

1. Use an element inspector (I like the default one inside the chrome
browser) to work out what the ID/Class of the element you want to change.
2. Create a new rule for said element within OPACUserCSS
3. Refresh the OPAC and see what you think.
4. Iterate until happy.

Example; To change the colour of "Search" you need a rule like:

#opac-main-search label {
    color: CC3366 ;

This would make the "Search" text a gastly pink color (Color codes are
available http://www.w3schools.com/html/html_colors.asp)


Martin Renvoize
Software Developer, PTFS Europe Ltd
Content Management and Library Solutions
martin.renvoize at ptfs-europe.com
skype: Martin Renvoize

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.katipo.co.nz/pipermail/koha/attachments/20110503/3fd15640/attachment.htm 

More information about the Koha mailing list