Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1462263

    Hi,
    how can i change the symbols of the arkkordeon toggles
    and how can I remove the small rectangle around it?
    kind regards
    Jak

    #1462289

    Hey 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,
    Mike

    #1462352

    Hi Mike,
    thanks for your help!
    i have added the new symbols to the private content area.
    kind regards
    Jak

    #1462407

    Hi,
    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,
    Mike

    #1462419

    Hi 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
    Jak

    #1462439

    Hi,
    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,
    Mike

    #1462512
    This reply has been marked as private.
    #1462544

    Hi,
    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,
    Mike

    #1462558

    Hi 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!
    Jak

    #1462561

    Hi,
    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,
    Mike

    #1462577

    Hi Mike,
    works very nice!
    Thank you & kind regards
    Jak

    #1462579

    Hi,
    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to change the symbols of the arkkordeon toggles?’ is closed to new replies.