Styling

Most visual changes are available as module settings. This page covers the CSS layer underneath, for when you need more than the settings offer.

Markup structure

<dialog class="nxpopup" style="--nxpopup-bg: …">
  <div class="nxpopup__frame" tabindex="-1">
    <button class="nxpopup__close">…</button>
    <div class="nxpopup__inner">
      <h2 class="nxpopup__title">…</h2>
      <div class="nxpopup__body">…</div>
      <div class="nxpopup__actions">
        <a class="nxpopup__cta">…</a>
      </div>
    </div>
  </div>
</dialog>

Element	Role
.nxpopup	The <dialog> itself — rounded clipping and open/close transitions.
.nxpopup--bordered	Added when Render Popup Border is on.
.nxpopup__frame	Optional white frame; also the initial focus target.
.nxpopup__inner	The visual card, carrying the background image.
body.nxpopup-open	Added to <body> while any popup is open, locking page scroll.

Custom properties

The template sets these on the dialog element from your module settings. Overriding them is the cleanest way to restyle a popup:

Property	Setting it comes from
--nxpopup-bg	Background Color
--nxpopup-image	Background Image
--nxpopup-image-position	Background Position
--nxpopup-image-size	Background Size
--nxpopup-title-highlight	Title Highlight Color
--nxpopup-title-align	Title Alignment
--nxpopup-content-align	Content Alignment
--nxpopup-button-bg	Button Background Color
--nxpopup-button-color	Button Text Color
--nxpopup-button-border	Button Border Color

Targeting one campaign

Use the Module Class Suffix field (Advanced tab) to add your own class, then scope your rules to it:

.nxpopup.my-campaign .nxpopup__inner {
    width: 480px;
    height: auto;
}

.nxpopup.my-campaign .nxpopup__title {
    font-size: 2rem;
}

Each instance also has a unique ID of the form #mod-nxpopup-<module id> if you need to be more specific.

Default dimensions

The card is 600 × 600 on desktop. Below 640px it becomes full width, with a height floor capped to the viewport so it always fits.

To make a card that sizes to its content instead:

.nxpopup.my-campaign .nxpopup__inner {
    width: min(600px, 100%);
    height: auto;
}

The backdrop

The dimmed overlay is the native ::backdrop pseudo-element:

.nxpopup.my-campaign::backdrop {
    background: rgba(0, 0, 0, 0.75);
}

Animation

Open and close are driven by CSS transitions on opacity and transform, using @starting-style and transition-behavior: allow-discrete. The default is roughly 280ms.

Any custom transition should keep opacity or transform among the animated properties — the script waits for one of those to finish before closing the dialog, with a 400ms safety timeout.

All animation is disabled automatically for visitors with prefers-reduced-motion: reduce.

Template overrides

For structural changes beyond CSS, copy the module's layout into your template:

templates/YOUR_TEMPLATE/html/mod_nxpopup/default.php

Then select it under Layout on the Advanced tab. The layout receives pre-validated variables — see the docblock at the top of the file for the full list.

Keep the hooks intact

The front-end script depends on [data-nxpopup], [data-nxpopup-close], [data-nxpopup-config], and .nxpopup__frame. Removing any of these will stop the popup working.

Loading behaviour

The module emits its own <link> and <script type="module"> tags rather than using Joomla's Web Asset Manager. A site module renders after the document head is built, so asset-manager registration would arrive too late and be dropped.

Each instance emits the same URLs, which the browser de-duplicates — a same-URL ES module is fetched and evaluated once. This keeps every cached module fragment self-contained. URLs are cache-busted by file modification time, so updates are picked up without a hard refresh.