When creating a Panel or Mini panel, you can choose to add Component Styles to any of the layout regions or content panes. This section assumes that you have already created your Panel or Mini panel.
To do so, click “Structure” in your admin toolbar.
On the Structure page, click Panels or click Mini panels.
You should now see a list of Panels or Mini panels depending on which path you took. Find the one you want to add component styles from that list and click “Edit”.
Next, click “Content”. The first image below shows the location of the Content button for a Panel, while the second image on the following page, shows it for a Mini panel.
You will now find yourself looking at the layout that may contain content if you have added it previously. Component Styles may be used on either the layout regions or the content panes. To apply a style, click the gear where you want to apply the styles.
Upon clicking the gear, a menu will appear. On this menu, click "change" under the "Style" header.
Doing so will open a pop-up. Select “Component Styles” from the list and click “Next”.
You now find yourself and the Component Styles form where you can configure everything you need to style your content. Before I get into the details, I want you to notice that at the very bottom of the page, there is a Save button. This is the button you will click once you have completed whatever configuration you wish to have.
As you can see from the image above, there are four fieldsets in our form.
The title fieldset contains both the French and English title fields. These exists in the event that a display format requires a title in order to render properly.
Styling will provide visual enhancements to your page. The options are as follows:
Container Type: Choose the type of container that will house your content.
Spacing: Adds extra gutters around your content.
Summary: If it is rendered, you may choose to either show or hide it.
The Advanced Settings fieldset is for use by advanced users who want a greater level of control over the styles on their pages. Currently, only two things can be controlled here. The first is the spacing. A user can define specific values for top, left and right paddings to get a desired effect. The second, and most powerful advanced setting to date is the height equalization. By assigning the same height equalization group to two independent pieces of content, this will ensure that the height of both boxes is equivalent, thus providing your page with visual symmetry.
As mentioned, once you have completed making your changes, click “Save”.
Be sure to click “Update and save”, if you are on a Panel or click “Save” if you are on a Mini panel to ensure that your changes take effect.