Go to : Home › Administration › System preferences › OPAC › OpacUserCSS
body {
background:#228599;
}
OpacUserCSS open a tag for body and set the background to Image:
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;
}
/*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.
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;
}
{
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;
}
#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;
6 Comments
nicely done
ReplyDeletehttps://www.youtube.com/channel/UC3wql6wxktbjRCdPMo9SXoA?sub_confirmation=1
Deletethank you
ReplyDelete
ReplyDeleteWe 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.
Great. Want to get gifs from Pinterest? Lets visitPinterest GIF Downloader
ReplyDeleteNice blog. Thank you for sharing.
ReplyDeleteMobile App Development Company in Gurgaon