Custom styles in the backend

Creating Neos & Flow Design & UX
1

Hello!

I have been learning Neos for the last two months now and I simply love it. I have used Typo3 and Wordpress in the past and it has been possible in those CMSs to insert a custom stylesheet to adjust the looks of the backend:
Wordpress backend stylesheet insertion
Typo3 backend stylesheet insertion
I’ve already styled to Neos login screen with my custom stylesheet, but is it also possible to style the backend like that? I just want to change some colors and experiment a bit :wink:

Thanks for any help,
Felix

2

Hello Felix and welcome to our community :wink:

Sure you can adjust the styles of the Neos UI as much as you’d like. It’s all just HTML and as the UI is just wrapped around your actual website, you can just add the styles to your website’s CSS.

If you only want to load them when logged into the backend, you can do that with a little Fusion code:

page.head.formBuilderStyles = Neos.Fusion:Tag {
    tagName = 'link'
    attributes {
        rel = 'stylesheet'
        href = Neos.Fusion:ResourceUri {
            path = 'resource://Your.Package/Public/Styles/Backend.css'
        }
    }
    @position = 'end'
    @if.isInBackend = ${documentNode.context.inBackend}
}

(This assumes, that you’ve put a file Backend.css into the Resources/Public/Styles folder of a package called Your.Package).

Note:

You might want to consider, styling the New Neos UI instead – the markup for this is different and there’s an actual JavaScript Styling API in place AFAIK

1 Like
3

Thank you very much!
I should probably still wait with styling the new Neos UI (which I already use) to avoid doing everything multiple times (I’m pretty sure the code will change a lot until it is done), but it is great to know that this is possible!