How to add a style change in EXTRA.css

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 :)
 
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');
}
 
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.webp

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

Thanks for your help Brogan
 
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 ^^
 
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.webp
 
Top Bottom