Home Forums Basel support forum How do I modify custom colors in Accordion? (CSS/JS?)

How do I modify custom colors in Accordion? (CSS/JS?)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #133779

    oleg_dmitriev
    Participant

    Hi I am trying to change colours in accordion, I want .vc_tta-panel-title to be #C41E3A when it is active (open) or when hover, and text to become white.
    I have been trying css (below) it changes to #C41E3A on hover but I cannot make it work when it is active. Please help.

    .vc_tta-panel-title {
    background-color: #ccc;
    }
    .vc_tta-title-text {
    color: white;
    }
    .vc_tta-panel-title:hover {
    background-color: #C41E3A;
    }

    #133781

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .wpb-js-composer .vc_tta.vc_general .vc_active .vc_tta-panel-title>a {
    	background-color:#C41E3A;
    }

    Best Regards

    #133788

    oleg_dmitriev
    Participant

    Thanks! it worked with a minor tweak :)))
    initially I got confused because you had [>a] in your CSS, after I removed it all worked fine.
    My final CSS is below.

    How can I change the [+] and [-] signs in the Accordion to white?
    Thank you for your help

    .vc_tta-panel-title {
    background-color: #778899;
    }
    .vc_tta-title-text {
    color: white;
    }
    .wpb-js-composer .vc_tta.vc_general .vc_active .vc_tta-panel-title {
    background-color:#C41E3A;
    }

    #133798

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘How do I modify custom colors in Accordion? (CSS/JS?)’ is closed to new replies.