Suppose I want to add some custom CSS and JavaScript to be used on every page in the Umbraco backoffice. And suppose it's not associated with any component (plugin, dashboard, tree item, package, etc.) in particular (i.e., it applies globally). And suppose I'd like it to remain intact across Umbraco upgrades (i.e., can't update umbraco.css, as that'd get overwritten). It would ideally apply everywhere (i.e., in the trees and the dashboards and sidebar controls).
What is the most straightforward way of adding this CSS/JavaScript?
Some example use cases (in case you need some convincing this is a valid requirement):
Change background color globally (e.g., so dev/stage/prod are clearly different).
Darkening the Umbraco version number (so users can see it more clearly).
Replacing the search box (e.g., so we can prevent typeahead from pegging the CPU on installs with lots of members).
I could go on. And I could submit many suggestions for these items to the Umbraco issue tracker. However, having a straightforward way of injecting CSS/JavaScript would allow me to address any issues I have immediately in a sustainable manner (i.e., so upgrades don't clobber my changes).
I know you mentioned that we should suppose that you should not need a plugin etc. - But I'm thinking that's probably the best option really since it does not get overwritten when you're making upgrades - You could of course find the "Master" of the umbraco backoffice and then reference your own stylesheet in there...but that path would have to be inserted each time you upgrade.
So if you don't mind the plugin approach I think you should be able to simply add a folder in the plugin called "CustomBackoffice" and within it just place a package manifest with a reference to as CSS file...don't know if it would be necessary to create a dummy view and fill in a dummy plugin name/alias etc. as well though.
That may very well work. I had assumed that plugins only had their CSS/JS loaded if they were used (e.g., in a property editor). However, looking at one of the plugins I built, its CSS/JS is loaded right when I log into Umbraco (before any property editors are displayed). I guess that's the best way to go. Thanks!
For anybody curious about what Jan is talking about, you'd basically create a folder called "Stuff" in the App_Plugins folder, then create three files in the "Stuff" folder:
whatever.js
whatever.css
package.manifest
You could put what you like in whatever.js and whatever.css. Your package.manifest would look like this:
Obviously, the folder "Stuff" and the "whatever" files could be called anything of your choosing.
Yeah, noticed this behavior the other day when I was hacking something together for a test purpose and got confused because there was too much padding on the list of content nodes all of the sudden - Forgot to add a class that I could use in my selector...so thought that it would work in your scenario :)
Umbraco caches plugins pretty aggressively (on the server side). It could be that you need to delete the ClientDependency and PluginCache folders in the App_Data\TEMP folder, then recycle your app pool (and clear your browser cache).
I'm trying to do the same thing but it isn't working for me. Following instructions here I have created a package.manifest in a new folder ZC in App_Plugins as per the example but my stylesheet isn't being included in the output. Not sure what I'm doing incorrectly. Version is 7.3.7. CSS file is:
{
css: [
'~/App_Plugins/ZC/zebracrossing.css'
]
}
The stylesheet definitely exists at that location and is included in the project, just not rendered in the output.
Can't quite remember if Matt's post mentions that one needs to make sure locally switch the debug attribute in web.config to "true" instead of "false" - Otherwise things are being cached pretty hard and it's not possible to see such changes - Also make sure that you empty your browser cache.
If that does not help could you then please try checking your browsers console log to see if it holds any errors? Sometimes the package manifest syntax can be wrong. which can also be the cause of things not showing up/working.
I've checked the debug setting in the compilation element and it is set to true.
The file is getting parsed. If I change a forward slash to a back slash the UmbracoTraceLog file reports a "Bad JSON escape sequence" exception.
Changing it back, the page source doesn't include the markup for the stylesheet. It's not a 404. I've cleared the browser cache, I've cleared the TEMP caches.
I'm kind of new to Umbraco so I'm not sure where else to look to try to resolve this.
UPDATE: so I've checked the Master.cshtml page and there's really no obvious place where the stylesheet might be injected. How does Umbraco add the markup for the plugin?
Ok - What exact version of Umbraco are you using? It might be a bug in .7.4 beta for instance - If not then could you perhaps try bumping the version number in the clientdependency.config in /config/ClientDependency.config and see if that does anything? You might need to recycle the application pool afterwards.
Version is 7.3.7. I was following this getting started bog and created two new visual studio projects and then install-package ... to add Umbraco. The website loads and I can login and configure it. But the instructions to add a stylesheet don't seem to have any effect on the markup rendered. Not sure if that helps?
But shouldn't I see the stylesheet markup to include my css file rendered in the html? I'm a little confused how this is supposed to work. I assumed that by putting a stylesheet into the plugin folder that Umbraco would create the <link rel="stylesheet" type="text/css" ... markup in the output. Is this not how it works?
No your own stylesheet will not be included like that - All styling will be bundled into one stylesheet as far as I remember. So looking for this in the source code of the Umbraco backoffice is not going to help :) - You'll need to use the inspect tool to see if your styles have been applied to the elements your targetting - It will also display whether your styles have been "overruled" due to higher specifity.
It is some of the backoffice styling you're trying to overwrite, right?
If you are curious about the JavaScript file referenced by the package.manifest, you won't see that in the repo because it is generated from other files during the build process.
I know this is old, but I did this a while back too and was able to get it to work. My issue now was I had to add one more style to my custom CSS sheet.
I did the runaround with upping the clientdependency.config file with a new version number (nothing uppdated), hit the web.config and resaved (no updated CSS), created a brand new folder with new styles and app manifest and uploaded it to the server (I did not see it at first BUT after upping the version number in the clientdependency.config file AND hitting the web.config again I saw my new folder with my new styles).
So that said, yes Umbraco caches everything EXTREMELY hard. But I also am not sure existing files get updated unless there is a job or something ran because the web.config file resave didn't even show me the updated CSS file that existed on the server already (yes made sure it was uploaded on the actual server... it was).
My guess if you are going to do this and you got it to work BUT then you want to update the CSS or JS files and you don't see your updates (JS might be different), I would keep your copy on your local machine, delete the one from the server, hit the clientdependency.config and the web.config and then reupload the updated CSS files and folder again then do the process with the config files again.
Custom CSS/JavaScript for Umbraco Backoffice?
Suppose I want to add some custom CSS and JavaScript to be used on every page in the Umbraco backoffice. And suppose it's not associated with any component (plugin, dashboard, tree item, package, etc.) in particular (i.e., it applies globally). And suppose I'd like it to remain intact across Umbraco upgrades (i.e., can't update umbraco.css, as that'd get overwritten). It would ideally apply everywhere (i.e., in the trees and the dashboards and sidebar controls).
What is the most straightforward way of adding this CSS/JavaScript?
Some example use cases (in case you need some convincing this is a valid requirement):
I could go on. And I could submit many suggestions for these items to the Umbraco issue tracker. However, having a straightforward way of injecting CSS/JavaScript would allow me to address any issues I have immediately in a sustainable manner (i.e., so upgrades don't clobber my changes).
Hi Nicholas
I know you mentioned that we should suppose that you should not need a plugin etc. - But I'm thinking that's probably the best option really since it does not get overwritten when you're making upgrades - You could of course find the "Master" of the umbraco backoffice and then reference your own stylesheet in there...but that path would have to be inserted each time you upgrade.
So if you don't mind the plugin approach I think you should be able to simply add a folder in the plugin called "CustomBackoffice" and within it just place a package manifest with a reference to as CSS file...don't know if it would be necessary to create a dummy view and fill in a dummy plugin name/alias etc. as well though.
Hope this makes sense.
/Jan
Hi Jan,
That may very well work. I had assumed that plugins only had their CSS/JS loaded if they were used (e.g., in a property editor). However, looking at one of the plugins I built, its CSS/JS is loaded right when I log into Umbraco (before any property editors are displayed). I guess that's the best way to go. Thanks!
For anybody curious about what Jan is talking about, you'd basically create a folder called "Stuff" in the App_Plugins folder, then create three files in the "Stuff" folder:
You could put what you like in whatever.js and whatever.css. Your package.manifest would look like this:
Obviously, the folder "Stuff" and the "whatever" files could be called anything of your choosing.
Hi Nicholas
Yeah, noticed this behavior the other day when I was hacking something together for a test purpose and got confused because there was too much padding on the list of content nodes all of the sudden - Forgot to add a class that I could use in my selector...so thought that it would work in your scenario :)
Happy tweaking!
/Jan
I'm trying to add a styling to property editor made with LeBlender and added to content through grid.
I tried your approach with package.manifest and css file in App_Plugins/CustomStyles but I can't see that the styles are loaded.
What am I missing? Do I need to register the plugin somewhere?
Umbraco caches plugins pretty aggressively (on the server side). It could be that you need to delete the ClientDependency and PluginCache folders in the App_Data\TEMP folder, then recycle your app pool (and clear your browser cache).
Thanks, I'll try that.
Hi Nicholas
Is that a working solution or a solution that you are working on ? I need to hookup a stylesheet too.
I figures it out and works. The manifest file should be in a folder as well.
I'm trying to do the same thing but it isn't working for me. Following instructions here I have created a
package.manifestin a new folderZCinApp_Pluginsas per the example but my stylesheet isn't being included in the output. Not sure what I'm doing incorrectly. Version is 7.3.7. CSS file is:The stylesheet definitely exists at that location and is included in the project, just not rendered in the output.
Hi David and welcome to our :)
Can't quite remember if Matt's post mentions that one needs to make sure locally switch the debug attribute in web.config to "true" instead of "false" - Otherwise things are being cached pretty hard and it's not possible to see such changes - Also make sure that you empty your browser cache.
If that does not help could you then please try checking your browsers console log to see if it holds any errors? Sometimes the package manifest syntax can be wrong. which can also be the cause of things not showing up/working.
/Jan
Thanks Jan
I've checked the debug setting in the
compilationelement and it is set to true.The file is getting parsed. If I change a forward slash to a back slash the UmbracoTraceLog file reports a "Bad JSON escape sequence" exception.
Changing it back, the page source doesn't include the markup for the stylesheet. It's not a 404. I've cleared the browser cache, I've cleared the TEMP caches.
I'm kind of new to Umbraco so I'm not sure where else to look to try to resolve this.
UPDATE: so I've checked the
Master.cshtmlpage and there's really no obvious place where the stylesheet might be injected. How does Umbraco add the markup for the plugin?Hi David
Ok - What exact version of Umbraco are you using? It might be a bug in .7.4 beta for instance - If not then could you perhaps try bumping the version number in the clientdependency.config in /config/ClientDependency.config and see if that does anything? You might need to recycle the application pool afterwards.
/Jan
Hi Jan
Version is 7.3.7. I was following this getting started bog and created two new visual studio projects and then
install-package ...to add Umbraco. The website loads and I can login and configure it. But the instructions to add a stylesheet don't seem to have any effect on the markup rendered. Not sure if that helps?Thanks
Hi David
Well, it can also be that your styles are not specific enough to override the default styles in the backoffice?
/Jan
But shouldn't I see the stylesheet markup to include my css file rendered in the html? I'm a little confused how this is supposed to work. I assumed that by putting a stylesheet into the plugin folder that Umbraco would create the
<link rel="stylesheet" type="text/css" ...markup in the output. Is this not how it works?Thanks
Hi David
No your own stylesheet will not be included like that - All styling will be bundled into one stylesheet as far as I remember. So looking for this in the source code of the Umbraco backoffice is not going to help :) - You'll need to use the inspect tool to see if your styles have been applied to the elements your targetting - It will also display whether your styles have been "overruled" due to higher specifity.
It is some of the backoffice styling you're trying to overwrite, right?
/Jan
Ok thanks, that's starting to make more sense now. I'll have a look at what is being emitted and see if I can figure out what is happening.
Thanks for your help
FYI, I just upgraded to Umbraco 7.3.7 and it's working perfectly fine. Here are some of the files for your reference:
If you are curious about the JavaScript file referenced by the package.manifest, you won't see that in the repo because it is generated from other files during the build process.
I know this is old, but I did this a while back too and was able to get it to work. My issue now was I had to add one more style to my custom CSS sheet.
I did the runaround with upping the clientdependency.config file with a new version number (nothing uppdated), hit the web.config and resaved (no updated CSS), created a brand new folder with new styles and app manifest and uploaded it to the server (I did not see it at first BUT after upping the version number in the clientdependency.config file AND hitting the web.config again I saw my new folder with my new styles).
So that said, yes Umbraco caches everything EXTREMELY hard. But I also am not sure existing files get updated unless there is a job or something ran because the web.config file resave didn't even show me the updated CSS file that existed on the server already (yes made sure it was uploaded on the actual server... it was).
My guess if you are going to do this and you got it to work BUT then you want to update the CSS or JS files and you don't see your updates (JS might be different), I would keep your copy on your local machine, delete the one from the server, hit the clientdependency.config and the web.config and then reupload the updated CSS files and folder again then do the process with the config files again.
Your guess worked perfectly for me. Thanks
Hi there,
I am also stuck on adding CSS and JavaScript library for a custom section dashboard in Umbraco 14.
There is lots of changes in Umbraco 14 . Can anyone please send me an example for a custom section with a dashboard with CSS and JavaScript library?
is working on a reply...