https://discord.umbraco.com logo
Join Discord
Powered by
Loading global CSS
# package-development
a
Is there a build-in way to load a stylesheet in the Umbraco 14 backoffice? In most cases you would declare the CSS as part of the HTML element, but in some cases loading a stylesheet globally might be needed.
w
I haven't found a way as of yet, but haven't required the need to either as of yet. The only hacky way I can think of is to use the EntryPoint JS/TS approach
So when this file is loaded then you use usual JS DOM manipulation
So get the head or the body and then create a HTML element to add to the DOM for the CSS reference @Anders Bjerner
Copy code
ts
import { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
export const onInit: UmbEntryPointOnInit = (_host, _extensionRegistry) => {
    // HACK THE PLANET
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'path/to/your/stylesheet.css'; // Replace with the actual path to your stylesheet
    document.head.appendChild(link);
};
a
That's also what I'm doing now, but there is a bit of delay for the CSS to be loaded.
w
Yeh not sure I can think of any other way to do it
Let us know if you do find another way
The other approach or train of thought is that the backoffice themes are extension points that are CSS
a
I also tried that, but then the user has to select that theme
Umbraco fetches 
h/umbraco/backoffice/a9c49848b115f12982e330ba15624c222dae4036/css/user-defined.css
and the default contents are 
/* This file can be overridden by placing a file with the same name in the /wwwroot/umbraco/backoffice/css folder of the website */
. So I suppose I could overwrite this file, but this is not very package friendly 😮
Which doesn't seem to work btw 🤔
w
Curious what the usecase is for having a global css ?!
a
Just playing around for now, but could be branding - e.g. change the CSS variables to other colors
both the login screen and backoffice
w
If its for theming/colors then why not just use the backoffice theme approach ?
To brand it for client/agency
So you could register a new theme & make it default or set the weight order (assuming highest order wins and loads by default)
a
Maybe (again just playing around)
w
Or another approach - register your custom one and deregister the other themes that Umbraco ships
m
I talked with Jacob about this and he said that this was the way for now - maybe in the future there will be a extension type for this - would be nice 🙂
a
A css extension would certainly be nice if this ensures the CSS is loaded at the same time (or before) Umbraco's CSS. Although the comment mentioned earlier says placing a file at 
/wwwroot/umbraco/backoffice/css/user-defined.css
should work, I can't get it to work. At least not when running the site through Visual Studio. I haven't tried deploying my site. Setting up an ASP.NET rewrite rule for 
/umbraco/backoffice/css/user-defined.css
(and 
/umbraco/backoffice/{cacheBuster}/css/user-defined.css
) does however do the trick, in which case I can declare the CSS variables before Umbraco, meaning the UI doesn't flicker with default colors, then with the custom ones. The login screen has a similar user defined CSS files which I guess can be hijacked the same way. I don't think themes apply to the login screen - even if my custom theme is given the highest weight.
w
Raise an issue. As seems not many HQ people swinging by at the moment due to summer.
118 Views
PreviousNext
Powered by