Hi, I am using KOHA 16.11.06.000 Where could i change the OPAC LOGO. We want to use our LOGO Thanks -- *Luis Moisés Rojas P.*
Hi Luis
I am using KOHA 16.11.06.000 Where could i change the OPAC LOGO. We want to use our LOGO
Easiest way is probably to save and replace the file "/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images/koha-logo-navbar.png" with your own logo file. To avoid problems use the same file name and the same picture size (67 x 20) - like this everything will work as usual, also in the mobile view. In fact there are many different ways to do this. If you need to use a logo of another size, to change surrounding colors etc. etc. you will probably have to learn some HTML / CSS / Javascript. For example you could insert the following code into Koha system preference "OPACUserCSS" but I wouldn't really recommend it. However, not only the normal view looks good but also the mobile view which behaves different. #logo { background-image: url("http://yourdomain.xx/yourlogo.png"); background-size: 27px 31px; border: 2px solid #111111; width: 40%; } Hope this helps. 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@adminkuhn.ch · W www.adminkuhn.ch
Hi Luis, I wouldn't recommend replacing the file as it will be overwritten with your next update. Most people keep the small Koha logo I think and place their institution's logo using the OpacHeader system preference. OpacUserCSS is also a common way to change things around. Hope this helps, Katrin On 25.04.2017 17:25, Michael Kuhn wrote:
Hi Luis
I am using KOHA 16.11.06.000 Where could i change the OPAC LOGO. We want to use our LOGO
Easiest way is probably to save and replace the file "/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images/koha-logo-navbar.png" with your own logo file. To avoid problems use the same file name and the same picture size (67 x 20) - like this everything will work as usual, also in the mobile view.
In fact there are many different ways to do this.
If you need to use a logo of another size, to change surrounding colors etc. etc. you will probably have to learn some HTML / CSS / Javascript.
For example you could insert the following code into Koha system preference "OPACUserCSS" but I wouldn't really recommend it. However, not only the normal view looks good but also the mobile view which behaves different.
#logo { background-image: url("http://yourdomain.xx/yourlogo.png"); background-size: 27px 31px; border: 2px solid #111111; width: 40%; }
Hope this helps.
Best wishes: Michael
For example you could insert the following code into Koha system preference "OPACUserCSS" but I wouldn't really recommend it.
The only disadvantages that I know of to using OPACUserCSS in this case are: 1. Like any other use of OPACUserCSS, the CSS isn't cached by the browser. The affect here is surely minimal. 2. If your OPAC is running under SSL (which it should be) and the image is served over a non-secure connection the browser will give mixed-content warnings. At my library we have used OPACUserCSS for years without any trouble. -- Owne -- Web Developer Athens County Public Libraries http://www.myacpl.org
The only scenario I imagine OpacUserCSS is not a good option, is if you are recompiling your bootstrap.min.css, and caching won't be effective. El mar., 25 abr. 2017 a las 12:35, Owen Leonard (<oleonard@myacpl.org>) escribió:
For example you could insert the following code into Koha system preference "OPACUserCSS" but I wouldn't really recommend it.
The only disadvantages that I know of to using OPACUserCSS in this case are:
1. Like any other use of OPACUserCSS, the CSS isn't cached by the browser. The affect here is surely minimal. 2. If your OPAC is running under SSL (which it should be) and the image is served over a non-secure connection the browser will give mixed-content warnings.
At my library we have used OPACUserCSS for years without any trouble.
-- Owne
-- Web Developer Athens County Public Libraries http://www.myacpl.org _______________________________________________ Koha mailing list http://koha-community.org Koha@lists.katipo.co.nz https://lists.katipo.co.nz/mailman/listinfo/koha
-- Tomás Cohen Arazi Theke Solutions (https://theke.io <http://theke.io/>) ✆ +54 9351 3513384 GPG: B2F3C15F
Hi
The only scenario I imagine OpacUserCSS is not a good option, is if you are recompiling your bootstrap.min.css, and caching won't be effective.
From my experience this depends on the size of the used picture. For example, inserting the following code #logo { background-image: url("http://bibliothek.phsh.ch/opac-tmpl/bootstrap/images/phsh_koha_236x36.png"); margin: 2px 32px 2px 2px; width: 236px; } will lead to very unsatisfying results in the normal view of the OPAC. * see http://koha.adminkuhn.ch/ in normal view and it will lead to an ugly result in the mobile view * see http://koha.adminkuhn.ch/ by decreasing the window size until the webbrowser thinks the device is mobile Of course these problems can be solved, but not without getting deeper into CSS. Also if you use a logo as the shown one you will most probably also want to change the masthead color which isn't the easiest thing since in fact the masthead consists of many different elements. Of course, also this can be done. If this isn't as I describe it I'm eager to learn (unfortunately documentation about the change of the logo is sparse and the often mentioned system preference "opacsmallimage" doesn't exist anymore). 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@adminkuhn.ch · W www.adminkuhn.ch
Well, I have renamed the koha file: koha-logo-navbar, then i copied my logo with the same name in the following folder: http://catalogo.bijrd.gob.do/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/... Nothing happens, The new file is 505K, but the really file es 1401k. I have the same in a CSS. Could be the file length? On Tue, Apr 25, 2017 at 11:57 AM, Michael Kuhn <mik@adminkuhn.ch> wrote:
Hi
The only scenario I imagine OpacUserCSS is not a good option, is if you are
recompiling your bootstrap.min.css, and caching won't be effective.
From my experience this depends on the size of the used picture.
For example, inserting the following code
#logo { background-image: url("http://bibliothek.phsh.ch /opac-tmpl/bootstrap/images/phsh_koha_236x36.png"); margin: 2px 32px 2px 2px; width: 236px; }
will lead to very unsatisfying results in the normal view of the OPAC. * see http://koha.adminkuhn.ch/ in normal view
and it will lead to an ugly result in the mobile view * see http://koha.adminkuhn.ch/ by decreasing the window size until the webbrowser thinks the device is mobile
Of course these problems can be solved, but not without getting deeper into CSS. Also if you use a logo as the shown one you will most probably also want to change the masthead color which isn't the easiest thing since in fact the masthead consists of many different elements. Of course, also this can be done.
If this isn't as I describe it I'm eager to learn (unfortunately documentation about the change of the logo is sparse and the often mentioned system preference "opacsmallimage" doesn't exist anymore).
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@adminkuhn.ch · W www.adminkuhn.ch _______________________________________________ Koha mailing list http://koha-community.org Koha@lists.katipo.co.nz https://lists.katipo.co.nz/mailman/listinfo/koha
-- *Luis Moisés Rojas P.*
Hi Luis
I have renamed the koha file: koha-logo-navbar, then i copied my logo with the same name in the following folder:
http://catalogo.bijrd.gob.do/usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/...
There is no server available named "catalogo.bijrd.gob.do" that I can reach. And the given URL is wrong. $ ping catalogo.bijrd.gob.do ping: unknown host catalogo.bijrd.gob.do However, if you really go into that directory, first save the original file, then put yours instead: # cd /usr/share/koha/opac/htdocs/opac-tmpl/bootstrap/images # mv koha-logo-navbar.png koha-logo-navbar.png-ORIG # mv /tmp/yourlogo.png koha-logo-navbar.png Now you should see just the new logo when calling this URL: http://catalogo.bijrd.gob.do/opac-tmpl/bootstrap/images/koha-logo-navbar.png But as said, your server "catalogo.bijrd.gob.do" has to be available first! If you then access the OPAC via http://catalogo.bijrd.gob.do/ and can't see the logo it may be because of the webbrowers cache: Empty it using CTRL+F5
Nothing happens, The new file is 505K, but the really file es 1401k.
I have the same in a CSS. Could be the file length?
The original file is 1401 bytes, not 1401k. Hope that helps. 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@adminkuhn.ch · W www.adminkuhn.ch
Hi Luis, 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. Kind regards Marc --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---------------- Am 25.04.2017 um 16:57 schrieb Luis Moises Rojas:
Hi, I am using KOHA 16.11.06.000 Where could i change the OPAC LOGO. We want to use our LOGO
Thanks
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_ba... === 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@adminkuhn.ch · W www.adminkuhn.ch
Hi Michael, The files I use in the example are NOT part of a Koha installation, they are served by our web server www.koha-support.ch So they won't be overwritten with the next Koha update. IMO it is not the best idea to manipulate files inside a Koha installation, anyway. Marc Am 26.04.2017 um 09:26 schrieb 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_ba...
=== 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@adminkuhn.ch · W www.adminkuhn.ch _______________________________________________ Koha mailing list http://koha-community.org Koha@lists.katipo.co.nz https://lists.katipo.co.nz/mailman/listinfo/koha
Hi Marc
The files I use in the example are NOT part of a Koha installation, they are served by our web server www.koha-support.ch
So they won't be overwritten with the next Koha update.
Yes, I saw that, but of course a given library cannot use your files but will have to use their own logo files - and thus they will be overwritten (except if you host your picture files outside of the Koha installation or even on another host). That's why I replaced your files in the Koha Community wiki (https://wiki.koha-community.org/wiki/HTML_%26_CSS_Library#Change_logo_and_ba...) like this: #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"); } }
IMO it is not the best idea to manipulate files inside a Koha installation, anyway.
I absolutely agree, it's not the best idea. But it's one possibility how to do it. 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@adminkuhn.ch · W www.adminkuhn.ch
Hi Michael
Yes, I saw that, but of course a given library cannot use your files but will have to use their own logo files - and thus they will be overwritten (except if you host your picture files outside of the Koha installation or even on another host). Of course. The files are test files, for illustration, not meant to be used by other libraries. That's why I replaced your files in the Koha Community wiki (https://wiki.koha-community.org/wiki/HTML_%26_CSS_Library#Change_logo_and_ba...) like this: (...) Maybe it is a good idea to ask next time - I was about to prepare my own (neutral) example for the wiki.
Kind regards Marc Am 26.04.2017 um 14:15 schrieb Michael Kuhn:
Hi Marc
The files I use in the example are NOT part of a Koha installation, they are served by our web server www.koha-support.ch
So they won't be overwritten with the next Koha update.
Yes, I saw that, but of course a given library cannot use your files but will have to use their own logo files - and thus they will be overwritten (except if you host your picture files outside of the Koha installation or even on another host).
That's why I replaced your files in the Koha Community wiki (https://wiki.koha-community.org/wiki/HTML_%26_CSS_Library#Change_logo_and_ba...) like this:
#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"); } }
IMO it is not the best idea to manipulate files inside a Koha installation, anyway.
I absolutely agree, it's not the best idea. But it's one possibility how to do it.
Best wishes: Michael
participants (6)
-
Katrin -
Luis Moises Rojas -
Marc Véron -
Michael Kuhn -
Owen Leonard -
Tomas Cohen Arazi