Skip to main content

Adding CSS to Your Website (via Asset Injector)

1. Log in
  1. Sign in to the Drupal site with an account that has Administrator or Site Builder permissions.

  2. If you do not have these permissions, ask your site administrator to grant them or to apply the CSS for you.

     

2. Navigate to Asset Injector
  1. From the left-hand menu, go to: Configuration → Development → Asset Injector.
  2. Click the CSS Injector card or link.
3. Add a new CSS rule
  1. Click the button labeled Add CSS (or similar).
  2. In the form that appears:
    • Label: Enter a clear name (e.g. Homepage Banner Styling).
    • Code: Paste the CSS rules you want to apply.
  3. Example CSS (copy into the Code box):
.site-header {
  background-color: #003366;
  color: #ffffff;
}


.page-title {
  margin-bottom: 8px;
}
 
4. Set conditions (optional)
  1. If available, you can restrict the CSS to specific pages, paths, or content types:
    • Leave blank to apply site-wide.
    • Use the path or content-type fields to target specific pages only (for example, /about or content type Article).
 
5. Save and verify
  1. Click Save.
  2. Reload the public site (or the targeted page) and verify the styling changes are visible.
  3. If you do not see the change:
    • Clear the Drupal cache (Configuration → Development → Performance → Clear caches) or ask the administrator to do so.
    • Hard-refresh your browser (Ctrl/Cmd + Shift + R) to bypass cached files.
 
Tips & best practices
  • Test first: Apply CSS in a staging or development site before saving in production.
  • Label clearly: Use descriptive labels so other editors understand the purpose of each rule.
  • Keep changes small: Prefer small, focused CSS rules rather than large, sweeping overrides.
  • Document: Add a short note in the label or a shared doc describing what the CSS changes and why.
  • Rollback: If something breaks, disable or remove the CSS entry to revert quickly.