Component styles

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.

* decoration

On the Structure page, click Panels or click Mini panels.

* decoration

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”.

* decoration

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.

* decoration

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.

* decoration

Upon clicking the gear, a menu will appear. On this menu, click "change" under the "Style" header.

* decoration

Doing so will open a pop-up. Select “Component Styles” from the list and click “Next”.

* decoration

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.

* decoration

As you can see from the image above, there are four fieldsets in our form.

Title

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.

* decoration

Display Formats add a level of functionality to your page via JavaScript. These are subdivided into Format and Display Mode. The Format controls how the content will be rendered (e.g. Slideshow, Gallery, etc.) while the Display Mode controls the container

Display Formats add a level of functionality to your page via JavaScript. These are subdivided into Format and Display Mode. The Format controls how the content will be rendered (e.g. Slideshow, Gallery, etc.) while the Display Mode controls the container (e.g. Collapsible, Tabbable, etc.)

* decoration

Styling

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.
* decoration

Advanced Settings

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.

» Submit feedback
    Status: 
  • Accepted
    Topics: 
  • Support
    Types: 
  • User Guide
Back to top