Changing style of accordion title

  • Resolved deeveedee

    (@deeveedee)


    8 years, 6 months ago

    I am currently using the css below in my child theme’s style.css in order to modify the fruitful_tabs:accordion title format (I want the title to be larger, bold and borderless). Does the fruitful_tabs shortcode offer a way to modify the title format in a way that doesn’t require custom css? Thank you very much for your help.

    #ffs-tabbed-1.ffs-tabbed-nav h2 {
   font-size: 18px;
   font-weight: bold;
   border: none !important;
}

    https://www.ads-software.com/plugins/fruitful-shortcodes/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Fruitful Code

    (@fruitfulcode)

    Hello,

    Thanks for using our plugin

    Unfortunately it’s not possible with plugin options. You can only use CSS for this

    Regards

    Thread Starter deeveedee

    (@deeveedee)

    Hi, Fruitful Code,

    Thank you for the reply. I’ve grown to like the css style mods for the accordion tabs. I can customize the appearance to be exactly as I want (which I would never expect from shortcode options).

    The accordion style horizontal tabs (with style mods) work perfectly for FAQs – more flexible and easier to use (my opinion) than any of the FAQ plugins that I’ve tried.

    Thank you for great support, a great theme and great shortcodes.

    Thread Starter deeveedee

    (@deeveedee)

    I was experimenting with the use of the CSS Class and ID Selectors when attempting to modify the fruitful tab styles and realized that my first post (above) mistakenly included both. For those following this who want to modify the fruitful tab title style, you only need to specify the ID -OR- the Class selector. For example, to use the Class Selector to modify all fruitful horizontal tab titles:

    .ffs-tabbed-nav h2 {
   font-size: 18px !important;
   font-weight: bold;
   border: none !important;
}

    If you would prefer to use the ID Selector (to separately modify the style of different horizontal tabs):

    #ffs-tabbed-1 h2 {
   font-size: 18px;
   font-weight: bold;
   border: none !important;
}

    Thread Starter deeveedee

    (@deeveedee)

    Here’s some styling that I inserted into my child-theme style.css to make the Fruitful theme horizontal tabs look more like folder tabs.

    
.resp-tabs-list li {
   font-size: 18px !important;
   border-right: solid 1px gray !important;
   border-top-right-radius: 15px;
}
.resp-tabs-list li.resp-tab-active {
   font-size: 18px !important;
   font-weight: bold !important;
   background-color: #71AFFF !important;
   border-right: none !important;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Changing style of accordion title’ is closed to new replies.