Themes: styling your Views with Legacy or Vantage

In GravityView 3.0 and later, every View has a theme. A theme sets how the View looks. There are two themes: Legacy, the original GravityView design, and Vantage, a newer design with its own colors, type sizes, and spacing. A theme changes only the styling. Your View keeps its fields and entries.

Legacy and Vantage side by side #

Here is a List View with the Legacy theme:

Here is the same View with Vantage. It keeps its single-column layout.

Applying the Vantage theme to a View #

1. In your WordPress dashboard, go to GravityKit, then All Views, and open the View you want to change.
2. Scroll to the Settings box below the Layout box, and click the Styles tab.
3. Under Theme, click Vantage.
4. Click Update.

To go back, click Legacy and click Update again.

Themes for new and existing Views

New Views start with Vantage, unless you change the default as described below. Views created before GravityView 3.0 keep the Legacy theme until you switch them, so updating GravityView does not change how they look.

To choose the theme that new Views start with:

1. In your WordPress dashboard, go to GravityKit, then Settings.
2. In the settings menu, click GravityView.
3. Under Appearance, set Default theme to Vantage or Legacy.
4. Click Save Settings.

This setting applies only to Views you create after the change.

Displaying entries as a card grid #

When a View uses Vantage, the List, Layout Builder, and DIY layouts can show entries as a grid of cards, one entry per card. Two settings on the Styles tab control the grid:

Columns and Equal Height appear only when Vantage is selected, and they do not appear on Table or DataTables Views.

To create a grid:

1. On the Styles tab, with Vantage selected, click a Columns value from 2 to 6.
2. Click Update, then preview the View.

The card grid on smaller screens #

The grid shows fewer columns as the screen gets narrower:

These widths are measured on the browser window. A View in a narrow sidebar keeps its full number of columns on a wide screen.

Using Vantage with the Table layout #

Vantage also styles Table and DataTables Views. It restyles the Search Bar, borders, spacing, and links, and your columns and data stay where they are.

Here is a Table View with the Legacy theme:

Here is the same Table View with Vantage:

Tables on phones

On screens 640 pixels wide or narrower, a Vantage Table View shows each row as a card. Each value appears under its column name, one below the other. The header row is hidden from view, and screen readers can still use it.

To set how wide each column is and how long text wraps in a table, see Column widths and text wrapping in Table Views.

Changing Vantage colors #

Vantage uses your WordPress theme’s font, but its own text sizes and colors: blue links and buttons on white cards.

To change the colors, override Vantage’s design tokens. Design tokens are CSS custom properties: named values, such as --gv-color-primary, that Vantage reads for each color and size. The GravityView CSS design tokens reference lists them.

To change one View, add the tokens to the Custom CSS box on the View’s Custom Code tab, inside a VIEW_SELECTOR rule. GravityView replaces VIEW_SELECTOR with a selector for that View.

VIEW_SELECTOR {
    --gv-color-primary: #b91c1c;
    --gv-color-link: #b91c1c;
}

VIEW_SELECTOR {
    --gv-color-primary: #b91c1c;
    --gv-color-link: #b91c1c;
}

In this example, --gv-color-primary changes the button color and the color of the current page number, and --gv-color-link changes the link color.

To change every Vantage View on your site, add the same tokens to your site’s CSS on a .gv-container rule.

Custom CSS with each theme #

The Custom CSS box on the View’s Custom Code tab works differently with each theme:

• With Vantage, GravityView limits each rule to this View, including its Single Entry page, so your CSS does not affect other Views or the rest of the page. The exceptions are @font-face, @keyframes, and @import rules, which apply to the whole page.
• With Legacy, your CSS applies to the whole page. Start each selector with VIEW_SELECTOR, or with VIEW_WRAPPER for the Search Bar and other widgets, to limit a rule to this View.

For the placeholders you can use, see Adding custom CSS to your Views.