Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 26, 2016 at 4:43 pm #704416
    bigbridgeavl

    Hi, I would like to have two different styles for the accordion element. I assume the way to do this would be to add a css class to style one, but I can’t figure out how to target it. My custom styling works if I target “.js_active .toggler” but when I add a class of .read-more in front of that it doesn’t work anymore.

    For example, this is what I tried that didn’t work:

    .read-more .js_active .toggler {
padding: 0;
border: none !important;
}
    October 27, 2016 at 6:42 am #704675
    Rikard

    Hey bigbridgeavl,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    October 27, 2016 at 3:25 pm #704881
    bigbridgeavl

    Here is the test page where I was trying to style the accordion element:

    October 28, 2016 at 11:15 am #705237
    Vinay

    Hi,

    Please enable custom css class name for builder elements kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Add a custom css class name to the according you want to style.

    If you still have trouble please get back to us with the custom class name you added and post a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    October 28, 2016 at 4:27 pm #705353
    bigbridgeavl

    I have already enabled custom css classes, I just can’t figure out how to target it now.

    I added a custom class of “.read-more” to the accordion element.

    Here is a screenshot of what I’m looking for: https://dl.dropboxusercontent.com/u/182261516/Screen%20Shot%202016-10-28%20at%2010.20.37%20AM.png

    November 1, 2016 at 5:45 am #706543
    Rikard

    Hi,

    Thanks for the info, I can see your custom class in the element. Not sure I understand what you want to do though, only remove the border?

    Best regards,
    Rikard

    November 1, 2016 at 4:25 pm #706779
    bigbridgeavl

    I would like to have two different styles for the accordion element. One that is pretty standard, and another with the ‘.read-more’ class that has no border and no padding. I can remove the border and padding from the accordion element across the board, but I can’t figure out how to target the accordion with the ‘.read-more’ class so that only the accordion element with the ‘.read-more’ class has the border and padding removed. When I add my styling WITH the custom class like this:

    .read-more .js_active .toggler {
padding: 0;
border: none !important;
}

    It doesn’t work.

    November 2, 2016 at 8:32 am #707003
    Rikard

    Hi,

    Ok, thanks for the feedback. Try something like this instead:

    .read-more .toggler {
    padding: 0;
    border: none !important;
}

    Best regards,
    Rikard

    November 2, 2016 at 6:12 pm #707292
    bigbridgeavl

    Doesn’t look like it worked. Any other suggestions?

    November 5, 2016 at 4:53 am #708528
    Ismael

    Hi,

    We modified the code a bit. Please try it again.

    Best regards,
    Ismael

    November 7, 2016 at 7:12 pm #709432
    bigbridgeavl

    That worked. Thanks!

    November 7, 2016 at 10:58 pm #709536
    Vinay

    Hi,

    Glad we could help!
    We really appreciate it if you rate our theme on themeforest https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

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