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).
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.