OSTips – Add CSS & Javascript to Your Drupal Site
So you’re a Drupal 8 site builder, and you don’t have access to the theme, but you need to test out some CSS or JavaScript to see if it’s going to work just the way you want. Well, I have a solution for you.
In this episode, I want to talk to you about a terrific module called Asset Injector that can be used to add CSS & Javascript to your Drupal site without having to access the theme or mess with a lot of code.
Let’s take a look!
“Welcome to OSTips from OSTraining. I’m Rod Martin.
I’m over here at drupal.org on the Asset Injector page, and you’ll note that you’re able to inject CSS and JavaScript using this really great module. It installs like any other module and was last updated in December of 2019. You’ll also note that the Drupal 9 version is planned to be released, so that’s really terrific. This module will continue to be available to us.
- install the module
- go to configuration development
You’ll see a new item called Asset Injector. You can choose to inject either CSS or JavaScript. I’m just going to use a simple CSS example to make the point.
- click on CSS injector
- give it a name
- add the actual CSS code (you don’t need anything except the actual CSS for whatever variable you’re trying to manipulate.)
- decide whether it’s just print, screen, or all (you can pre-process the CSS if you need to)
- add conditions to say where this CSS should be injected
Well, I’ve made it pretty simple. I’ve just injected it on one individual node, but you can really pinpoint where your CSS or JavaScript is going to be injected.
- click Save
- go to that node
Here I am on the home page. When I click on the node to test my CSS, I see that my h1 has turned red! It worked!
Well that’s it.
Although, this is not a replacement for having your CSS and JavaScript properly placed inside your theme, but in a pinch the Asset Injector module can really be a time-saver and even a lifesaver.
Thanks for watching. This has been OStips from OS Training, and I’m Rod Martin.”