Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 27, 2015 at 6:40 pm #403584
    cbentley65

    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

    March 1, 2015 at 2:34 am #403984
    Andy

    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, 9 months ago by Andy.
    March 1, 2015 at 7:40 pm #404161
    cbentley65

    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

    March 1, 2015 at 9:05 pm #404182
    vicrub

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

    March 3, 2015 at 8:08 am #404981
    Ismael

    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

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