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.

/* Style the View container background */
VIEW_SELECTOR {
    background: #f5f5f5;
}

/* Style table headers inside this View */
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.

/* Target this View by its anchor ID */
#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 of this View */
#gv-view-VIEW_ID-1 {
    max-width: 600px;
}

/* Second instance of this View */
#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 a custom SITE_NAME placeholder for use in Custom CSS and JavaScript.
 *
 * @since 2.50.0
 *
 * @param array    $placeholders Associative array of placeholder => replacement value pairs.
 * @param \GV\View $view         The View object.
 * @param string   $content      The original content before replacement.
 *
 * @return array Modified placeholders array.
 */
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.