Adding custom CSS to your Views

GravityView allows you to add custom CSS directly to a View through the Custom Code tab in the View Settings. The CSS loads only when that View renders, so it won’t affect other pages on your site.

Note: This feature requires GravityView 2.19 or later. Placeholders require GravityView 2.50 or later.

How to add custom CSS #

Edit your View in WordPress.
Scroll down to the Settings metabox.
Click the Custom Code tab (the code icon).
Enter your CSS in the Custom CSS field.
Click Update or Publish.

The CSS is placed inside <style> tags in the page’s <head>, after GravityView’s default styles. This means your custom CSS takes priority over GravityView’s built-in styles.

Available placeholders #

GravityView provides three placeholders that are automatically replaced with View-specific values when the page loads. Use these to write CSS that targets only this View.

Placeholder	Replaced with	Example output
`VIEW_SELECTOR`	A CSS selector targeting only this View	`.gv-container.gv-container-123`
`VIEW_ID`	The View’s ID number	`123`
`GF_FORM_ID`	The connected Gravity Forms form ID	`5`

Using VIEW_SELECTOR (recommended)

VIEW_SELECTOR is the easiest way to scope styles to a single View. It outputs a double-class selector (e.g., .gv-container.gv-container-123) that provides high specificity, so you typically don’t need !important.

VIEW_SELECTOR {
    background: #f5f5f5;
}

VIEW_SELECTOR .gv-table-view th {
    background: #333;
    color: white;
}

VIEW_SELECTOR {
    background: #f5f5f5;
}

VIEW_SELECTOR .gv-table-view th {
    background: #333;
    color: white;
}

Using VIEW_ID

VIEW_ID is useful when you need the raw View ID number, for example in an HTML id attribute selector.

#gv-view-VIEW_ID-1 {
    border: 2px solid #0073aa;
}

#gv-view-VIEW_ID-1 {
    border: 2px solid #0073aa;
}

Targeting multiple instances of the same View

When the same View is embedded multiple times on a page, each instance gets a unique HTML id with an incrementing number: gv-view-{VIEW_ID}-1, gv-view-{VIEW_ID}-2, etc.

/* First instance */
#gv-view-VIEW_ID-1 {
    max-width: 600px;
}

/* Second instance */
#gv-view-VIEW_ID-2 {
    max-width: 100%;
}

/* First instance */
#gv-view-VIEW_ID-1 {
    max-width: 600px;
}

/* Second instance */
#gv-view-VIEW_ID-2 {
    max-width: 100%;
}

Using GF_FORM_ID

GF_FORM_ID is replaced with the connected Gravity Forms form ID. If the View does not have a connected form, this placeholder is left as-is to avoid generating invalid CSS.

Important notes #

Placeholders are case-sensitive and must be uppercase.
Placeholders are replaced everywhere in your code, including inside comments.
Custom CSS is output only once per View, even if the same View is embedded multiple times on a page.
The double-class selector from VIEW_SELECTOR provides enough specificity that !important is typically unnecessary.

Developer notes #

Custom CSS is added using WordPress’s wp_add_inline_style() function, attached to the gravityview_default_style handle. This means it loads in the <head> after GravityView’s main stylesheet.

You can add custom placeholders using the gk/gravityview/custom-code/placeholders filter:

add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );

add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );

Note: If you have removed the default container classes using the gravityview/render/container/class filter, the VIEW_SELECTOR placeholder will not match your View’s container. Use the VIEW_ID placeholder instead.