Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jon Ratcliffe 20 posts 47 karma points
    Oct 11, 2013 @ 12:49
    Jon Ratcliffe
    2

    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

     

     

     

     

     

     

     

     

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Oct 12, 2013 @ 00:49
    Lee Kelleher
    1

    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

  • Jon Ratcliffe 20 posts 47 karma points
    Oct 13, 2013 @ 20:12
    Jon Ratcliffe
    1

    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 

  • Jon Ratcliffe 20 posts 47 karma points
    Oct 14, 2013 @ 10:51
    Jon Ratcliffe
    0

    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

     

     

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Oct 14, 2013 @ 10:54
    Lee Kelleher
    0

    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

  • Jon Ratcliffe 20 posts 47 karma points
    Oct 14, 2013 @ 11:15
    Jon Ratcliffe
    1

    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

     

     

     

     

     

  • Funka! 398 posts 661 karma points
    Oct 16, 2013 @ 04:41
    Funka!
    1

    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!)

  • Matt 76 posts 280 karma points
    Dec 12, 2013 @ 23:28
    Matt
    0

    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.

  • Matt 76 posts 280 karma points
    Dec 13, 2013 @ 09:32
    Matt
    0

    @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) {}

     

    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

  • Jon Ratcliffe 20 posts 47 karma points
    Dec 13, 2013 @ 09:52
    Jon Ratcliffe
    0

    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:

    ~/umbraco/
    ~/umbraco/umbraco.aspx
    ~/umbraco/default.aspx

    I worked around this by adding a couple of rules to my ~/config/UrlRewriting.config file:

    <add name="BackOfficePowerScriptsFixOne"
    virtualUrl="^~/umbraco/default.aspx$"
    rewriteUrlParameter="ExcludeFromClientQueryString"
    destinationUrl="~/umbraco/umbraco.aspx"
    ignoreCase="true" redirect="Application"/>
    <add name="BackOfficePowerScriptsFixTwo"
    virtualUrl="^~/umbraco/$"
    rewriteUrlParameter="ExcludeFromClientQueryString"
    destinationUrl="~/umbraco/umbraco.aspx"
    ignoreCase="true" redirect="Application"/>

     

    Hope this helps,

     

     

    Jon

     

     

     

  • Matt 76 posts 280 karma points
    Dec 13, 2013 @ 09:56
    Matt
    0

    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 

  • Jon Ratcliffe 20 posts 47 karma points
    Dec 13, 2013 @ 10:04
    Jon Ratcliffe
    0

    Hi Matt,

    Yes - to get a js file into umbraco.aspx, install the BOPS package and the edit

    ~/config/BackOfficePowerScripts.config

    Adding something like this:

    <BackOfficePowerScripts>
     <scripts>
         <add path="~/scripts/your-custom-javascript.js" targets="umbraco.aspx" />
     </scripts>
    </BackOfficePowerScripts>

    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.

  • Matt 76 posts 280 karma points
    Dec 13, 2013 @ 10:06
    Matt
    0

    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

  • Jon Ratcliffe 20 posts 47 karma points
    Dec 13, 2013 @ 10:11
    Jon Ratcliffe
    0

    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

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Dec 15, 2013 @ 21:25
    Lee Kelleher
    0

    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

  • Matt 76 posts 280 karma points
    Dec 15, 2013 @ 21:41
    Matt
    0

    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 

  • Lee Kelleher 4026 posts 15836 karma points MVP 13x admin c-trib
    Dec 15, 2013 @ 22:57
    Lee Kelleher
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft