Bootstrap theme popup close "X" is invisible

Gogito

Yes, I've already filed an issue at gitHub and have seen some other people done that also but it seems this issue never gets solve or reply. So, the popup login of Bootstrap doesn't show that "X" close button probably, it's basically invisible. Can anyone provide an easy fix like changing the color of that "X" icon or something similar ?

whu606

Can you provide a link to a site, or a screenshot of the issue?

R_J

In your custom_cosmo.css you have

.close, .DismissMessage .Dismiss, a.Close, a.Delete, .token-input-delete-token {
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
}   

Deleting the color line should be enough. That is already styled in style.css

Gogito

@whu606 said:
Can you provide a link to a site, or a screenshot of the issue?

Oops, forgot: www.mmo4teen.com/forums just click on sign in and you'll "see" it.

peregrine

as opposed to the idea of adding stuff to child themes like custom_cosmo.css or or sub themes.

I would suggest adding this to your custom.css

a.Close {
color:black !important;
}

R_J

@peregrine: you are right, for sure, but I like that hint more http://vanillaforums.org/discussion/28676/increment-3-instead-of-1#latest

Otherwise, he'll end up with

style.css: 
a.Close {
  color: #000000;
} 
custom_cosmo.css:
a.Close {
  color: #ffffff;
}
custom.css:
a.Close {
  color:black !important;
}

peregrine

@R_J said:
peregrine: you are right, for sure, but I like that hint more http://vanillaforums.org/discussion/28676/increment-3-instead-of-1#latest

you mean cloning his theme and then making changes. if so that would be the best if they ensure they clone correctly.

vrijvlinder

To change the color of the pop up close x you target the span

a.close span{
color:#000;
}

peregrine

@vrijvlinder said:
To change the color of the pop up close x you target the span

a.close span{
color:#000;
}

you need to take themes into account. you didn't. regarding classes.

peregrine

for Bootstrap custom.css bootstrap uses .Close not .close

at least in the signin popup.

.Close > span {
background-color: blue !important;
}

a.Close {
color:red !important;
}

R_J

@peregrine said:
for Bootstrap custom.css bootstrap uses .Close not .close

That's why I would change custom_cosmo.css to custom_gogito.css and change the line that's causing the trouble

vrijvlinder

Yes sorry it uses Close my bad, however that theme he has active does not have the a.Close span rules. Only a.Close, but because the a.Close rule is bundled with other elements for the same rule if you change it there you will affect other things.

That is why I recommend to use a.Close span because it has no rule and could use one.

Gogito

So, after reading all of you guys' instructions, I'm lost .
Can anyone summarize which one I should follow ?

R_J

What have you tried so far?

peregrine

@Gogito said:
So, after reading all of you guys' instructions, I'm lost .
Can anyone summarize which one I should follow ?

each one of us has a different opinion how to do things. try them and see what works for you.

you have 3 options.

try one option - see it it works. if not undo it.

try next option see if it works, if not undo it.

try next option see if it works, if not undo it.

report back results on all three options.

total time for you to test adding css changes to file should be less than 3 minutes per option.

Gogito

@peregrine said:

Ok, after testing all of them, it appeared that adding this works:

a.close span{ color:#000; }

peregrine

Gogito said: Ok, after testing all of them, it appeared that adding this works:

surprising though unless we are talking different things.

signin pop up theoretically wouldn't be changed by that css in bootstrap.

but whatever works for you is what works for you.

vrijvlinder

(drumroll) And that is that... glad it worked for you as it worked for me

peregrine

.

vrijvlinder

That is because there is none. I got that from the main style.css

a.Close is the link and it should technically work to make anything inside the link that color. I am not sure why it was placed in a span. But that is why.

peregrine

exasperation.