Add a new widget or edit an existing widget to open the Edit Widget dialog. Find and click on Styling in the list of menus at the left.
Note: The Styling menu is not available for every widget.
Use the Styling menu to change the look and layout of your Campaign. There's a field for Extra CSS Classes and buttons to set the alignment of the widget's contents.
Extra CSS Classes
ShortStack adds whatever you type into the Extra CSS Classes field to the classes attribute of the widget’s main DIV element. This is useful when you want to style some (but not all) widgets with common CSS rules. Separate multiple classes with spaces and do not add a leading period or any other punctuation. For example, to add the classes show_title and cascade, type the following into the field:
You can then target those classes in your CSS. A valid class name starts with a letter or underscore, followed by any combination of letters, underscores, dashes or digits. A class name can also start with a dash, but must be immediately followed by an underscore or letter, then can contain any other legal characters.
Classes Available to Most Themes
Most themes include some common classes/rules you can add to the Extra CSS Classes field:
- show_title — Shows the widget title.
- left — Makes the widget about half the normal width and floats it to the left.
- right — Makes the widget about half the normal width and floats it to the right.
- cascade — Makes the thumbnails in the Video widget cascade down the page instead of confining them to a single horizontal strip.
- product_btn — Makes the "More Info" link in the Product Widget a button instead of a text link.
- transparent_bg — Removes theme widget box styling. In a container, it removes the widget box styling of all widgets within the container as well. In certain themes it will also apply alternate text and button styling to work with the main background color.
- container_bg — Removes individual widget box styling to widgets within Container Widgets and applies that styling to the container itself.
- no_box — Renders the widget without the usual box styling (no borders, padding, or background).
Use the Left, Center, and Right Alignment buttons to position the widget's contents on the Campaign.