[Xandoval]

I am using the free version of rock band (xanwolfe.com)  and wanted to change the default teal color of the links, line breaks, header pages, etc from teal to green color (#94995C). So far I have managed to do that with some CSS but am still running into the default teal returning under two circumstances:

When you hover over a menu item with sub-items and scroll down, the top level items revert to default teal. When a link is clicked like “home” or “blog” the color briefly reverts to the default teal.

Is it possible to change this with custom CSS? I am currently using this in my custom CSS section:

#feature-slider-section .entry-container {
    display: none !important;
}

a:hover {
    color:#94995C !important;
}

#access .menu .current-menu-item > a, #access .menu .current-menu-ancestor > a, #access .menu .current_page_item > a, #access .menu .current_page_ancestor > a, #access-secondary .menu .current-menu-item > a, #access-secondary .menu .current-menu-ancestor > a, #access-secondary .menu .current_page_item > a, #access-secondary .menu .current_page_ancestor > a, #access-footer ul.menu .current-menu-item a {
    color: #94995C;
}

input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="week"]:focus, input[type="month"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, blockquote, .rtl blockquote, .page-links a, .section-title::after, #header-menu-social::before, #hero-section .entry-title::after, #feature-slider-section .cycle-prev:hover, #feature-slider-section .cycle-prev:focus, #feature-slider-section .cycle-next:hover, #feature-slider-section .cycle-next:focus, .woocommerce-info, .woocommerce-message {
    border-color: #94995C;
}

.main-navigation .current-menu-item > a, 
.main-navigation .current-menu-ancestor > a,
.main-navigation li:hover > a, 
.main-navigation li.focus > a {
    color: #94995C;
}

#primary-menu-toggle {
	color:#94995C;
}

p { color:#c1c1c1; }

[Sakin]

Hi @xandoval,

If you want to replace all the default teal colors with #94995C then you remove the above CSS you have for colors and then add the following CSS instead:

/* Link Hover Color */
a:focus,
a:hover,
.site-title a:hover,
.site-title a:focus,
.menu-toggle:hover,
.menu-toggle-close:hover,
.dropdown-toggle:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
#search-toggle:hover,
#share-toggle:hover,
.menu-toggle:focus,
.menu-toggle-close:focus,
.dropdown-toggle:focus,
#search-toggle:focus,
#share-toggle:focus,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation ul.menu li:hover > a,
.main-navigation ul.menu li.focus > a,
.main-navigation ul.menu li:active > a,
.entry-header .cat-links a,
.entry-meta a:hover,
.entry-meta a:focus,
.entry-title a:hover,
.entry-title a:focus,
.more-link,
.comment-permalink:hover,
.comment-permalink:focus,
#cancel-comment-reply-link:hover,
#cancel-comment-reply-link:focus,
.widget .social-links-menu a:hover,
.widget .social-links-menu a:focus,
.site-header-menu .social-navigation a:hover,
.site-header-menu .social-navigation a:focus,
.post-navigation .nav-subtitle,
.post-navigation a:hover .nav-title,
.post-navigation a:focus .nav-title,
.sidebar .widget a:hover,
.sidebar .widget a:focus,
.events-content-wrapper .hentry:focus .entry-title a,
.events-content-wrapper .hentry:hover .entry-title a,
#testimonial-content-section .section-content-wrapper .hentry-inner:before,
#testimonial-content-section .cycle-pager span.cycle-pager-active,
#team-content-section .artist-social-profile .social-navigation a:hover,
#team-content-section .artist-social-profile .social-navigation a:focus,
#gallery-section .entry-container a:hover,
#gallery-section .entry-container a:focus,
.my-music-band-mejs-container.mejs-container button:hover,
.my-music-band-mejs-container.mejs-container button:focus,
.wp-playlist-light .my-music-band-mejs-container.mejs-container button:hover,
.wp-playlist-light .my-music-band-mejs-container.mejs-container button:focus,
#top-playlist-section .wp-playlist-item:hover,
#top-playlist-section .wp-playlist-item:focus,
#top-playlist-section .wp-playlist-item:hover .wp-playlist-caption,
#top-playlist-section .wp-playlist-item:focus .wp-playlist-caption,
body .wp-playlist-item-artist,
table.shop_table_responsive tr td a,
.product-container a.added_to_cart,
.single-product .product_meta a,
.woocommerce-info a,
.variations .reset_variations,
.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus,
.star-rating span:before,
p.stars:hover a:before,
p.stars.selected a.active:before,
p.stars.selected a:not(.active):before,
.woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-product-rating .woocommerce-review-link {
    color: #94995C;
}

mark,
ins,
.page-links a,
.my-music-band-mejs-container.mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
.my-music-band-mejs-container.mejs-container .mejs-controls .mejs-volume-button .mejs-volume-current,
.my-music-band-mejs-container.mejs-container .mejs-controls .mejs-volume-button .mejs-volume-handle,
.my-music-band-mejs-container.mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.widget_price_filter .ui-slider .ui-slider-handle,
.widget_price_filter .ui-slider .ui-slider-range {
    background-color: #94995C;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
blockquote,
.rtl blockquote,
.page-links a,
.section-title:after,
#header-menu-social:before,
#hero-section .entry-title:after,
#feature-slider-section .cycle-prev:hover,
#feature-slider-section .cycle-prev:focus,
#feature-slider-section .cycle-next:hover,
#feature-slider-section .cycle-next:focus,
.woocommerce-info,
.woocommerce-message {
    border-color: #94995C;
}

/* Button Background Color */
.events-content-wrapper .entry-meta,
.sticky-post,
.comment-reply-link,
.search-submit,
.header-media .more-link .readmore,
#feature-slider-section .more-link .readmore,
#hero-section .more-link .readmore,
.promotion-section .more-link .readmore,
.posts-navigation a,
.pagination .prev,
.pagination .next,
#content #infinite-handle span button,
#scrollup,
.widget-area .catch-instagram-feed-gallery-widget-wrapper .button,
.button,
button,
button[disabled]:hover,
button[disabled]:focus,
input[type="button"],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:focus,
input[type="reset"],
input[type="reset"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus,
#feature-slider-section .cycle-prev:hover,
#feature-slider-section .cycle-prev:focus,
#feature-slider-section .cycle-next:hover,
#feature-slider-section .cycle-next:focus,
#feature-slider-section .cycle-pager span:hover,
#feature-slider-section .cycle-pager span:focus,
#feature-slider-section .cycle-pager .cycle-pager-active,
#testimonial-content-section .cycle-prev,
#testimonial-content-section .cycle-next,
.widget_calendar tbody a,
#gallery-section .tiled-gallery .tiled-gallery-item a::after,
#top-playlist-section .mejs-container.my-music-band-mejs-container .mejs-toggle-playlist,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce .product-container .wc-forward,
.demo_store .woocommerce-store-notice__dismiss-link,
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
#gallery-section .entry-footer .edit-link a {
    background-color: #94995C;
}

.woocommerce .product-container .button {
    border-color: #94995C;
}

.woocommerce .product-container .button {
    color: #94995C;
}

Regards,
Sakin

[Xandoval]

It works perfectly! Thank you so much @sakinshrestha!

[Author]

Posts