Virginia Tech™home

Container Component

The Container component gives site creators the ability to add <DIV> containers to the page. The container can contain one or more other components but the real power is in added backgrounds, classes, and any CSS-specific styles to the page.

vt container title and options

Use the tool icon to pull up options for the component. The first panel can be used to set title, add CSS classes, set a background image, and invoke a full browser width mode.

NOTE: Background images MUST come from the Digital Asset Manager (DAM) in order to appear properly when published. DO NOT upload an image directly to the component. It will not appear when the page is published though it may appear in Author.

Note that in "Full Browser Width" you'll need to select the component in the natural size. To select, click the light blue bar near the middle. If you experience problems, reloading the page may help. The full viewport mode can also cause other problems. If you have a rail (right column) on the page, that content can overlap the full width container creating problems visible to users and making selecting content in the editor impossible. If you run into problems, the full-width option may not be a good choice and either that container or the right column should be removed. As always, test your pages at every viewport width between 320px wide and 1200px wide.

vt container css options

The second panel allows the setting of CSS height, CSS text color, CSS margins shorthand, CSS padding shorthand, CSS background-color,  and custom CSS styling rules which will be added as element-level styling.

Example of HTML generated by the component:

<div class="vtcontainer parbase section">
  <div class="vt-vtcontainer vt-added vtclasses" style="background-image: url(/content/dam/ensemble_cms_vt_edu/autism-angela.jpg); height: 605; color: #f00; margin: 5px; padding: 10px; background-color: #00f; anyproperty: anyvalue;" data-emptytext="Container">
      <div class="vt-vtcontainer-content"> ... </div>
  </div>
</div>


This component affords the ability to add extra "containers" (specifically <div> elements) to a page. These containers may contain other components. Containers are customizable with CSS, and allow for the easy manipulation of common CSS properties.

Features

  • Custom background images
  • Can be stretched to the full width of the page
  • Supports custom CSS
  • Allows for easy editing of common CSS styling

Dialog Properties

Title and Options

  1. Component Title - Title of Component
  2. CSS Class - CSS class to be applied to the component
  3. Background Image - Browse for an image to use as a background for the container
  4. Full Browser Width - Force the container to stretch the full width of the window
  5. CSS Styles - Any custom CSS needed for the container. This will be inserted on the page in a <style> block, and will override any values put into the Common CSS Properties tab

Common CSS Properties

  1. Height - The height of the container (e.g. "100px")
  2. Color - The text color within the container (e.g. "#ffffff")
  3. Margin - The outer spacing around the container, from top, right, bottom, left in that order (e.g. "5px 5px 5px 5px")
  4. Padding - The inner spacing of the container, from top, right, bottom, left in that order (e.g. "5px 5px 5px 5px")
  5. Background-color - The background color of the container (e.g. "#ffffff")