Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1212931

    Nuera
    Participant

    Perhaps you can help me? I’ve read through every post about accordion tab colors, and so far not a single CSS mod has even affected my accordions’ appearance.

    Basically, I would like my inactive tabs to be #00338e with white text, and the hover color to be #dc291e with white text. The active tab can remain unaffected.

    I’ll post my login creds below, just in case.

    Thanks!

    #1212932

    Nuera
    Participant
    This reply has been marked as private.
    #1213343

    Joao
    Moderator

    Hi There,

    Can you let us know where on your website the accordions are placed.

    Thanks

    Joao

    #1213363

    Nuera
    Participant

    Sure, they’re at https://flgajax.com/faq/

    Thanks!

    #1213732

    Jade
    Moderator

    Hi there,

    Please add this code in the customizer:

    
    .x-accordion-heading .x-accordion-toggle.collapsed {
        background-color: #00338e;
        color: #fff;
    }
    
    .x-accordion-heading .x-accordion-toggle:hover {
        background-color: #dc291e;
    }
    #1213768

    Nuera
    Participant

    Unfortunately that code isn’t taking either. It’s almost as if something is blocking the styling from appearing on the page…

    If you have another suggestion, I’m happy to try it; but it does feel like something else is at play here.

    Thanks for your help Jade!

    #1214229

    Friech
    Moderator

    Hi There,

    That code works, you just miss the closing bracket for the @media (max-width: 480px) query. I did go ahead and address it.

    Cheers!

    #1214682

    Nuera
    Participant

    Oh my… thank you so much!

    #1214731

    Nuera
    Participant

    One last element I didn’t anticipate.

    Would it be possible to just keep the active tab color #dc291e with white text? I was trying to go for a ‘red, white & blue’ thing with the tabs, but I think just keep them red and blue actually looks better.

    Many thanks!

    #1214959

    Rupok
    Member

    Hi there,

    Thanks for writing back. Let’s use this :

    .x-accordion-heading .x-accordion-toggle {
      background-color: #dc291e;
      color: #fff;
    }

    Cheers!

    #1215270

    Nuera
    Participant

    Perfect! Thank you again 🙂

    #1215635

    Friech
    Moderator

    You’re more than welcome, glad we could help.

    Cheers!