CSS Injector
The CSS Asset Injector allows you to insert custom styles onto your pages that are not included by default in our distribution. It is useful for instances where you need to make specific style changes without impacting the overall theme of the site.
The CSS injector is found in Configuration > Asset Injector > CSS Injector
Injectors you create are organized in a list for usability. Select "Add Css Injector" to create a new injector.
The injector's primary interface allows you to create a title for your injector, as well as enter any selectors and styles that you want to include on your site. We do not recommend using the selector to override default styles related to the theme of the site or styles that are imperative to maintaining Web Standards 2.0 compliance.
Under the stylesheet, you can set options for additional logic that the injector will follow once it is created. These options will appear under "Conditions" in the injectors list shown earlier. An injector with no specified conditions will be active globally on the site.
- Content type: Restricts the injector to certain content types.
- Webform: Restricts the injector to certain webform types.
- Pages: Restricts the injector to certain pages. Pages are entered according to their path (e.g. /people/faculty)
- Theme: Restricts the injector to certain themes. This option is not recommended as it implies the user has created an unauthorized theme.
- User Role: Restricts the injector to certain roles. This is a useful option if you want to hide certain aspects of a page to anonymous users.
- Condition Requirements: By default, this feature is set to TRUE. This ensures that your injector is only active on pages where all of your conditions have been met. You can uncheck this feature if you want your injector to be active on pages where any number of your conditions are true.
Some options have a "negate the condition" option. This inverts the logic used for the condition (e.g. Checking "Negate the condition" on the screenshot above would specify that the asset injector is active all pages where the content type is NOT example).
Custom Classes
The CSS injector is often used in conjunction with custom classes, which are used to customize specific rows on your pages. They can be found at the bottom of your row's edit menu, with additional classes separated by spaces:
In this example, we are reducing the default top and bottom padding for this row from 64px to 5px. After saving, the custom class appears in the outermost element for the row.
We see that the 64px padding here (highlighted in green) is attached to <div> element with the classes "paragraph" and "inner-container", which is a child of the element that has our custom class.
Thus, we will target the child element in our asset injector to modify the style:
Final result showing the updated style, with the previous styles overridden:
It's important to note here why we used a custom class to adjust the padding instead of directly targeting the element with the "paragraph-inner" and "container" classes. Some default classes have inherited styles that will be more specific according to CSS rules than the styles you enter in your injector. This means your injector styles will be overridden by default styles and won't appear. Adding the custom class here and targeting the desired element as a child of the custom class negates this issue and reduces the chances of unintended consequences. You can read more about CSS specificity here.
JS Injector
The JS Asset Injector allows you to insert custom behaviors onto your pages that are not included by default in our distribution. It is useful for instances where content should be manipulated before the page is displayed to the user.
The JS injector is found in Configuration > Asset Injector > JS Injector
Injectors you create are organized in a list for usability. Select "Add JS Injector" to create a new injector.
The injector's primary interface allows you to create a title for your injector, as well as enter any selectors and styles that you want to include on your site. We recommend creating your own custom classes (via the custom class feature or within the HTML code interface) as targeting default classes could lead to unintended results.
The JS Injector accepts both vanilla Javascript and JQuery.
JQuery
In Drupal 8, an additional step needs to be taken to ensure that JQuery is properly loaded onto your page.
With few exceptions, nearly all JQuery code is wrapped with a $(document).ready function. This ensures that the code is only executed after the DOM is finished loading. In Drupal 8, JQuery code is wrapped in a drupal.behaviors object, which looks like this:
The drupal.behaviors object ensures that the code runs both on page load and after any AJAX requests. You can read more about how drupal.behaviors works here.
Advanced Options
The JS Injector gives you four options for inserting your code onto the site:
- Include JQuery: This option includes the JQuery library upon page load. A must have when using JQuery as this will prevent you from accessing JQuery methods or the ($) shorthand notation if not checked.
- Preprocess JS: This option is for developers who prefer using JS preprocessors like CoffeeScript to write their code.
- Load the script in the header of the page: Only recommended for very specific cases, as loading script files in the header may impact loading speeds.
- Include <noscript> tag when file is included: For developers who want to display an alternate option to users who have scripts disabled in their browser.
Conditions
Under the Advanced Options, you can set additional criteria that the injector will follow once it is created. These options will appear under "Conditions" in the injectors list shown earlier. An injector with no specified conditions will be active globally on the site.
- Content type: Restricts the injector to certain content types.
- Webform: Restricts the injector to certain webform types.
- Pages: Restricts the injector to certain pages. Pages are entered according to their path (e.g. /people/faculty)
- Theme: Restricts the injector to certain themes. This option is not recommended as it implies the user has created an unauthorized theme.
- User Role: Restricts the injector to certain roles. This is a useful option if you want to hide certain aspects of a page to anonymous users.
- Condition Requirements: By default, this feature is set to TRUE. This ensures that your injector is only active on pages where all of your conditions have been met. You can uncheck this feature if you want your injector to be active on pages where any number of your conditions are true.
Some options have a "negate the condition" option. This inverts the logic used for the condition (e.g. Checking "Negate the condition" on the screenshot above would specify that the asset injector is active all pages where the content type is NOT example).