Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #309167
    Xandoval
    Participant

    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; }
    #309172
    Sakin
    Keymaster

    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

    #309184
    Xandoval
    Participant

    It works perfectly! Thank you so much @sakinshrestha!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to change color of header font and clicked links’ is closed to new replies.