[Koha] How to change de OPAC LOGO

[Michael Kuhn]

Hi Luis and Marc

 > Please find below an example on how to replace logos using system
 > preference OPACUserCSS, without replacing files inside your Koha
 > installation.
 > I uploaded test logos to our server. Make sure you provide your own
 > logos with the same dimensions on your server.

However if you place your own logo file inside the Koha installation 
(/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images) the file may be 
deleted during the next update of Koha since Koha has the strange 
behavior not just to overwrite existing files but also to delete whole 
directories during an update (including all files inside - also files 
that you explictly saved under a new name because you changed the 
configuration).

Thus, as far as I know, it doesn't make much difference if you change 
the existing logo file or if you use your own logo file. You will have 
to restore the file after the next update either way.

Correct me if I'm wrong.

> --snip----------------
>
> /* Replace logos */
>
> #logo {
>   background: rgba(0, 0, 0, 0)
> url("http://www.koha-support.ch/test-koha-logo-opac-67-20.jpg")
> no-repeat scroll 0 center;
> }
>
> @media only screen and (max-width: 700px) {
>   #logo{
>     background: transparent
> url("http://www.koha-support.ch/test-koha-logo-opac-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;
> }
>
> --end snip----------------

I have now added Marcs solution to the Koha Community wiki because many 
if not all libraries ask for this.
* 
https://wiki.koha-community.org/wiki/HTML_%26_CSS_Library#Change_logo_and_background_color_of_masthead


=== 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

   <syntaxhighlight lang="css">
/* 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;
}
   </syntaxhighlight>


Best wishes: Michael
--
Geschäftsführer · Diplombibliothekar BBS, Informatiker eidg. Fachausweis
Admin Kuhn GmbH · Pappelstrasse 20 · 4123 Allschwil · Schweiz
T 0041 (0)61 261 55 61 · E mik at adminkuhn.ch · W www.adminkuhn.ch