Extra CSS UI
This module provides a user-friendly interface for administrators to add or override site-wide CSS rules directly within the Drupal administration area. The CSS is safely stored, sanitized, and served as a dedicated CSS file that loads after your theme's stylesheets, ensuring your customizations are applied correctly without modifying code files.
Provides a secure, admin-friendly interface to add site-wide CSS additions and overrides directly through the Drupal UI.
This module allows site administrators to add/override CSS rules without touching code or theme files.
The CSS is stored in configuration, sanitised for safety, and served as a proper `.css` file that loads after all theme CSS, ensuring your overrides take effect reliably.
Features
- Add and override site-wide CSS directly in the Drupal admin interface.
- Clean UI with syntax highlighting (CodeMirror-based).
- Safe sanitisation that strips harmful protocols and, optionally, `@import` statements.
- Output served as a proper `.css` file (cached, CDN-safe).
- Configurable theme, library, and filename integration; works with any theme.
- Loads after the theme’s main stylesheet, preserving CSS cascade order.
- No database hacks, no extra custom fields/logic, no inline styles.
Installation
Install and enable the module as usual:
composer require drupal/extra_css_ui
drush en extra_css_ui
drush crPost-Installation
Visit the module's admin page at `/admin/config/development/extra-css-ui` (Configuration > Development > Extra CSS UI), open the 'Configuration' fieldset and configure the following settings:
a. Frontend theme: Select the theme you want to apply this CSS too.
b. Theme library name: Select the name of the library in the theme's *.libraries.yml* file that includes your final CSS. (Typically this is global-styling but can eb different in some cases)
c. Filename: Enter the filename you want to use for your CSS. (This just changes the filename output in the source code)
d. Sanitise `@import` statements: Check this box to strip `@import` statements from your CSS.
e. Maximum size (KB): Set the maximum filesize allowed for the CSS file. Additional CSS will be truncated if the file size exceeds this limit.
f. Save settings via the 'Save configuration' button.
Similar projects
This module provides some similar functionality to Critical CSS UI but in a more simplistic, less-targeted, site-wide way.