Support » Plugin: Stackable - Gutenberg Blocks » Accordion arrow icon styling

  • Resolved karl19

    (@karl19)


    Is there a way to change the styling of the downward-facing arrows next to accordion titles? We would just like to add a circle background and change arrow colour, but doesn’t seem possible with just CSS.

    For our purposes, having a selection similar to the Icon List block would be ideal – there you can select icon, icon shape, colour and size. Something similar for accordions would be great!

Viewing 1 replies (of 1 total)
  • Plugin Contributor gambitph

    (@gambitph)

    Hi there! 😊

    Currently, the accordion block arrows are using SVG arrows and can’t be changed to another icon. Adding a circle background behind the arrow is possible though.

    You can add an Additional CSS Class on your accordion block so that the changes will only apply to the specific accordion. Here’s a sample CSS if you want:

    .custom-class svg {
    	background-color: red;
    	
    	/* Arrow Size */
    	height: 50px;
    	width: 50px;
    
    	/* Gap between the arrow and background color */
    	padding: 5px 5px;
    
    	/* Roundness */
    	border-radius: 20px;
    }

    This can be added via Appearance > Customize > Additional CSS or through a Custom CSS plugin. 🙂

    Nice idea anyway! I’ll note your idea to add icon selection for the accordion block.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.