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

XF 1.2 How to proper add css style to images

Discussion in 'Styling and Customization Questions' started by Kazaam, Feb 21, 2014.

  1. Kazaam

    Kazaam Member

    Hello,

    I just tried to add some extra css style to every images of every messages. Before to do this, I could enlarge big images by clicking on them - a little popup appeared, but now I added some extra css style I can't enlarge them anymore, the popup doesn't appear.

    When I remove this extra css style, the enlarging feature works. I don't understand what's wrong.

    What I added in EXTRA.css:
    Code:
    .messageText img {
        max-width: 786px !important;
        -moz-box-shadow: 2px 2px 10px 0px #141414;
        -webkit-box-shadow: 2px 2px 10px 0px #141414;
        -o-box-shadow: 2px 2px 10px 0px #141414;
        box-shadow: 2px 2px 10px 0px #141414;
        filter:progid:DXImageTransform.Microsoft.Shadow(color=#141414, Direction=134, Strength=10);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;   
    }
    Example: http://gamepunchers.net/threads/propositions-daméliorations.619/

    Is there a proper way to add some style to keep this feature?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You have a max width of 786px set, which is narrower than the post width.

    Additionally, the lightbox is only triggered by attachments, not embedded images.

    Other than that, you have attachments restricted for guests so it's difficult to see what the issue is.
     
  3. Kazaam

    Kazaam Member

    Yes, I put this max width to keep the shadow effect on the right of the images. If the image is scaled to the post width, it won't shows :(

    Is there an other way to trigger the lightbox?

    Guests can see attachements now, sorry :p
     
  4. katsulynx

    katsulynx Well-Known Member

  5. Kazaam

    Kazaam Member

    Ah! Good to know, thank you.
     

Share This Page