1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo image drop shadows

Discussion in 'Papers' started by Stéphane Lenclud, Mar 20, 2017.

  1. Stéphane Lenclud

    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.
    Code (CSS):
    1. /* Decorate our images with drop shadows */
    2. .bbCodeImage {
    3.     border-radius: 4px;
    4.     box-shadow: 7px 7px 5px 0 rgba(30,30,30,.50);
    5.     margin: 5px 10px 5px 5px;
    6. }
    7.  
    8. /* Have a different drop shadow for when we are hovering our images*/
    9. .bbCodeImage:hover {
    10.     border-radius: 4px;
    11.     box-shadow: 7px 7px 5px 0 rgba(10,10,10,.50);
    12.     margin: 5px 10px 5px 5px;
    13. }
    14.  
    15. /* Remove the ugly white box that's also used for links from images hover.*/
    16. /* Not sure what's the meaning of that LbTrigger class but it looks like it works.*/
    17. .LbTrigger:hover {
    18. background-color: rgba(0,0,0,.0) !important;
    19. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    20. }
    21.  
    22. /* Make posts links bold */
    23. .externalLink {
    24. font-weight:bold !important;
    25. }
    26.  
    27. .internalLink {
    28. font-weight:bold !important;
    29. }
    30.  
    31. /* Don't show ugly white box when hovering links */
    32. .externalLink:hover {
    33. background-color: rgba(0,0,0,.0) !important;
    34. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    35. }
    36.  
    37. .internalLink:hover {
    38. background-color: rgba(0,0,0,.0) !important;
    39. box-shadow: 0px 0px 0px 0 rgba(0,0,0,.0) !important;
    40. }
    Credit goes to high at MediaPortal.
     
    Last edited: Mar 22, 2017

Share This Page