Monday, July 25, 2022

How to Change the OPAC Interface Color and Set the OPAC Background Image (OPAC Themeing)

 

Go to : Home › Administration › System preferences › OPAC › OpacUserCSS


OpacUserCSS open a tag for body and set the background to color:


body { 
background:#228599; 
}

OpacUserCSS open a tag for body and set the background to Image:

body 
 background-image: url("http://www.lecturemaker.com/wp-content/uploads/2013/07/HP_paper.gif"); 
 }

Next try changing the standard link colour:

a, a:visited 
{
color:#3366ff; 
}

To change the link colour on mouse over.
 
/*change link hover property*/
a:hover {
color:#900C3F;
}


The footer is a good place to put copyright and contact information if you want to display that on the OPAC.

#opaccredits {
background: linear-gradient(180deg, #8b0000 0%, #990000 32%, #900C3F 64%, #8b0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b0000', endColorstr='#8b0000', GradientType=1 ); padding: 10px; color:#fff;
}

Go to : Home › Administration › System preferences › OPAC › opaccredits

<body>
<footer>
<div class="container"> <center> 
<font color="white"> Designed & Maintained by: 
<a href="https://www.youtube.com/channel/UC3wql6wxktbjRCdPMo9SXoA" target="_blank">Lib Power Tech</a></strong> 
<br> Lib Power Tech Library, <strong>Contact: <strong> libpowertech@gmail.com</strong></font></center></br>
</footer>
</body>


Finally, we will change the colour of the top header/navbar. 

#header-region, .navbar-inverse .navbar-inner { background:#5bad3f; }

You might notice that the dividers keeping the text nicely spaced on the header are still black like the header background was before we changed the colour. 

.navbar-inverse .divider-vertical
{
border-right-color: #993300;
}


The text on the header is also now unreadable so we need to change the font colour in order to make in readable.

.cartlabel, .listslabel 
 color: #2db300; 
 #members a 
 color: #8000ff; 
}


OPAC User Login / logout link a darker red.

#members a.logout
{
color:#ff3300;
}

Final Full coding Style sheet

body 
{
 background-image: url("http://www.lecturemaker.com/wp-content/uploads/2013/07/HP_paper.gif"); background-color: #F4ECF7; 
}
 a, a:visited { color:#3366ff; 
 } 
 /*change link hover property*/ a:hover 
color:#900C3F; 
 #opaccredits 
background: linear-gradient(180deg, #8b0000 0%, #990000 32%, #900C3F 64%, #8b0000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8b0000', endColorstr='#8b0000', GradientType=1 ); padding: 10px; color:#fff; 
 #header-region, .navbar-inverse .navbar-inner 
background:#5bad3f; 
 .navbar-inverse .divider-vertical 
{
border-right-color: #993300; 
 } 
 .cartlabel, .listslabel 
 color: #2db300; 
 #members a 
{
 color: #8000ff; 
}
 #members a.logout 
color:#ff3300; 

No comments:

Post a Comment