Stylesheet Overrides

Customize or replace the plugin’s default styles without modifying plugin files.

Approach 1: Add custom styles (recommended)

Enqueue your own stylesheet after the plugin’s styles using a higher priority:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my-igcf-overrides',
        get_stylesheet_directory_uri() . '/css/igcf-overrides.css',
        array( 'igcf-campaign-form' ), // Depend on the plugin stylesheet.
        '1.0.0'
    );
}, 20 ); // Priority 20 to load after the plugin's default priority of 10.

This approach layers your styles on top of the defaults, so you only need to write rules for what you want to change.

Approach 2: Replace a stylesheet entirely

Dequeue the plugin’s stylesheet and enqueue your own replacement:

add_action( 'wp_enqueue_scripts', function() {
    // Remove the plugin's campaign form styles.
    wp_dequeue_style( 'igcf-campaign-form' );

    // Enqueue your replacement.
    wp_enqueue_style(
        'my-campaign-form',
        get_stylesheet_directory_uri() . '/css/campaign-form.css',
        array(),
        '1.0.0'
    );
}, 20 );

Caution

When replacing a stylesheet entirely, you are responsible for styling all elements. Copy the plugin’s SCSS source (src/scss/campaign-form.scss) as a starting point.

Stylesheet handles

These are the handles you can target:

Handle	Loaded on	Source file
igcf-campaign-form	Campaign form page	build/css/campaign-form.css
igcf-auth-form	Auth form page	build/css/auth-form.css
igcf-single-campaign	Single campaign page	build/css/single-campaign.css
igcf-archive-campaign	Campaign archive	build/css/archive-campaign.css
igcf-dashboard	Creator dashboard page	build/css/dashboard.css
igcf-update-list	Admin update list screen	build/css/update-list.css

CSS specificity tips

The plugin’s styles use BEM classes with low specificity (single class selectors). This makes them easy to override:

/* Plugin default (specificity: 0-1-0) */
.igcf-campaign-form__button--primary {
    background-color: var(--wp--preset--color--primary);
}

/* Your override — same specificity, wins by source order */
.igcf-campaign-form__button--primary {
    background-color: #ff6600;
    border-radius: 50px;
}

If you need higher specificity, scope your rules to a parent:

/* Higher specificity (0-2-0) */
.my-page .igcf-campaign-form__button--primary {
    background-color: #ff6600;
}

CSS custom properties

The plugin exposes CSS custom properties you can override globally:

:root {
    --igcf-form-max-width: 600px;   /* Default: 800px */
    --igcf-success-color: #22c55e;
    --igcf-error-color: #ef4444;
}

See the CSS Classes Reference for the full list.