Changing button and text colours

  • Resolved sofiamlepp26725

    (@sofiamlepp26725)


    3 years, 9 months ago

    I’m wondering if there is a way to change the the theme’s original light pink. First I want to change the tag buttons at the bottom of a blog post from pink when they’re hovered over. Second is the blog post title (on my blog page) which is also pink when hovered over. Third is the “send message” button after a blog post: I want to change that from the pink as well. I’ve been able to change a few of the text colours using the simple custom CSS plugin, but is there a way to basically get rid of the rest of the light pink?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi,

    Thank you for reaching out to us. I am happy to help with your queries.

    Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
.main-navigation a:hover, .main-navigation a:focus, .main-navigation a:active, .footer-navigation a:hover, .footer-navigation a:focus, .footer-navigation a:active, .header-top .social-navigation a:hover, .entry-meta a:hover, .main-navigation ul li a:hover, .secondary-navigation .site-search_submit .fas:hover, .wc-header-cart__wrap .wc-header-cart__link:hover, .header-top .social-navigation a:hover, .entry-meta .author:hover, .entry-meta .author:focus, .byline .author:hover, .byline .author:focus, .entry-meta .author a.url:hover, .entry-meta .author a.url:focus, .entry-meta .posted-on a:hover, .entry-meta .posted-on a:focus, .site-info a:hover, .site-info a:focus, .site-info a:visited:hover {
  color: #fff000;
}

/** Button **/

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 {
	background: #330000;
	color: #fff;
	border: 1px solid #330000;
}

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: 1px solid #fff000;
	background: #fff;
	color: #fff000;
}

    Regards,
    Kharis

    Thread Starter sofiamlepp26725

    (@sofiamlepp26725)

    Hi thank you so much for your help! That code worked great. There are still two things that are pink however, as I’ve added the links here: blog post title from main blog page: and the category buttons at the bottom of a blog post: https://sofia-mae.com/the-hardest-is-the-beginning/

    Thread Starter sofiamlepp26725

    (@sofiamlepp26725)

    Also the text at the bottom of a blog post where it says who’s logged in is still bright pink: https://sofia-mae.com/the-hardest-is-the-beginning/

    Hi,

    Try adding this CSS code: 

    
.posted-on a:hover,
.site-main a:hover,
.ca-related-post a:hover,
  color: #000000 !important;
}

.entry-footer .single-post_tags a:hover {
  background-color: #900202;
  color: #fff !important;
}

    Regards,
    Kharis

    Thread Starter sofiamlepp26725

    (@sofiamlepp26725)

    Hi and thanks for that additional CSS, however when I ran it through nothing had changed, the buttons at the bottom of this page: https://sofia-mae.com/the-truth-the-full-truth-nothing-but-the-truth/ and the blog post titles on this one: https://sofia-mae.com/blog/ are still bright pink. If it is not possible to change the color, then that is ok I can work around it.

    Hi,

    Sorry for I wrote you too soon and the last code I shared contains an error.

    Please replace it with 

    
.posted-on a:hover,
.site-main a:hover,
.ca-related-post a:hover {
  color: #000000 !important;
}

.entry-footer .single-post_tags a:hover {
  background-color: #900202;
  color: #fff !important;
}

    Regards,
    Kharis

    Thread Starter sofiamlepp26725

    (@sofiamlepp26725)

    Thank you for that clarification and help, the buttons are now changed.

    You’re welcome!

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Changing button and text colours’ is closed to new replies.