Okay
  Public Ticket #1529363
Style Accordion - Custom CSS
Closed

Comments

  • Alexander started the conversation

    Hello!

    Can you help me change look of accordion items? I need in closed accordion items the font and line colors like, when they are opend (with accent color and white font color).

  •  447
    Support Agent 1 replied

    Hi,

    Please add the following statements to Custom CSS field on Appearance > Customize > General Settings panel:

    .tabsVertical .tabAccordionTitle {
        background-color: #33ac4d !important;
        color: #fff !important;
    }
    .tabsVertical .tabAccordionTitle:before {
        background-color: #5a8563 !important;
        color: #fff !important;
    }


    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!

  • Alexander replied

    Hello, and thank you a lot!

    Everything is great.

    One more question: How can I use Tab-symbols in Accordions Headline? All I need is: the second parts of headlines were horizontally aligned. Is it possible? Without Tab-symbols?

  •  45
    BoldThemes replied

    Hi Alexander,

    Can you please send us the annotated screenshot to get the clear idea of what you are trying to achieve?

    Thanks in advance.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating.
    A huge thank you from BoldThemes in advance!

  • Alexander replied

    I need prices to be behind red line.

    http://narcolog.kiev.ua/prices/

    Attached files:  Screen_1.jpg

  •  45
    BoldThemes replied

    Hi,

    Try adding the following to Appearance > Customize > General Settings, Custom JS (bottom) field:

    jQuery(function() {
        jQuery(".tabAccordionTitle").html(function(_, html) {
       var n = html.indexOf('–');
       s1 = html.substring(0, n != -1 ? n : html.length);
       s2 = html.substring(n != -1 ? n : html.length, html.length);
       return s1 + "</span><span style='float:right;'>" + s2;
    });
    });

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating.
    A huge thank you from BoldThemes in advance!

  • Alexander replied

    Hello!

    It works great on PC, but not on mobile devices. Something wrong? http://narcolog.kiev.ua/prices/

    And one more question: on mobile devices sliders pictures are cut too much. Could it be a little wider? And text area a little to left border?

    Attached files:  Screenshot_1.jpg

  •  45
    BoldThemes replied

    Hi Alexander,

    Can you please tell us which mobile device were you testing on - we were not able to recreate the issue? Thanks in advance.

    In relation to the slider, please update to the latest theme version - 1.3.0 You are currently running 1.2.6 - the paddings were fixed in the latest verison

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating.
    A huge thank you from BoldThemes in advance!