In this tutorial, you will learn how you can inject your own custom stylesheets and Javascript files into the Umbraco back office. The original reason I needed to do this was due to a bug in a package. I was using the doctype grid editor with the Related Links. When viewed in the sidebar, the 'Add' button was cropped. This prevented content editors from adding new links, as seen below:
As the sidebar has a fixed width, when you use related links, the 'Add' button gets cropped. The solution is pretty simple, I just needed to add a little snippet of CSS to make the sidebar wider. Below shows the CSS that I wanted to inject:
How To Add Custom Styles and JS Into The Umbraco Backend
You may never have noticed, but, whenever you install a Umbraco package most of them use custom CSS. If you want to add custom CSS and JS, all you need to do is follow the steps to create a custom Umbraco package. To do this, first, create a folder within your App_Plugins folder. You can call it whatever you want, I'm calling mine style.css:
In the folder, you will need to create two files:
package.manifestThe package definition file will tell Umbraco where to find your custom stylesheet or JS files- A stylesheet/JS file
Within package.manifest will need to add the following config:
As you can probably tell within the manifest file you can add links to CSS and JS files. As I only needed to add CSS then in this example I'm only referencing a stylesheet. After adding the files and reloading my Umbraco backend, my stylesheet which I called style.css loads, making my custom CSS available. My doctype editor stops cropping the sidebar!
That's it... CSS injected... Happy Coding 🤘
