inject into the head of umbraco backoffice

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Martin Griffiths 826 posts 1269 karma points c-trib

Oct 14, 2022 @ 10:34
1

Inject into the head of umbraco backoffice

Using Umbraco And Getting Started

Umbraco 9
Is there an easy way to inject a stylesheet link for a custom font into the head of the Umbraco backoffice?
```
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/css/fonts.css">
```
So that I can render the font in my block list views?
Copy Link

Kevin Jump 2312 posts 14698 karma points MVP 7x c-trib

Oct 14, 2022 @ 10:51

Hi,

I you "only" want to inject a stylesheet into the backoffice, then you can do that by creating a package.manifest file in a folder inside app_pluigns folder (e.g app_plugins/myfolder/package.manifest)

e.g

{
    "css": [ "https://cloud.typography.com/css/fonts.css"]
}

if you need to do something more complex, then you can inject things via angular, by having a run event (more advanced).

There is an example of how this is done in the BackOffice Themes Package this code uses a loader, to dynamically load css into the back office based on the user selected themes.

(function () {
    'use strict';

    angular.module('umbraco').run(['assetsService', 'eventsService', 'backofficeThemeService',
        function (assetsService, eventsService, backofficeThemeService) {

            // fired when a user is authenticated and logged in.
            eventsService.on("app.ready", function (evt, data) {
                backofficeThemeService.getCurrentTheme()
                    .then(function (theme) {
                        loadTheme(theme.data);
                    });
            });

            // load the css/js for the theme. 
            function loadTheme(themeName) {
                if (!_.isUndefined(themeName) && !_.isEmpty(themeName)) {

                    var themeFolder = Umbraco.Sys.ServerVariables.backOfficeThemes.themeFolder;
                    var theme = themeFolder + '/' + themeName;

                    assetsService.load([theme + '/theme.css', theme + '/theme.js'])
                        .then(function () {
                            // loaded
                        });
                }
            }
        }]);
})();

Copy Link

Martin Griffiths 826 posts 1269 karma points c-trib

Oct 14, 2022 @ 11:14
0
Hi Kevin

Thanks for the quick reply.

I've rather conveniently forgotten so much about extending the backoffice as I'm not a big fan of angular and this version is getting very long in the tooth now! Looking forward to doing all this the web components/plain JS way.

I've been using Paul Seals/Dave Westboroughs excellent demos for adding a CSHTML view to Block Lists instead of the angular method. It's working really well.

My manifest looks like this for my custom blocklist renderer.
```
{
  "javascript": [
    "~/App_Plugins/BlockListViews/resources/preview.resource.js",
    "~/App_Plugins/BlockListViews/Blocks/block-preview.controller.js",
    "~/App_Plugins/BlockListViews/directives/published-check.directive.js"
  ],
  "css": [ "https://cloud.typography.com/css/fonts.css" ]
}
```
But i'm getting an exception in the logs and backoffice wont load, I guess this may have something to do with the absolute URL instead of starting in ~/App_Plugins/*.
```
[12:04:25 ERR] An unhandled exception has occurred while executing the request.
Smidge.BundleNotFoundException: A bundle with the name:umbraco-backoffice-css could not be found.
```
I need to have the line injected as
```
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/css/fonts.css"> 
```
as @import won't work with this cloud provider.

Any ideas?
Copy Link
Kevin Jump 2312 posts 14698 karma points MVP 7x c-trib

Oct 14, 2022 @ 11:51

0

:( yeah i was about to suggest an import.

if you can't do that, then the loader way is probibly the way you will have to go. but you don't need to do asset.load or anything, you could go vaniila js and document.CreateElement the link and then add it to the document head?

What the wrapper will give you the opportunity to add it when the user logs in - you could in theory - try to load it in a script without waiting for anything as long as you are not dependent on anything else? you could inject it into the head of the page.

I think Umbraco also has the LazyLoad library installed (it's what the assets service is using).

so maybe LazyLoad('cssPathhere') ? will work?

Copy Link
Martin Griffiths 826 posts 1269 karma points c-trib

Oct 14, 2022 @ 13:48
100
Hey Kevin

Thanks so much for the advice, I went ahead and added another file to the manifest and as you recommended kept it vanilla JS.
```
(function () {
    loadFont = function () {

        // create the <link> tag for the font
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'https://cloud.typography.com/fonts.css';

        // reference the <head>, add the <link>
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(link);

    };

    loadFont ();
})();
```
Worked a treat, I'm really enjoying working in Umbraco 10 and looking forward to getting a set of licences for uSync - which reminds me I really need to chase that up with legal and finance as I cannot remember where it was left :-)
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?