I am creating a site that has containers that have different background colors based on the class wrapping the container. So far I have had to make a custom grid widget for each different color container. Instead of making multiple grid widgets for this I would love to be able to just create one grid widget and select the background color from a dropdown list. Is this possible? I realize I can just change the class by entering the data-sf-element param like so
<div class="black-wrapper" data-sf-element="Wrapper" data-placeholder-label="Wrapper">
<div class="sf_colsIn container inner" data-sf-element="Container" data-placeholder-label="Container">
</div>
</div>
However, making multiple grid templates just so the default class is what I want it to be is messy. The client is not smart enough to enter the class name every time, so I need to limit what they can enter.
there is no dropdown option for selecting classes for grid layouts out of the box. A couple other options would be to create a page template for each "color", this they makes an easy selection of color schemes.
Option two would be create a custom dropdown field on pages "Color" with predefined values, Blue, Green, Yellow. Attach to the page rendering event then inject that class on the body tag or something similar.
No sure if these meet the customer needs, but if you have anymore info that might help let us know.