The frontend of Event Gallery draws its colours, corner radii and shadows from one set of CSS custom properties, the --eg-* tokens.
They are declared once on :root with zero specificity, so a few lines in the custom CSS of your template change the whole component: the format dialog, the selection bar, the cart page, the mini cart module and the checkout.
Add your overrides to the custom stylesheet of your template (Cassiopeia loads media/templates/site/cassiopeia/css/user.css if it exists) or to any stylesheet which loads after media/com_eventgallery/dist/eventgallery.css.
Example: a red accent colour.
:root {
--eg-primary: #b91c1c;
--eg-primary-hover: #991b1b;
--eg-primary-soft: #fee2e2;
}
These are the tokens and their defaults:
| Token | Default | Used for |
|---|---|---|
|
| Accent colour: active tab, selected format, badges, the tick of a selected image, the highlighted method card |
|
| Hover state of the accent colour |
|
| Light accent background, e.g. the selected payment method and the counter of the mini cart |
|
| Text and icons drawn on the accent colour |
|
| Outline and tick of the selected images |
|
| Headlines, prices, labels |
|
| Descriptions and hints |
|
| Borders of cards, rows and controls |
|
| Border of a card under the pointer |
|
| Background of cards, the dialog and the selection bar |
|
| Background of hints and disabled formats |
|
| Applied promotion codes |
|
| Required markers, invalid fields, the remove action |
|
| Corner radius of cards and the dialog |
|
| Corner radius of rows and inputs |
|
| Corner radius of small buttons |
| 3px, 25 % of the accent colour | Focus ring of controls |
| soft shadow | Shadow of the dialog |
|
| Transition of hover and focus states |
A token can also be changed for one part of the page only, because the tokens are inherited: .eventgallery-minicart-module { --eg-primary: #0f766e; } recolours the mini cart module and nothing else.
Buttons, inputs and cards keep their Bootstrap classes (btn, form-control, card) and take their look from your Joomla template. If your template’s buttons are green, the buttons of Event Gallery are green too; the tokens do not touch them.
![[Note]](/media/com_docimport/admonition/note.png) | Dark templates |
|---|---|
|
Event Gallery does not switch to a dark palette on its own, because it cannot tell whether your template is dark. If it is, set the tokens for it, for example: :root {
--eg-surface: #1f2937;
--eg-surface-muted: #374151;
--eg-text: #f3f4f6;
--eg-text-muted: #9ca3af;
--eg-border: #4b5563;
}
|