- This topic has 2 replies, 2 voices, and was last updated 2 years ago by
Xandoval.
-
AuthorPosts
-
August 13, 2022 at 12:35 pm #309167
Xandoval
ParticipantI 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; }
August 13, 2022 at 12:44 pm #309172Sakin
KeymasterHi @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,
SakinAugust 13, 2022 at 1:26 pm #309184Xandoval
ParticipantIt works perfectly! Thank you so much @sakinshrestha!
-
AuthorPosts
- The topic ‘How to change color of header font and clicked links’ is closed to new replies.