XenForo image drop shadows

Stéphane Lenclud

Founder
Staff member
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.
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:
Top