The Accordion Module can be styled locally or globally. The advantage of global styling is that it automatically styles all the Accordion Modules on your website at the same time, creating a consistent theme and saving your time. It is possible to find the Accordion Global Styling under the Module Design section of the Global Styling tab of the editor.
In this section you can style the title in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment within the list element.
In this section you can define the image size in percentage of the original size, float options and spacing, both in terms of margin and padding.
In this section you can define the button placement, a fixed width, a background and font color (in normal and hover state), the font size, family, weight, line height, uppercase and alignment options. Moreover, you can also style the border's color, width, style and radius. Finally, you can customize the spacing, in terms of margin and padding, and the icon size and color, if you have included one.
4. Icon Style
In this section you can define the overall icon style, including setting a width, height and icon size, the icon and background color (in normal and hover state), as well as margin to the left and to the right of the icon.
5. List Element
The list element styling covers the area visible when the element is collapsed. It includes background color (in all states), border color, width, style and radius, as well as spacing in terms of margin and padding.
6. Expanded Area
The expanded area covers the area visible when the element is expanded. It includes background color, border color, width, style and radius, as well as spacing in terms of margin and padding.
The last option allows you to define both the margin and padding of the Accordion Module.
3. APPLY GLOBAL STYLING
As soon as you save your Global Styling, all the Accordion Modules will inherit that styling. However, if later you choose to style a form locally, it will overwrite the global styling but only for that specific Accordion Module. Click here to read more about the Accordion Module local styling!