Top nav & side nave social media pins hover and color change

Hello,

I love the Cali theme. It’s so sleek. I’d really like to change the hover color on the social media icons on the top nav and side nav from pink to #cc5500. I would also like my widget sidebar subscribe button to also change from pink to #cc5500.

Thank you for your help!
Leisa

Hi Leisa,

Thank you for using our theme and showing your love. We really appreciate it.

We can suggest you with some custom CSS code to address your queries. But we need to check your site directly for specific configuration may require different CSS selector. So I request you sharing your website URL here as a reply to this response.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for your response. https://indieitpress.com

I appreciate your help with this.

Best to you,
Leisa

Hi Leisa,

Thank you for sharing the link.

Try adding the below CSS coe to Appearance > Customize > Additional CSS from dashboard.

    .main-navigation_wrap .social-navigation.social-links a:hover {
      color: #cc5500 !important;
    }

    .jetpack_subscription_widget button {
      background: #cc5500;
      border: 1px solid #cc5500;
    }

    .jetpack_subscription_widget button:hover {
      color: #cc5500;
      background-color: transparent;
    }

Regards,
Kharis
aThemes Support

This worked. Thank you!

Can I bug you one more time to change the hover color to #cc5500 on the top nav search magnifier & shopping cart, plus the sidebar social media widget all from the hover pink to #cc5500?

Thank you!

Hello there,

Thank you for getting back.

Try adding this CSS code:

    .site-search__wrap--header .site-search_submit:hover i,
    .wc-header-cart__link:hover,
    .widget-area .widget a:hover {
      color: #cc5500 !important;
    }

Regards,
Kharis
aThemes Support

Your help is really appreciated. I was able to change the cart color in woocommerce. If I send you a link to my shop page can you send code to change the sale button, amount, and add to cart button also in #cc5500?

Here is the link: https://indieitpress.com/shop/

Thank you for your assistance.
Leisa

Hi Leisa,

Try adding this CSS code:

    .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce div.product .stock, .woocommerce ul.products li.product .price, #add_payment_method .cart-collaterals .cart_totals .discount td, .woocommerce-cart .cart-collaterals .cart_totals .discount td, .woocommerce-checkout .cart-collaterals .cart_totals .discount td {
      color: #cc5500;
    }

    .ca-button--alt:hover, .comment-edit-link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce-mini-cart__buttons a.button:hover {
      border-color: #cc5500;
      background-color: #cc5500;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you for your assistance. That worked for the add to cart and the price. The sale button is still pink on that page. Is there a way to change the pink sale buttons? https://indieitpress.com/shop/

On the woocommerce products pages, can the add to cart button be changed as well? There will be many of those. Here is an example link:https://indieitpress.com/product/mastering-self-marketing-and-social-media/

Sale buttons are still pink on both shop and products pages? I know there will be a number of product pages.

I appreciate your assistance,
Leisa

Hi Leisa,

Try adding this CSS code:

    .woocommerce span.onsale {
      background-color: #cc5500;
    }

    button, input[type="button"], input[type="reset"], input[type="submit"], .ca-button, .ca-button:visited, .comment-reply-link, .comment-reply-link:visited, .comment-form input[type="submit"], .ca-contact-form button, .ca-contact-form input[type="button"], .ca-contact-form input[type="reset"], .ca-contact-form input[type="submit"], .wpcf7-form-control.wpcf7-submit, .wpcf7-form-control.wpcf7-submit:visited, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce a.button.alt:visited, .woocommerce button.button.alt, .woocommerce input.button.alt {
      border-color: #cc5500;
      background-color: #cc5500;  
    }

    button:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover,
    .ca-button:hover,
    .comment-reply-link:hover,
    .ca-button--big:hover,
    .comment-form input[type="submit"]:hover,
    .ca-contact-form button:hover,
    .ca-contact-form input[type="button"]:hover,
    .ca-contact-form input[type="reset"]:hover,
    .ca-contact-form input[type="submit"]:hover,
    .wpcf7-form-control.wpcf7-submit:hover,
    .woocommerce #respond input#submit.alt:hover,
    .woocommerce a.button.alt:hover,
    .woocommerce button.button.alt:hover,
    .woocommerce input.button.alt:hover {
      border-color: #cc5500;
      color: #cc5500;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

Thank you so much. It worked! You’ve been great through all of this and I appreciate your assistance.
Your support is excellent.

Thank you again,
Leisa

1 Like

You’re welcome Leisa!

I am glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support