HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

Bootstrap theme popup close "X" is invisible

This discussion is related to the Bootstrap addon.

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 ?

«1

Comments

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

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

    hgtonight
  • R_JR_J Ex-Fanboy Munich Moderator

    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


    hgtonight
  • @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.

  • 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;
    }
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • R_JR_J Ex-Fanboy Munich Moderator

    @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;
    }
    


  • peregrineperegrine MVP
    edited December 2014

    @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    R_J
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

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

    a.close span{
    color:#000;
    }
    
    peregrine
  • peregrineperegrine MVP
    edited December 2014

    @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited December 2014

    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;
    }
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • R_JR_J Ex-Fanboy Munich Moderator

    @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 ;)


    peregrine
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

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

  • R_JR_J Ex-Fanboy Munich Moderator

    What have you tried so far?


  • peregrineperegrine MVP
    edited December 2014

    @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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • @peregrine said:

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

    a.close span{ color:#000; }

    vrijvlinder
  • peregrineperegrine MVP
    edited December 2014

    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.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

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

  • peregrineperegrine MVP
    edited December 2014

    .

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited December 2014

    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.

  • peregrineperegrine MVP
    edited December 2014

    exasperation.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    vrijvlinder
Sign In or Register to comment.