CMS Utility Classes

The following classes enable functionality within the CMS. Some are automatically added to elements and some are added manual to components via the component configuration dialog's CSS Class field. The descriptions for each describe whether they are automatic and what the functionality is. Each one is also linked to an example.

NOTE: Utility classes listed here work in all themes unless otherwise noted.

table-responsive - automatic in Moss theme - adds horiz scroll for tables on mobile devices

textAnchor - automatic in Moss theme - adds class to allow for in-page anchors to not be obscured by sticky top nav

vt-datatable - manual - add to Text or HTML component - initializes and runs table formatting for dataTables in Text components

vt-datatable-formatted - manual - add to Text or HTML component - initializes and runs table formatting for dataTables in HTML components where the table already has proper thead and tbody tags

vt-tablesorter - manual - add to Text or HTML component - initiates and runs table formatting for table sorter functions in Text components

vt-tablesorter-formatted - manual - add to Text or HTML component - initiates and runs table formatting for table sorter functions in HTML components where the table already has proper thead and tbody tags

vt-c-mta-select-# - manual - add to Multi Tabs / Accordion component - allows for the default opening of a tab or accordion fold on page load; "#" to be replaced by fold/tab number, e.g., vt-c-mta-select-3 to open the third tab or fold

vt-c-list-curated, vt-c-list-pruned - manual - add to List component - filters pruned list(s) by the items in curated list(s) to prevent duplicate list items being displayed on the same page.

vt-transparent-bg - manual - add to Image component - causes grey background on Image component to be turned transparent. Does not translate to lists.

vt-c-list-no-carets - manual - add to Text, Feed Reader, or List component - turns off list carets

vt-c-no-top-margin - * One theme only - add to any component - turns off the outer top margin of the component. Multicolumn components will also need to add this class to the top-most component in each column.

vt-c-no-bottom-margin - * One theme only - add to any component - turns off the outer bottom margin of the component. Multicolumn components will also need to add this class to the last component in each column.

vt-c-no-top-bottom-margin - * One theme only - add to any component - turns off the outer top and bottom margins of the component. Multicolumn components will also need to add the vt-c-no-bottom-margin class to the last component in each column.

vt-c-no-side-margins - * One theme only - add to any component - turns off the outer side margins of the component so it will stretch the width of the body column (not the same as Container component full width checkbox). Multicolumn components will also need to add this class to all components in each column, if desired.

vt-c-no-margins  - * One theme only - add to any component - turns off all outer margins of the component. Multicolumn components will also need to add this class to all components in each column, if desired.

vt-page-no-top-margin - * One theme only - add to Page body class field of Page Properties to remove the top margin and padding from the body and right column of a page.

vt-page-no-top-bottom-margin - * One theme only - add to Page body class field of Page Properties to remove the top and bottom margins and padding from the body and right column of a page.

vt-page-no-margins - * One theme only - add to Page body class field of Page Properties to remove all margins and padding from the body and right column of a page.

vt-no-tags - * One theme only - add to Page body class field of Page Properties to remove the tags area from an article page.

 

Offset two-column, multicolumns component classes

One theme and VTMag2 theme - Multicolumn components are normally evenly sized. If you need different sized columns in your layout, you have more options. These are applied using CSS classes on the multicolumn component.

NOTE: These classes only apply to two column multicolumn components. They will not work with more than two columns.

Custom column classes vary based on the 12 column Bootstrap grid. Percentages should be calculated based on x/12 where "x" is the column width value. Here are all the options:

  • vt-2col-md-6-only
  • vt-2col-7-4-offset-1
  • vt-2col-4-7-offset-1
  • vt-2col-7-5
  • vt-2col-5-7
  • vt-2col-8-4
  • vt-2col-4-8
  • vt-2col-9-3
  • vt-2col-3-9

Body inheritance via inherited footer classes

It is possible in the One theme to insert inherited content into the body or right column of a page using the following classes.

vt-body-inherit - add to footer items you would like to move to the bottom of the body column of a page. Use with vt-body-inherit-here to insert at a specific page location.

vt-body-inherit-top - add to footer items you would like to move to the top of the body column of a page. Does not work with vt-body-inherit-here class.

vt-body-inherit-here - add to a Container component in the body or right column to set the exact insertion point on the page for the vt-body-inherit component.

vt-body-no-inherit - add to Page properties -> Advanced -> Page body class to turn off display of inherited item on a page.

One theme utility classes and additional features

The One theme uses and extends existing utility classes while also adding new classes specifically for the One theme. This section of the document will cover the utility classes enhancements and the new ones that are specfic to the One theme.

Utility classes get applied to components by:

  1. Click on the component
  2. Click the wrench icon to access the configuration dialog
  3. Type or paste the class into the CSS Class field on the first page of component configuration options.

This utility class works on images that have transparent backgrounds as before, but it will now turn off the portrait and square image treatment within the theme. Add this class to Image or List components that you don't want to have reformatted with the new treatment. The images below show the effects of adding the class to a portrait image.

Below is a portrait formatted image with the deafult theme effect applied to it.

Portrait Image With Processing

Below is a portrait formatted image without the default theme effect applied to it by using the vt-transparent-bg class on the component.

Portrait Image No Process

This utility class prevents the table processing script in the One theme from operating on a table or all tables within a Text component. This will not put the header information into the table data cells for the mobile view of the table. It does not override the mobile formatting of the table and should be used only as a last resort.

This utility class is specific to the List component table display option. If you have a List that uses the DisplayType -> Table under Display Options in the configuration dialog you can hide the header row of the table with this class. This class should be used only when there is sufficient context elsewhere around the List component table to explain its contents as hiding the table header without proper context could be considered an accessibility violation.

The image below shows a List component with DisplayType set to Table and the table header is visible.

The image below shows a List component with DisplayType set to Table and the table header is not visible because the utility class was added to the component.

This utility class is specific to the List component and will make unequal hieght list items stretch to match their heights. The images below show the effects of the class on a List component.

Below is a List component with the default item rendering for DisplayType -> Columns.

Below is a List component with the utility class item rendering for DisplayType -> Columns.

This utility class allows you to hide footer items that don't display information on a page, e.g., Analytics components, custom styles or scripts in an HTML component, etc. so the grey in-page/inherited footer area won't display the grey box above the default footer should there be nothing else in it that might need to be displayed. The non-display items with this class will still apply scripts and styles, but will not cause the grey box to appear unnecessarily.

The image below shows a grey bar above the default footer due to an HTML component being inherited with only style and script tags for site customizations.

The image below shows the grey bar above the default footer removed by adding the utility class to the HTML component with the style and script tags.

The vt-text-margins class can be applied to any component you want to have match the standard Text component margins.

The vt-open-newTab class will add a target="_blank" to ALL links in a component so they open a new tab or window with the link URL.