Okay
  Public Ticket #378051
Override CSS inheretance
Closed

Comments

  • Brian started the conversation

    How can I apply a new style to the "Get Started" buttons at the bottom of the pricing columns? The button text links are picking up the color blue from the tooltip links I'm creating. I'd like the text to be white again. Thanks in advance for any guildance.

  •   Tahir replied privately
  • Brian replied

    I do use Firebug, but I don't know how to change the style to something when it's being inherited.


    The only way I could do it would be to create a button image & stick it in there. But I'd rather use CSS of course.

  •  8,849
    Tahir replied

    Hey Again!

    You can add "html body" to the css selector and use !important . Like this:

    html body .pricing-column a:link {
        color: #fff!important;
    }
    

    Thanks



    ThemeNectar Support Team 

  • Brian replied

    Thanks for that.

    So here is the CSS code I have added to modify the tooltip links on the pricing page:

    .pricing-column .interval {
    color:#888888;
    }

    .pricing-column a:link {
    color: #326987;
    text-decoration: none;
    }

    .pricing-column a:hover {
    text-decoration: underline;
    }

    If I were to also add the code you gave me it would turn all the links in the columns from dark blue to white. I'd like to leave the tooltip links blue but make the button text white again. So I need to stop the cascading of the blue text links by re-assigning the color white to the button text.

    Thanks so much for your help with this. I know all the help you give me (and everyone else here) goes way beyond what a theme designer will usually do.

  •  8,849
    Tahir replied

    Cheers


    ThemeNectar Support Team 

  • Brian replied

    Any idea how to keep all the other links on the pricing column blue, while also turning the the button text link white?

    http://leadrabbit.com/plans-pricing/

    thx

  •  8,849
    Tahir replied

    I am getting a 404 on the page .

    -T


    ThemeNectar Support Team 

  •  8,849
    Tahir replied

    Hey Again!

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .pricing-column-content .nectar-button span {
        color: #fff !important;
    }

    Thanks



    ThemeNectar Support Team 

  • Brian replied

    Thank you Tahir, but I'm still getting the underline on-hover. I tried tried a bunch of things but can't get rid of it:

    .pricing-column-content .nectar-button span {
    color: #fff !important;
    }

    .pricing-column-content .nectar-button a:hover {
    text-decoration: none;
    }

  •  8,849
    Tahir replied

    Add this :

    .pricing-column a:hover {
    text-decoration: none !important;
    }


    Thanks


    ThemeNectar Support Team 

  • Brian replied

    But I do want to keep the underline on-hover for the pricing column tooltips... I just don't want it on the "buy" button text at the bottom of each column.

    http://leadrabbit.com/online-advertising-plans/


  •  8,849
    Tahir replied


    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .pricing-column a.nectar-button:hover {
        text-decoration: none !important;
    }

    Thanks



    ThemeNectar Support Team 

  • Brian replied

    Yeah!

    Thanks