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; 

Post a Comment

7 Comments

  1. Replies
    1. https://www.youtube.com/channel/UC3wql6wxktbjRCdPMo9SXoA?sub_confirmation=1

      Delete
  2. Everyone wants to make their photos the most beautiful. Somebody wants to auto cut his image. Someone wants to change background of their photo or cut out image.
    MasterLogix team make the best tool for change background & background removerchange background in android app.#changebackground #backgroundremove #backgroundtransparent
    Remove Image Background Make Transparent Image best app for background eraser and change background to make your photo more stylish and attractive with this cut out image

    ReplyDelete


  3. We are added much functionality in this Remove object from photo and Remove BG from photo app like remover, clone stamp, background eraser, quick remover, transparent background and cloth remover.

    ReplyDelete
  4. Great. Want to get gifs from Pinterest? Lets visitPinterest GIF Downloader

    ReplyDelete