Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #403584

    Hi

    Is there some simple css to alter the colors and styles of the accordion and tabs? I need to adjust background, border and text colors and also text sizes and would also like to be able to adjust the ‘active’ and ‘hover’ elements too. Adjusting these within the theme settings isn’t an option for me as lots of other parts of the site rely on those.

    There are many different threads on the support forum but nothing giving a set of definitive css.

    Can you help please?

    Thanks

    #403984

    Hey cbentley65!

    can you please give us a link to your website showing the elements you want to customize?
    You can add a border using this code:

    #top .avia-accordion-slider-wrap {
    border: red;
    border-style: solid;
    }
    

    Color for caption title:

    #top .aviaccordion-preview-title h3 {
    color: blue;
    }
    

    Best regards,
    Andy

    • This reply was modified 9 years, 10 months ago by Andy.
    #404161

    Hi Andy

    Thanks for getting back to me. The site is on a testing server so I can’t give you a live link. But the elements I need to change are background colors (for both title and text areas) and the hover colors for the title and the ‘active’ title.

    Can you offer some codes for those please?

    Thanks and kind regards

    #404182

    i have the same problem how can i put more styles. Where you put this code?

    #404981

    Hi!


    @vicrub
    : You can add your css modifications to the Enfold > General Styling > Quick CSS field. You can also modify some elements inside the Advanced Styling panel.


    @cbentley65
    : This is for the tab title and tab content:

    div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
    background-color: red;
    }
    
    #top .main_color .tabcontainer .tab:hover {
    background-color: red;
    }
    
    .main_color .template-archives .tabcontainer a, #top .main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab {
    color: yellow;
    }

    Use google inspector or firebug to find the right selectors for the elements that you want to modify via css.

    Cheers!
    Ismael

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.