I wanted to add a neat drop shadow to images and remove that ugly white box when hovering links and images.
Also added boldness to links while I was there. Just add the following to your EXTRAS.CSS template.
Credit goes to high at MediaPortal.
Also added boldness to links while I was there. Just add the following to your EXTRAS.CSS template.
CSS:
/* Decorate our images with drop shadows */
.bbCodeImage {
border-radius: 4px;
box-shadow: 7px 7px 5px 0 rgba(30,30,30,.50);
margin: 5px 10px 5px 5px;
}
/* Have a different drop shadow for when we are hovering our images*/
.bbCodeImage:hover {
border-radius: 4px;
box-shadow: 7px 7px 5px 0 rgba(10,10,10,.50);
margin: 5px 10px 5px 5px;
}
/* Remove the ugly white box that's also used for links from images hover.*/
/* Not sure what's the meaning of that LbTrigger class but it looks like it works.*/
.LbTrigger:hover {
background-color: rgba(0,0,0,.0) !important;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
}
/* Make posts links bold */
.externalLink {
font-weight:bold !important;
}
.internalLink {
font-weight:bold !important;
}
/* Don't show ugly white box when hovering links */
.externalLink:hover {
background-color: rgba(0,0,0,.0) !important;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
}
.internalLink:hover {
background-color: rgba(0,0,0,.0) !important;
box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
}Credit goes to high at MediaPortal.
Last edited: