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

How to add a style change in EXTRA.css

Discussion in 'Styling and Customization Questions' started by Hilmer, Apr 22, 2012.

  1. Hilmer

    Hilmer Active Member

    Hi guys
    I want to remove the black border in the Lightbox.
    I found it in lightbox.css:

    .lightBox .imageContainer
    {
    clear: both;
    position: relative;
    min-height: 40px;
    border: 1px solid black;
    border-width: 1px 0;
    text-align: center;
    background: transparent url('@imagePath/xenforo/gradients/lightbox-pinstripes.png');
    }
    When I change to 0px; everything works great.
    As I understand, it is better to make changes in EXTRA.css so I added this line but it does not take effect:
    (I also tried without the !important)
    .lightBox .imageContainer
    {
    clear: both;
    position: relative;
    min-height: 40px;
    border: 0px !important;
    border-width: 1px 0;
    text-align: center;
    background: transparent url('@imagePath/xenforo/gradients/lightbox-pinstripes.png');
    }
    Any help would be great :)
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Code:
    .lightBox .imageContainer {
    border: none !important;
    }
     
    Hilmer likes this.
  3. Hilmer

    Hilmer Active Member

    Thats strange Brogan

    I can't get it to work.

    I even tried this without any effect:

    .lightBox .imageContainer
    {
    clear: both;
    position: relative;
    min-height: 40px;
    border: 5px red !important;
    border-width: 1px 0;
    text-align: center;
    background: transparent url('@imagePath/xenforo/gradients/lightbox-pinstripes.png');
    }
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Which border are you referring to?
    Can you do a screenshot?

    Is this a default style?
     
    Hilmer likes this.
  5. Hilmer

    Hilmer Active Member

    It is in the .lightBox .imageContainer

    When I change it in this file I can add and remove the borders, but when I add the code in the EXTRA.css nothing happens.
    When I change it in the Lightbox.css it affects the XFR User album as well, so this is perfect.
    Just think it would be better to do it in the EXTRA.css

    .lightBox .imageContainer
    {
    clear: both;
    position: relative;
    min-height: 40px;
    border: none !important;
    border-width: 1px 0;
    text-align: center;
    background: transparent url('@imagePath/xenforo/gradients/lightbox-pinstripes.png');
    }

    By the way this is the lines.

    css.jpg

    If you should know I would like to edit the white border around the avatar as well.

    Thanks for your help Brogan
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    It works on the default style so it's either an issue with your style or an add-on.
     
  7. Divvens

    Divvens Well-Known Member

    Check if your previous extra.css edits are closed properly with the } sign, I had a issue where I missed one of those sneaky closing and no edit worked (obviously how css works).

    For the avatar border you can remove it via
    Admin CP -> Styles -> Style Properties -> General -> Avatar

    The options for border around the avatar are located there ^^
     
  8. Hilmer

    Hilmer Active Member

    Well - I will give up on that thing. It works when I edit the template, so no big deal.

    Next chalange is the white arrow and the white bar ??

    Anyone who can help me to change the color of the bar and to remove the arrow?

    Thanks for the help until now.

    Style.jpg
     

Share This Page