Horizontal spacing on Campaign and Promo

Created on 25 August 2025, 21 days ago

Problem/Motivation

The Campaign component has background color that is seperate to the general page background, and

Steps to reproduce

  1. Install CivicTheme 1.11.0
  2. Create a basic page
  3. Add a Campaign and Promo page component with Dark backgrounds
  4. Notice that the Campaign image is hard up against the left border with a weird looking top-left, and also a "drop shadow" that looks odd.
  5. Notice that the Promo text is hard up against the left border of the container div, and the link button is hard up against the right.

Proposed resolution

Add additional CSS to increase padding.

🐛 Bug report
Status

Active

Version

1.11

Component

Code

Created by

🇦🇺Australia Toby Wild

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Toby Wild
  • Hi @tobywild, thanks for raising.

    Promos: when you use the promo with a dark background you need to check the box "Background". This adds the spacing required. However, it's not clear that the user really does need to check this when using a dark background. If it's a light background, then the promo appears to be okay with or without that checked. Maybe a help text update would be good here.

    Campaign: the drop shadow is part of the design. A similar drop shadow is present in the Banner when you choose to style it in a certain way.
    The spacing in the Campaign is indeed an issue. Seems to me this also needs a "Background" checkbox and this needs to apply padding at the top and the sides .

  • 🇦🇺Australia Toby Wild

    Hi Fiona,

    For the Campaign and Promo, even when a Light version is selected, a different background color is shown

    And since the Theme field is mandatory, there is no way around it.

    This appears to be because the Campaign uses:

    .ct-campaign.ct-theme-light {
        background-color: var(--ct-campaign-light-background-color);
    }

    And the Promo uses:

    .ct-promo.ct-theme-light {
        background-color: var(--ct-promo-light-background-color);
        border-color: var(--ct-promo-light-border-color);
    }

    But it doesn't show for the Content block, because that only has the colour defined, not the background colour:

    .ct-basic-content.ct-theme-light {
        color: var(--ct-color-light-body);
    }
  • Thanks @tobywild, I'll prep this for 1.13 release.

Production build 0.71.5 2024