Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 2, 2020 at 8:09 pm #1189514
    Flow9999

    Hello,

    I tried to modify accordion tabs with these modifications

    .custom-tabs .toggler {
background-color: #ffffff!important;
border-radius: 10px 10px 10px 10px!important;
overflow: hidden!important;
border-top-width: 5px!important;
border-bottom-width: 5px!important;
border-top-color: #733897!important;
border-bottom-color: #733897!important;
}

    Nothing changes. Also whatever modification I try from accordion css tutorials, nothing applies.

    Thank you very much!

    March 3, 2020 at 10:08 am #1189644
    Rikard

    Hey Flow9999,

    There is no class called custom-tabs on your site, so you are not targeting anything. Did you add that class to the element options? You can try to remove that class, then your CSS should apply. Also make sure that you have activated the option to delete the old CSS and JS files under Enfold->Performance.

    Best regards,
    Rikard

    March 4, 2020 at 2:38 pm #1190080
    Flow9999

    Hello Rikard,

    the class “custom-tabs” was just an example. I know I didn’t use that class at the time when I started this topic.
    Whether I use the custom ID or not “.toggler” doesn’t change anything.
    In order for you to see this, I assigned that class in the example on my subpage with accordion.
    Thanks :)

    March 4, 2020 at 7:55 pm #1190196
    Victoria

    Hi Flow9999,

    Can you disable caching and minification for now?

    I cannot get a css file in the browser to work with.

    Best regards,
    Victoria

    March 4, 2020 at 8:03 pm #1190200
    Flow9999

    Hello Victoria,

    it’s disabled now.

    Kind regards :)

    March 4, 2020 at 8:29 pm #1190223
    Victoria

    Hi Flow9999,

    Please try playing with this code:

    
#top #wrap_all p[data-fake-id="#toggle-id-1"].toggler {
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    overflow: hidden!important;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-top-color: #733897!important;
    border-bottom-color: #733897!important;
    outline: none;
}

    Best regards,
    Victoria

    March 4, 2020 at 8:40 pm #1190226
    Flow9999

    Well done Victoria! :-)
    #top #wrap_all was necessary in order for the CSS to work. I removed p[data-fake-id="#toggle-id-1"] so all items are applied for css modifications.
    The single problem left now is that only bottom border (with purple color) is displayed.
    Is is possible to fix it so top and bottom get the purple border?
    Thanks :)

    Update: Could solve it myself. After some reserach with inspector I discovered that border-top-sytle: none was set somehow. Changed it to border-top-style: solid!important; and voilà :)

    • This reply was modified 4 years, 8 months ago by Flow9999.
    March 5, 2020 at 1:15 am #1190267
    Flow9999

    Maybe there’s one thing left I’d like to change on the accordion:
    Can the icon from every toggler be set to “\e817”?
    Thanks!

    March 5, 2020 at 7:14 pm #1190579
    Victoria

    Hi Flow9999,

    Glad you got it working for you! :)

    I thought you wanted different styles for the toggles that’s why I gave you a way to distinguish them. Well, I tried adding the icon to the toggle content, it did not work.

    But actually there is a way to do it here in the docs:

    Accordion

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 5, 2020 at 9:00 pm #1190644
    Flow9999

    Thank you very much Victoria :)
    Thread can be closed

    March 5, 2020 at 10:09 pm #1190675
    Victoria

    Hi Flow9999,

    Great :)

    I am closing the thread.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Accordion CSS styles do not apply’ is closed to new replies.