change button colours

  • Resolved sofiaminetto

    (@sofiaminetto)


    3 years, 8 months ago

    hi,

    I am migrating my current website to Shoreditch theme.
    So far so good, but I would like to change the colour of buttons, both the regular and the minimal one.

    Currently the regular button has the default blue background with white text; when hovering the text becomes blue and the background white. I would like to change the blue to our project identity colour: #49a343

    Same goes for the minimal button: the text and border are currently blue, and when hovering the background becomes blue and text white. Again, I’d like the blue to be replaced with #49a343

    Could you help me with the CSS? I tried something but the hovering effect does not change, since I am not that advanced in my CSS knowledge. So I ended up deleting the CSS change, waiting for your input if possible.
    Sorry I cannot share the link to the website as it is password protected.

    Cheers!

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

  • Hi @sofiaminetto, that color of blue appears several times in the theme’s CSS: as background colors, buttons in different places, other types of buttons, etc. Are you hoping to replace all of them for the green color, or just in the cases you’ve mentioned?

    I’m going to go ahead and give you CSS for all of it, then you can remove any parts of it you don’t want to be green:

    .button,
		.button.minimal:focus,
		.button.minimal:hover,
		.featured-content .flex-control-paging .flex-active,
		.featured-content .flex-control-paging a:hover,
		.featured-content .hentry.has-post-thumbnail .button,
		.featured-content .hentry.has-post-thumbnail .button.minimal:focus,
		.featured-content .hentry.has-post-thumbnail .button.minimal:hover,
		.main-navigation .button.minimal a:focus,
		.page-template-panel-page .hentry.has-post-thumbnail .button,
		.page-template-panel-page .hentry.has-post-thumbnail .button.minimal:focus,
		.page-template-panel-page .hentry.has-post-thumbnail .button.minimal:hover,
		.search-form .search-submit:before,
		.site-main #infinite-handle span button,
		button,
		input[type="button"],
		input[type="reset"],
		input[type="submit"],
		ins,
		mark,
		.milestone-widget .milestone-header { background-color: #49A343;}
.featured-content .flex-control-paging a,
		.main-navigation .primary-menu .current-menu-item > a,
		.main-navigation .primary-menu .current_page_ancestor > a,
		.main-navigation .primary-menu .current_page_item > a,
		blockquote,
		#comments #respond #comment-form-comment.active,
		#comments #respond .comment-form-fields div.comment-form-input.active { border-color: #49A343;}
.button.minimal,
		.comment-metadata a:focus,
		.comment-metadata a:hover,
		.comment-navigation .nav-next a:after,
		.comment-navigation .nav-previous a:before,
		.comment-reply-link:after,
		.entry-footer a:focus,
		.entry-footer a:hover,
		.entry-header a:focus,
		.entry-header a:hover,
		.infinite-loader .spinner div,
		.main-navigation .button.minimal a,
		.main-navigation .menu-item-has-children > a:after,
		.main-navigation a:focus,
		.main-navigation a:hover,
		.post-navigation a:focus .post-title,
		.post-navigation a:hover .post-title,
		.posts-navigation .nav-next a:after,
		.posts-navigation .nav-previous a:before,
		.site .jetpack-social-navigation a:focus,
		.site .jetpack-social-navigation a:hover,
		.site .jetpack_widget_social_icons a:focus,
		.site .jetpack_widget_social_icons a:hover,
		.site .widget_wpcom_social_media_icons_widget a:focus,
		.site .widget_wpcom_social_media_icons_widget a:hover,
		.site .wp-playlist-light a.wp-playlist-caption:focus,
		.site .wp-playlist-light a.wp-playlist-caption:hover,
		.site-info a:focus,
		.site-info a:hover,
		.site-title a,
		.widget_akismet_widget .a-stats a:focus,
		.widget_akismet_widget .a-stats a:hover,
		.widget_goodreads div[class^="gr_custom_title"] a:focus,
		.widget_goodreads div[class^="gr_custom_title"] a:hover,
		.widget_goodreads div[class^=gr_custom_container] a:focus,
		.widget_goodreads div[class^=gr_custom_container] a:hover,
		a:focus,
		a:hover,
		#comments #respond .comment-form-service a:focus,
		#comments #respond .comment-form-service a:hover,
		#comments #respond .form-submit,
		.widget_flickr #flickr_badge_uber_wrapper td a:last-child:focus,
		.widget_flickr #flickr_badge_uber_wrapper td a:last-child:hover { color: #49A343;}
input[type="color"]:focus,
		input[type="date"]:focus,
		input[type="datetime"]:focus,
		input[type="datetime-local"]:focus,
		input[type="email"]:focus,
		input[type="month"]:focus,
		input[type="number"]:focus,
		input[type="password"]:focus,
		input[type="range"]:focus,
		input[type="search"]:focus,
		input[type="tel"]:focus,
		input[type="text"]:focus,
		input[type="time"]:focus,
		input[type="url"]:focus,
		input[type="week"]:focus,
		select:focus,
		textarea:focus { outline-color: #49A343;}
.featured-content .hentry.has-post-thumbnail .button:focus,
		.featured-content .hentry.has-post-thumbnail .button:hover,
		.page-template-panel-page .hentry.has-post-thumbnail .button:focus,
		.page-template-panel-page .hentry.has-post-thumbnail .button:hover { color: #49A343;}
#infinite-footer,
		.widget-footer-top-area { background-color: #49a343;}
.widget-footer-top-area .button,
		.widget-footer-top-area .button.minimal:focus,
		.widget-footer-top-area .button.minimal:hover,
		.widget-footer-top-area .milestone-widget .milestone-header,
		.widget-footer-top-area button,
		.widget-footer-top-area input[type="button"],
		.widget-footer-top-area input[type="reset"],
		.widget-footer-top-area input[type="submit"] { color: #49a343;}

    Hoping this helps!

    Thread Starter sofiaminetto

    (@sofiaminetto)

    hi @supernovia – thanks a lot, that’s exactly what I needed!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘change button colours’ is closed to new replies.