Reference custom css or js file in ~/Umbraco/Umbraco.aspx
Hi,
Umbraco version 6.1.6
I am trying to do some light cosmetic enhancements in the Umb back office. My goal is pretty straight-forward (I think): I want to alter the indentation of certian nodes in the content tree that are of a particular document type so that it's clear to the editors that this node is "special".
I have done what I would consider to be the hard part - I've managed to intercept the tree rendering process (using BaseTree.BeforeNodeRender event) and now have a CSS class sitting happilly in the <li> tag of the nodes I want to indent. All I need to do now is add some basic CSS to target that class - right?
I could just add the style rules inline right there in the <li> but the properties available to me in the BeforeNodeRender event only seem to let me add CSS classes - they do not allow access to the style attribute of the node item so I need to add some CSS rules to an external stylesheet.
I'm stumped as to how I can get one of my own stylesheets to be referenced in ~/Umbraco/Umbraco.aspx (which is the page on which the content tree is rendered).
Manualy editing ~/Umbraco/Umbraco.aspx (to insert a reference to my stylesheet) is not an option as it would hinder Umbraco upgrades. Manually editing the default back office stylesheet is out of the question for the same reason.
This looks like it should do exactly what I want it to do but I can't get it to work - even the default js/css files supplied with the package don't get referenced in the back office pages as they are supposed to.
Which is great - except that it relies on the fact that the page you want to inject into uses a master page (it involves creating a handler for the Init event of umbracoPage which is a master page that most of the back office pages implement - umbraco.aspx does not use a master page.)
I have a feeling that the solution is a lot simpler than the things I've tried so far butmy heads so full of event handlers and master pages, I can no longer see the wood for the trees.
Anyone done this before or have any bright ideas as to how to go about it bearing in mind that modifying Umbraco source code is not an option for me?
I hear your frustration! I haven't tried BackOfficePowerScripts in v6.1.5 - it did work with v6.0.x (at the time of release), not sure what might have changed since then. My guess is that it's to do with the back-office's URL (as it can be either /umbraco/, /umbraco/default.aspx or /umbraco/umbraco.aspx - confusing eh?!)
Thanks for getting back to me. For some reason, despite mentioning you twice in my problem, I didn't quite expect a reply from you personally!
I had a quick look at the Page State Icons package - it's good but I don't think its quite what I'm looking for.
I will fork the Power Scripts project on Bitbucket and see if I can figure out whats stopping it from working in Umbraco 6.1.x. If I find a solution, I'll do a pull request and let you review/have the changes.
Thanks for getting back to me and I'll let you know how I get on.
The client I'm working with uses Team Foundation Server as a VCS (The only VCS I've ever worked with that works against you instead of with you ;)).
TFS puts exclusive locks (Read Only) on all files unless you explicitly check them out for editing.
The web.config file was not getting updated during the install process of BOPS so the config files were not getting registered.
It's quite an edge case really and probably isn't even worth looking into but I didn't get any errors during install of the package, nor in the ~/App_Data log files or the SQL umbracoLog table. I guess not many people installing BOPS are going to have exclusive locks on their web.config files.
Big fan of Lee's work over here, however this is the first I've seen of this BOPS package which looks great! Thank you for pointing this out.
I've been resorting to manually hacking umbraco.aspx, then making a backup of this file which I refer to immediately following (actually, as part of) an upgrade to diff my changes back into the new fresh copy.
Fortunately this umbraco.aspx file hasn't seemed to change much if at all from version to version so not very painful to deal with. (Yet.) Hacky, but it's how I've always done this. Will certainly be looking at this package next time I have to do this! (And hope that we don't have to reinvent the wheel again when v7 becomes the norm!)
Did you guys find a way to dynamically inject a css file reference or an inline style attribute into umbraco.aspx? I just need to add a single css class.
@Jon - I managed to solve the problem by injecting javascript into all pages that inherit from master page (in the content frame) asyou mentioned above.
That javascript uses window.parent.document to get from the iframe "up" to the parent and then inject whatever css (or reference to a css file) that I need - pretty hacky but I think slightly better than modifying /umbraco.aspx - the code I inject into the content frame looks like this:
try {var css = '<style type="text/css">.leaf-override ul { display: none !important; } .leaf-override { background: none !important; }</style>';
var $topLevel = $(window.parent.document, window.parent.document);
//inject the css if it doesnt exist already
var lastStyle = $('head style', $topLevel).last();
if(!lastStyle || !lastStyle[0].innerHTML.match("^.leaf-override"))
$('head', $topLevel).append(css);
} catch(e) {}
cool - did you manage to find the code in the power scripts that does the js injection into umbraco.aspx for you? I need that for a package I just released so having it rely on another package is not ideal (although I kind of fixed it with a hack anyway).
You'll need to have a poke around in the source code for BOPS and maybe chat to Lee about it.
He's using a HttpModule and the UmbracoClientDependencyLoader internally to get the references into the page. You can download the source code for BOPS (https://bitbucket.org/vertino/backoffice-power-scripts-for-umbraco/src) or hack the Our.Umbraco.BackOfficePowerScripts.dll in dotPeek to get at his code.
I agree about not wanting to include/rely on the BOPS package - especially when it's a simple CSS/JS injection.
I've done it with a few other packages, basically I use a HttpModule to set-up a Response.Filter, then perform a RegEx on the response/output to do the injection/string-replacement.
Thanks Lee - my injection mechanism via the content area iframe "reaching" up into the parent outlined on page 1 of this thread seems to be working fine. Since it is part of a package it means I dont have to worry about packaging up a Http Handler, making web.config changes etc.
As an aside (if you're interested), the HttpModule approach I take makes use of the DynamicModuleUtility API (which was part of .NET 4.0), so that the HttpModule is dynamically registered - so no Web.config changes required. (It works really nicely for drop-in DLLs)
Reference custom css or js file in ~/Umbraco/Umbraco.aspx
Hi,
Umbraco version 6.1.6
I am trying to do some light cosmetic enhancements in the Umb back office. My goal is pretty straight-forward (I think): I want to alter the indentation of certian nodes in the content tree that are of a particular document type so that it's clear to the editors that this node is "special".
I have done what I would consider to be the hard part - I've managed to intercept the tree rendering process (using BaseTree.BeforeNodeRender event) and now have a CSS class sitting happilly in the <li> tag of the nodes I want to indent. All I need to do now is add some basic CSS to target that class - right?
I could just add the style rules inline right there in the <li> but the properties available to me in the BeforeNodeRender event only seem to let me add CSS classes - they do not allow access to the style attribute of the node item so I need to add some CSS rules to an external stylesheet.
I'm stumped as to how I can get one of my own stylesheets to be referenced in ~/Umbraco/Umbraco.aspx (which is the page on which the content tree is rendered).
Manualy editing ~/Umbraco/Umbraco.aspx (to insert a reference to my stylesheet) is not an option as it would hinder Umbraco upgrades.
Manually editing the default back office stylesheet is out of the question for the same reason.
Options already explored:
1. Back Office Power Scripts package by Lee Kelleher
http://our.umbraco.org/projects/backoffice-extensions/backoffice-power-scripts
This looks like it should do exactly what I want it to do but I can't get it to work - even the default js/css files supplied with the package don't get referenced in the back office pages as they are supposed to.
2. Another tip by Lee Kelleher found in this Gist:
https://gist.github.com/leekelleher/3865621
Which is great - except that it relies on the fact that the page you want to inject into uses a master page (it involves creating a handler for the Init event of umbracoPage which is a master page that most of the back office pages implement - umbraco.aspx does not use a master page.)
I have a feeling that the solution is a lot simpler than the things I've tried so far butmy heads so full of event handlers and master pages, I can no longer see the wood for the trees.
Anyone done this before or have any bright ideas as to how to go about it bearing in mind that modifying Umbraco source code is not an option for me?
Jon
Hi Jon,
I hear your frustration! I haven't tried BackOfficePowerScripts in v6.1.5 - it did work with v6.0.x (at the time of release), not sure what might have changed since then. My guess is that it's to do with the back-office's URL (as it can be either
/umbraco/
,/umbraco/default.aspx
or/umbraco/umbraco.aspx
- confusing eh?!)You mention that you only want to change the display of a tree node - take a look at another package called Page State Icons, it might be useful? http://our.umbraco.org/projects/backoffice-extensions/page-state-icons
Let me know how it goes, as I'm sure there is another way to achieve what you want.
Cheers,
- Lee
Hi Lee,
Thanks for getting back to me. For some reason, despite mentioning you twice in my problem, I didn't quite expect a reply from you personally!
I had a quick look at the Page State Icons package - it's good but I don't think its quite what I'm looking for.
I will fork the Power Scripts project on Bitbucket and see if I can figure out whats stopping it from working in Umbraco 6.1.x. If I find a solution, I'll do a pull request and let you review/have the changes.
Thanks for getting back to me and I'll let you know how I get on.
Jon
Hi Lee,
I just installed the BackOffice Power Scripts package onto a fresh install of Umbraco 6.1.6 and it works absolutely fine.
Clearly there are complications somewhere in my solution that are stopping BOPS from working :-(
Time to start looking for needles in haystacks!
Thanks anyway,
Jon
Hi Jon,
Good to hear that it's working again - I know what you mean about needles in haystacks! :-)
If you do find out that the original issue was, (no rush though), let me know - would be good to iron out any bugs, etc.
Cheers,
- Lee
Hi Lee,
I figured it out!
The client I'm working with uses Team Foundation Server as a VCS (The only VCS I've ever worked with that works against you instead of with you ;)).
TFS puts exclusive locks (Read Only) on all files unless you explicitly check them out for editing.
The web.config file was not getting updated during the install process of BOPS so the config files were not getting registered.
It's quite an edge case really and probably isn't even worth looking into but I didn't get any errors during install of the package, nor in the ~/App_Data log files or the SQL umbracoLog table. I guess not many people installing BOPS are going to have exclusive locks on their web.config files.
All working fine now - back in the game ;)
Thanks for your suggestions.
Jon
Big fan of Lee's work over here, however this is the first I've seen of this BOPS package which looks great! Thank you for pointing this out.
I've been resorting to manually hacking umbraco.aspx, then making a backup of this file which I refer to immediately following (actually, as part of) an upgrade to diff my changes back into the new fresh copy.
Fortunately this umbraco.aspx file hasn't seemed to change much if at all from version to version so not very painful to deal with. (Yet.) Hacky, but it's how I've always done this. Will certainly be looking at this package next time I have to do this! (And hope that we don't have to reinvent the wheel again when v7 becomes the norm!)
Did you guys find a way to dynamically inject a css file reference or an inline style attribute into umbraco.aspx? I just need to add a single css class.
@Jon - I managed to solve the problem by injecting javascript into all pages that inherit from master page (in the content frame) asyou mentioned above.
That javascript uses window.parent.document to get from the iframe "up" to the parent and then inject whatever css (or reference to a css file) that I need - pretty hacky but I think slightly better than modifying /umbraco.aspx - the code I inject into the content frame looks like this:
To get the above js into the content frame via the masterpage i use the approach outlined here:
http://24days.in/umbraco/2012/extending-the-back-office/
Regards,
Matt
Hi Matt,
I managed to do everything I needed to do with Lee's BOPS package and found this to be the most elegant and least hacky approach from all the examples I found online:
http://our.umbraco.org/projects/backoffice-extensions/backoffice-power-scripts
The only thing you need to watch out for when trying to inject references into umbraco.aspx page is that page can be called by a few different URLs:
I worked around this by adding a couple of rules to my ~/config/UrlRewriting.config file:
Hope this helps,
Jon
cool - did you manage to find the code in the power scripts that does the js injection into umbraco.aspx for you? I need that for a package I just released so having it rely on another package is not ideal (although I kind of fixed it with a hack anyway).
Regards,
Matt
Hi Matt,
Yes - to get a js file into umbraco.aspx, install the BOPS package and the edit
Adding something like this:
You'll also need the UrlRewrite rules from my previous post
Be sure to restart the app (recycle app pool or edit web.config) in order for the BOPS config to kick in.
I meant without using the BOPS package and writing your own code to do it :-)
Looking at the source now - looks like it uses the ApplicationEventsHandler
Sorry Matt,
I misunderstood your question.
You'll need to have a poke around in the source code for BOPS and maybe chat to Lee about it.
He's using a HttpModule and the UmbracoClientDependencyLoader internally to get the references into the page. You can download the source code for BOPS (https://bitbucket.org/vertino/backoffice-power-scripts-for-umbraco/src) or hack the Our.Umbraco.BackOfficePowerScripts.dll in dotPeek to get at his code.
Jon
Hi Matt,
Not sure if you still need help on this one?
I agree about not wanting to include/rely on the BOPS package - especially when it's a simple CSS/JS injection.
I've done it with a few other packages, basically I use a HttpModule to set-up a
Response.Filter
, then perform a RegEx on the response/output to do the injection/string-replacement.Let me know, I can try to dig out a code-snippet.
Cheers,
- Lee
Thanks Lee - my injection mechanism via the content area iframe "reaching" up into the parent outlined on page 1 of this thread seems to be working fine. Since it is part of a package it means I dont have to worry about packaging up a Http Handler, making web.config changes etc.
Regards,
Matt
Cool, glad that you have a workable solution.
As an aside (if you're interested), the HttpModule approach I take makes use of the
DynamicModuleUtility
API (which was part of .NET 4.0), so that the HttpModule is dynamically registered - so no Web.config changes required. (It works really nicely for drop-in DLLs)Here's an example that I did for my Shortcodes package: https://github.com/leekelleher/umbraco-shortcodes/blob/master/Our.Umbraco.Shortcodes/Events/ApplicationEventsHandler.cs
All the best with your package - if I get chance over the next week I'll take a look and give any feedback.
Cheers,
- Lee
is working on a reply...