Skip to content Skip to navigation

CSS Injector: How to keep custom styles out of your edit pages

If you're writing CSS Injector styles to adjust the look of your Drupal site, it's easy to accidentally get what I call "CSS bleed" into the administrative experience, which can make things look pretty funky on edit screens. In this tutorial, I'll quickly explain how to avoid overriding the styles of your administration theme.

CSS Injector in a nutshell

CSS Injector is a very convenient module for making small CSS changes without having to dig into the website's code. On Stanford Sites, we use CSS Injector frequently to make tweaks (or substantial changes) to the look and feel of our websites. You can learn more about the basics how to use CSS Injector.

By default, any CSS you write will be applied throughout your site, including on administrative pages like edit screens, even if you are using a different theme for administration, which can make things look very strange for your editors.

Excluding admin pages

Because the makers of CSS Injector are pretty smart, they know that sometimes we want to make style changes for specific pages or sets of pages. This can be helpful for making exceptions in styles for special content. By adding a list of pages you want to exclude from the CSS rules the CSS injector will know to not implement these styles for the listed pages.

Example image of pages to exclude from the CSS rules

Above you can see an example screenshot for how the "Add the CSS on specific pages"-section of the CSS injector administrative page coud look like. In this example, we have decided to add the CSS styles, for a specific CSS rule, to every page except the following pages:

admin
admin*
node/*/edit
block/*/edit*
block/add*
node/add*
user/*/edit
node/*/delete

This means that if you - for example - have added a snippet of CSS code for applying a red footer on your entire site, this red footer will not appear while editing a node (node/*/edit), nor when you're doing other administrative tasks (admin*) on your site.

The wildcard (*) is used to cover all pages related to a path. For example, the "node/*/edit" states that the CSS rules should be excluded from all nodes while editing, no matter of the node id. In this case, the page will be exluded from the CSS rules for the path "node/15/edit" as well as for "node/potatoes/edit", since the wildcard could be anyset of characters.

Conclusion

I hope this post can help you prevent some unnecessary headaches as a result of not being able to target and style the desired pages on your site. The CSS injector has some powerful built-in functionalities and using those will hopefully help you bring your website to the next level of aesthetics and on the right pages (even though a rotating "Save" button in the editing mode could be quite cool sometimes).

Categories: