[Koha] Customization of Staff Client login

[Owen Leonard]

>> I need some help on how to customize the staff client login page/replace
>> koha logo with a new one.
>
> This is achieved using the system preference OpacSmallImage

OpacSmallImage controls the display of the Koha logo in the OPAC, not
the staff client.

There is no system preference controlling the logo on the staff client
login page, but luckily the logo is displayed via CSS so it can be
easily customized through some custom CSS. These are the relevant
parts of the staff client default CSS:

#login h1 {
   background:url("../../img/koha-logo.gif") no-repeat scroll center
top transparent;
   margin-bottom:0.5em;
   margin-top:0;
}

#login h1 a {
   border-bottom:medium none;
   display:block;
   height:74px;
   text-indent:-1000px;
}

If you have access to the file system on your Koha server you can add
a custom CSS file and specify that file using the
intranetcolorstylesheet system preference. There is no analogue to the
OPACUserCSS preference in the staff client, but you can get around
this by putting this in the  intranetuserjs preference:

//]]>
</script>
<style type="text/css">
 /* inline styles */
 </style>
<script type="text/javascript">
//<![CDATA[

In the above snippet where it says /* inline styles */ we'll redeclare
the relevant properties from the styles of the login image:

//]]>
</script>
<style type="text/css">
 /* inline styles */

#login h1 {
   background:url("../../img/koha-logo.gif") no-repeat scroll center
top transparent;
}

#login h1 a {
   height:74px;
}
 </style>
<script type="text/javascript">
//<![CDATA[


I've only reproduced the properties necessary to make the change we
want. You can see that the "background:" property sets the path to the
default logo. You can change this to point to any image you want, on
the Koha server or anywhere else. Then you just need to change the
#login h1 a's "height" property to match the height of the image you
choose. For example:

//]]>
</script>
<style type="text/css">
 /* inline styles */

#login h1 {
   background:url("http://www.myacpl.org/sites/all/themes/npl/logo.png")
no-repeat scroll center top transparent;
}

#login h1 a {
   height:71px;
}
 </style>
<script type="text/javascript">
//<![CDATA[


 -- Owen

-- 
Web Developer
Athens County Public Libraries
http://www.myacpl.org