ES Content Display is designed to inherit the visual language of the active Joomla template rather than impose a separate theme.

Style Presets

Open:

Advanced → Style Preset

Available presets:

Default / Template-friendly

Neutral baseline with restrained borders and spacing.

Soft Surface

Adds subtle surfaces, rounder corners and a light shadow.

Minimal Separators

Reduces the card-like appearance and emphasizes simple separators.

Presets do not change the underlying content structure or renderer behavior.

Custom CSS Class

Use:

Advanced → Custom CSS Class

to add one or more class names to a specific ES Content Display module instance.

Example:

my-help-directory

You can then target that instance in the template's custom stylesheet.

CSS variables

The module exposes these variables:

--es-cd-border-width
--es-cd-border-radius
--es-cd-spacing
--es-cd-focus-width
--es-cd-border-color
--es-cd-surface
--es-cd-surface-hover
--es-cd-surface-active
--es-cd-shadow

Example override:

.my-help-directory {
    --es-cd-border-radius: 0.75rem;
    --es-cd-spacing: 1.25rem;
    --es-cd-border-color: rgba(0, 0, 0, 0.2);
}

Scoping recommendation

Prefer overrides on either:

.es-content-display { ... }

for all instances, or a module-specific Custom CSS Class for one instance.

Avoid global selectors such as:

button { ... }
article { ... }

because they can affect unrelated Joomla/template content.

No free-form CSS parameter

ES Content Display does not inject arbitrary CSS entered into a module parameter. Advanced styling should be maintained in the Joomla template/custom stylesheet, where it remains easier to audit and maintain.