"Balasana" Theme Custom Colors

  • Author
  • #3389308


    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.


    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.



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


    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.



    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?



    For that:

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

The topic ‘"Balasana" Theme Custom Colors’ is closed to new replies.