How To Use Your Own Custom CSS Styles In The Umbraco Backend

In this tutorial, you will learn how you can inject your own custom stylesheets and Javascript files into the Umbraco back office.  Hopefully, you will never need to do this, however, if you have an issue with a custom package and you can't wait for the developer to fix it, this approach can be your quickest win. In my situation, I needed to inject some CSS as I was using the doctype grid editor with the Related Links.  When viewed in the sidebar, the 'Add' button was cropped prevented content editors adding new links:

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:

.umb-overlay.umb-overlay-right {
    width: 50% !important;
}

All I needed was a way is to inject the CSS, read on to learn how

How To Add Custom Styles and JS Into The Umbraco Backend

You may never have noticed, but, whenever you add a third-party Umbraco package in the majority of situations, additional CSS is also injected.  If you want to add custom CSS and JS, then all you need to do is follow the steps to create a custom Umbraco package.  

First, create a folder within your App_Plugins folder.  You can call it whatever you want, I'm calling mine 'CustomCSS':

In the folder, you will need to create two files, package.manifest - the package definition file - which will define where Umbraco will look for your custom stylesheet and JS and a stylesheet to add my custom style and the stylesheet itself. 

Your manifest file will need to add the following config:

{
  "propertyEditors": [],
  "javascript": [],
  "css": [
    "~/App_Plugins/CustomCSS/style.css"
  ]
}

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 I'm only linking to that.  After adding my style I mentioned above into style.css and reloading my Umbraco backend.  MY CSS is injected and now my doc type editor stops cropping the sidebar.

That's it... CSS injected.. simples

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top