• Resolved MikeyPNJ

    (@mikeypnj)


    I am having a weird issue.
    On the checkout page the tabs for shipping address, billing address and review and payment are black and can’t be read.

    https://www.discusmadness.com/checkout/

    on product pages i am having the same issue for the description tab:

    https://www.discusmadness.com/product/albino-super-red/

    as you can see on the product page when the page first loads, its displayed right for a millisecond and then goes to black like its being over-ridden somewhere.

    on the checkout page, no matter what I change, the tabs are staying black as well.

    I am using WooCommerce, Avada, and am up to date on wordpress.

    can someone please help.

    thank you,
    Mike

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi,
    In avada-6.css look at this part

    #fusion-gmap-container, #main, #sliders-container, #wrapper, .fusion-separator .icon-wrapper, .woocommerce-MyAccount-navigation > ul .is-active a, .woocommerce-checkout-nav .is-active a, .woocommerce-tabs > .tabs .active a, body, html {
        background-color: #29292a;
    }

    The background-color there is set to blackish.

    Thread Starter MikeyPNJ

    (@mikeypnj)

    I cannot find avid-6.css in the backend WordPress editor.
    is there a file in there that contains it as well, or do I have to log into the FTP and edit it manually through there?
    Mike

    Thread Starter MikeyPNJ

    (@mikeypnj)

    I did notice there is a shortcode option for main color in Avada’s fusion. If i change it to white, it solves the problem on the cart, but not the product descriptions. It also, unfortunately changes the prices on all product pages and category pages to white as well. I think there is some overlap somewhere.
    Is there a way to CSS override all the prices on the product pages and cat pages as black i would be 75% there, except there is still an override happing on the product description tabs on product pages. (I wouldn’t mind getting rid of those tabs all-together if i could do it while leaving the actual product description box. so that is an option too.)

    It looks like they are part of Woocommerce. Maybe you can change the color from there.

    If not, these are the two classes you want to change:
    .woocommerce-tabs > .tabs .active a
    .woocommerce-checkout-nav .is-active a

    You could just add them to your style.css like with your own color and it should work

    .woocommerce-tabs > .tabs .active a {background-color: #FF0000!important}
    .woocommerce-checkout-nav .is-active a {background-color: #FF0000!important}
    Thread Starter MikeyPNJ

    (@mikeypnj)

    that worked perfectly! thank you!
    I do have another question though, if you don’t mind.
    How would I add font color for the woocommerce tabs, so i can easily change the font color to black, and have it marked in my custom css together.
    thank you again!
    Mike

    The one on the product pages you can give a different color with

    .woocommerce div.product .woocommerce-tabs ul.tabs .active a {color: #000!important}

    What browser do you use?

    • This reply was modified 7 years, 8 months ago by Okoth1.
    Thread Starter MikeyPNJ

    (@mikeypnj)

    that worked! thank you!
    I mainly use Safari at the office (on a mac) and Firefox at home (pc.)
    I try to test across all browsers each time.

    Mike

    If you’re using Firefox, you should install the add-on FireBug. When you right-click on an element on your page and then click on “Inspect element with Firebug” and then under the html tab you’ll see the css used and where to find it.

    • This reply was modified 7 years, 8 months ago by Okoth1.
    Thread Starter MikeyPNJ

    (@mikeypnj)

    awesome! thank you for the tip!
    I appreciate your help very much and will definitely get the Firebug Add-on!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS Issue over-riding tab backgroung color on checkout and product pages’ is closed to new replies.