Add Custom CSS and Javascript To Your Drupal 8 Site

Add Custom CSS and Javascript To Your Drupal 8 Site

One of the most common questions in our training is how to add custom CSS or Javascript to a Drupal site.

The best solution, of course, is to add it to the theme (preferably a sub-theme); however many times site builders and editors don’t have access to the codebase of a Drupal site.

To accomplish this, you can use the Asset Injector module.  This module combines CSS Injector and JS Injector from Drupal 7 into one.

Let’s get started…

1. Install and enable the Asset Injector module.

Head over to https://www.drupal.org/project/asset_injector and either download the latest recommended version of the project (usually with a green background) or right-click on the .tar or .zip file and copy the location.

Asset Injector Download

Install the Asset Injector module:

  • Click Extend.
  • Click Install New Module.
    • If you copied the URL from the project page, paste it into the “Install from a URL” field and click Install.
    • If you downloaded the module, click on the “choose file” button, select the file and click Install.

After the installation is done:

  • Click Enable Newly Added Modules link.
  • Check Asset Injector in the Development section.

Install Asset Injector

  •  Scroll down and click “Install”.

2. Add Custom CSS

  • Go to Configuration > Development > Asset Injector

Asset Injector

  • Click CSS Injector.
  • Click “Add CSS Injector”
  • Enter a label.
  • Enter CSS code.  No need to add <style> </style>.

CSS in Asset Injector

If you click Save Now using the example above, every H1 tag (page titles etc.) will be red in color.

You can limit where this CSS is applied!  Assets can be restricted by:

  • Content Type
  • Theme
  • Node ID
  • User Role

Note:  These settings can be combined, requiring all or just one of them for the condition to be applied under, “Condition Requirements”.

Asset Injector Conditions

  • Click Save if you made any changes
  • Click Back to Site to review the update!

3. Adding Javascript

Adding Javascript is essentially the same process as above.

  • Go to Configuration > Development > Asset Injector > JS Injector and click “Add JS Injector”.

JS Injector

  • Enter a label.
  • Enter JS code.
  • Select any of the Advanced Options required.
  • Select any conditions (they are the same as CSS Injector).
  • Click Save.

Note: These configurations use the Drupal 8 Entity API and therefore, all configurations are held in the database. This means they are exportable using Configuration Synchronization or custom module installs using yml files.  This is great for multi-site installations where each site may have a few minor differences.

Also, at the time of this writing, the module does not work well with asset overrides, be it in settings.php, from the language system or other contributed modules.


Summary

You don’t need to be a themer to add some CSS or Javascript to your Drupal 8 website.  The Asset Injector module is a helpful addition for any site builder.

Instructor

  • Rod holds two masters degrees and has been training people how to do "things" for over 25 years. Originally from Australia, he grew up in Canada and now resides just outside Cincinnati, Ohio. He has worked in both the non-profit and for-profit worlds, in small companies and large corporations. His extensive open source experience includes WordPress, Joomla, Drupal and Moodle and he really knows how to help you get the most out of the system you chose. Rod plays ice hockey a couple of times a week and rides his Goldwing motorcycle pretty much everywhere he can.

0 0 votes
Blog Rating
Subscribe
Notify of
8 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Natasha Bieber

Thanks for one marvelous posting! I enjoyed reading it. I will make sure to bookmark your blog and may come back someday. I want to encourage that you continue your great posts.

ckeen

Thank you for this Rod.  I’d looked at Asset Injector a month ago, but didn’t understand how to make it work.  Now I do!

Reinhard Krapp

Thank you very much for your explanation. As always: Short, precise and easy to understand. Well done. Without your lessons on YouTube I would have abandoned Drupal already some time ago.

calvar18asu-edu

Fantastic! I’m a marketer that found Drupal 8 so confusing but the Drupal 8 Explained Book and these video training are helping me make all the needed updates. 

mikall

awesome! Thanks for sharing your experience with OST!

piolo

hi can can i add the time clock in my quiz custom module

Deeksha

please can i know is there a way to remove subject from comment

8
0
Would love your thoughts, please comment.x
()
x