Custom CSS

Custom CSS lets you add your own CSS rules directly from Theme Style. Use it for design adjustments that are not available through the standard Creative Elements controls.

Custom CSS

Add your own CSS rules in the code editor.

You can use selector to target the current wrapper element, target elements inside it, or write your own CSS selector.

Adding Custom CSS

Enter your CSS directly in the Custom CSS editor. The editor uses CSS syntax and is intended for custom rules that extend or override the styles configured elsewhere in Creative Elements.

For example:

selector {
    color: red;
}

This uses selector to target the current wrapper element.

Using selector

The special selector keyword represents the wrapper element associated with the Custom CSS control. This allows you to write CSS without manually finding or entering its generated wrapper selector.

To style the wrapper itself:

selector {
    color: red;
}

To style an element inside the wrapper:

selector .child-element {
    margin: 10px;
}

Using custom selectors

You are not limited to the selector keyword. You can also use regular CSS selectors when you intentionally want to target specific classes, IDs, or elements.

For example:

.my-class {
    text-align: center;
}

Because a custom selector is independent of the Creative Elements wrapper, make sure it is specific enough to target only the elements you intend to change.

When to use Custom CSS

Custom CSS is useful when a design cannot be created entirely with the available visual controls. Typical uses include:

• Applying a CSS property that does not have a Creative Elements control.
• Targeting a specific child element inside a component.
• Creating more specific hover, focus, or state styles.
• Adjusting styles provided by the active PrestaShop theme.
• Adding small visual refinements without modifying theme files.

CSS specificity

If a Custom CSS rule does not appear to work, another rule may have higher CSS specificity or may be loaded later.

Before increasing specificity, check:

• Whether the selector matches the correct element.
• Whether the CSS property is being overridden by another rule.
• Whether an inline or more specific style is already applied.
• Whether cached CSS needs to be regenerated or cleared.

Use only as much specificity as necessary. Highly specific selectors can make future styling changes harder to maintain.

Custom CSS and Theme Style

Theme Style should normally be used for reusable visual rules such as typography, buttons, images, icons, form fields, backgrounds, and layout settings. Custom CSS is best used as an extension when those controls do not cover a particular requirement.

This keeps most of the design editable through the visual interface while reserving CSS for genuine exceptions.

Recommended workflow

1. First check whether the required style is available through a standard Creative Elements control.
2. If not, identify the element that needs to be targeted.
3. Use selector when the rule should be scoped to the current wrapper.
4. Use a custom CSS selector only when you intentionally need to target another element or a broader set of elements.
5. Keep selectors as simple and specific as necessary.
6. Test the result on the front office and across the relevant responsive sizes.
7. After larger CSS changes, clear or regenerate cached CSS if the latest styles are not visible.