Global CSS
Inject a CSS file into every page.
# description
Registers a stylesheet that Liferay adds to the page HEAD on every render. Simpler than a `themeCSS` extension when you only need to layer a few rules — no need to replace `clay.css` or `main.css`, just append your overrides. The `scope` field controls where the CSS applies: `layout` (default) covers site pages; `company` covers every instance page including Liferay admin. Great for CSS-custom-property overrides shipped alongside a Custom Element widget so the widget theme travels with its host page.
UI extensions that render on Liferay pages or modify page appearance.
# when to use
- →You want a small CSS override site-wide without maintaining a full theme.
- →You need to tweak variables or shadow-DOM styles from a paired Custom Element.
- →Rapid iteration on a design fix before promoting to a theme extension.
# how to use
- 01Author your CSS under
assets/(or wherever youassemble:from). - 02Set
url:to the assembled path. - 03Optionally scope to
layout(default, site pages) orcompany(also admin pages).
# required fields
| field | type | description |
|---|---|---|
urlrequired | string | Path to the CSS file. |
# optional fields
| field | type | description |
|---|---|---|
name | string | Display name. |
scope | enum(company, layout) | layout = site pages (default). company = every instance page including admin. |
# example
client-extension.yaml
my-global-css:
type: globalCSS
name: Brand overrides
url: brand.css