-
AuthorPosts
-
July 17, 2024 at 1:42 pm #1462263
Hi,
how can i change the symbols of the arkkordeon toggles
and how can I remove the small rectangle around it?
kind regards
JakJuly 17, 2024 at 5:40 pm #1462289Hey Jak73,
To remove the box, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.av_toggle_section .toggle_icon { border: none; }
but to change the symbol, please tell us what you want to use.
Best regards,
MikeJuly 18, 2024 at 8:07 am #1462352Hi Mike,
thanks for your help!
i have added the new symbols to the private content area.
kind regards
JakJuly 18, 2024 at 4:51 pm #1462407Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.av_toggle_section .toggle_icon:before { content: url(https://test.w-bullinger.com/WB-Reader-Arrow.svg); } .av_toggle_section .activeTitle .toggle_icon:before { content: url(https://test.w-bullinger.com/WB-Reader-X.svg); } .av_toggle_section .toggle_icon { border:none; } .av_toggle_section .toggle_icon .vert_icon, .av_toggle_section .toggle_icon .hor_icon { display:none; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeJuly 18, 2024 at 7:04 pm #1462419Hi Mike,
this is really nice, thank you!Is it possible to add a border to the top and bottom, like on the screenshot (1px solid #000)?
kind regards
JakJuly 18, 2024 at 11:03 pm #1462439Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.togglecontainer p.toggler { border-top: 1px solid #000 !important; border-bottom: 1px solid #000 !important; }
Best regards,
MikeJuly 19, 2024 at 8:09 pm #1462512This reply has been marked as private.July 20, 2024 at 12:39 pm #1462544Hi,
Change the precious css to this:.av_toggle_section .toggle_icon:before { content: url(https://test.w-bullinger.com/WB-Reader-Arrow.svg); top: -10px; position: relative; } .av_toggle_section .activeTitle .toggle_icon:before { content: url(https://test.w-bullinger.com/WB-Reader-X.svg); top: -10px; position: relative; } .av_toggle_section .toggle_icon { border:none; } .av_toggle_section .toggle_icon .vert_icon, .av_toggle_section .toggle_icon .hor_icon { display:none; }
and adjust the top: -10px; to suit.
Best regards,
MikeJuly 20, 2024 at 5:51 pm #1462558Hi Mike,
this works really good!
In chrome browser it works very well.
There is a strange behavior in safari brwoser:
In safari browser there appears a border on left and right, how can i remove the border on left and right?kind regards & many thanks for your great help!
JakJuly 20, 2024 at 6:49 pm #1462561Hi,
I’m not seeing this this on my Mac, but you could try adding this css:.togglecontainer * { border-left: none; border-right: none; border-left-color: transparent !important; border-right-color: transparent !important; } .togglecontainer .av-inherit-border-color { border-left-color: transparent !important; border-right-color: transparent !important; }
then clear your browser cache, Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
Best regards,
MikeJuly 20, 2024 at 9:20 pm #1462577Hi Mike,
works very nice!
Thank you & kind regards
JakJuly 20, 2024 at 9:21 pm #1462579Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘How to change the symbols of the arkkordeon toggles?’ is closed to new replies.