"Balasana" Theme Custom Colors

  • Author
    Posts
  • #3389308

    washpcc
    Member

    I’d like to change the green accent color on the template with a color that reflects my branding. How do I change all the default colors? Would this be accomplished through custom CSS?

    Thank you.

    The blog I need help with is firstchoicewashington.com.

    #3389634

    Hi there!

    Some themes allow you to customize the colors directly from the customizer. With Balasana, you’re right, you’ll need some custom CSS.

    The color of the buttons can be changed directly in the editor, it seems that you have already noticed that :) As for the rest of the colors, what is it exactly that you’d like to change? The color of the text when you hover over it?

    Please also note that with your subscription you have access to Live Chat via https://wordpress.com/help/contact.

    #3390271

    washpcc
    Member

    Yes, primarily link mouseover color as well as text selection color. Any where the green color appears, I’d like to change it.

    #3390395

    Sure thing!

    This is the CSS to change the menu hove color. You’ll see the #color is green. That code needs updated to whatever hex code/corresponding color you want to use.

    .main-navigation a:hover {
        color: #19744c;
    }

    For the buttons, do you want to continue using the gradient. Instead of light green -> dark green you can use any combination with in the gradient code.

    :root .has-electric-grass-gradient-background {
        background: linear-gradient(135deg,#caf880,#71ce7e);
    }

    Otherwise, we can help you display a solid colored button. Let us know if that’s what you’re after.

    #3390471

    washpcc
    Member

    Thank you so much for your help; the code changed the text color of the links at the top exactly the way I needed it to. But the links at the bottom aren’t different at all. I can find the name of this element in the inspector. Would you be able to show me the name of this element as well?

    #3390483

    macmanx
    Staff

    For that:

    #menu-footer-menu a:hover {
        color: #19744c;
    }

You must be logged in to reply to this topic.