Background Color
# help-with-umbracoy
Yasein H. Burqan
12/14/2023, 8:56 AMHow can I change the Umbraco Cms logo and the background color ?
c
Corné Hoskam
12/14/2023, 9:08 AMHi! I found this article which to my knowledge is still accurate, which you could give a try! 🙂
https://www.liquidint.com/blog/technology/how-to-customize-umbraco-backoffice-colors
y
Yasein H. Burqan
12/14/2023, 9:29 AM@Corné Hoskam I tryed this but it not work
c
Corné Hoskam
12/14/2023, 9:31 AMCould you specify which version of Umbraco you are using, and what exactly you have tried/is/isn't working?
y
Yasein H. Burqan
12/14/2023, 12:14 PM@Corné Hoskam 12
s
SiempreSteve
12/14/2023, 2:32 PMYou can add a plugin - I have one that detects the environment (dev / uat / stage / live) and changes the header colour and adds a border so I don't update content in live by accident. Happy to share *
* disclaimer being I probably borrowed it from some else on the web but can't credit them
SiempreSteve
12/14/2023, 2:41 PMDrop that in your App_Plugins directory (create one if you don't have one) and run dev tools in the backoffice to clear the cache and do a hard refresh. Customise to your own delight.
https://cdn.discordapp.com/attachments/1184780943186202734/1184867867838132285/BackOfficeStyles.7z?ex=658d8931&is=657b1431&hm=d3ee6cbfe9b52eae0e3dc8f983fdfc1d0095764f3129395934cf3637cadc69d7&
SiempreSteve
12/14/2023, 2:56 PMJust dropped this into two of my projects (as I had it on a todo list to port over from v7). One worked and picked it up - the other I had to add:
"Umbraco": {
"CMS": {
"RuntimeMinification": {
"UseInMemoryCache": true,
"CacheBuster": "Version",
"Version": "1001"
}
}
}
To my appsettings.json to get it to rebuild the back office frontend. If you wish to dev and test just keep incrementing the version if it gets stuck
y
Yasein H. Burqan
12/16/2023, 6:49 PM@SiempreSteve Thank you, it work ow, what about the backgrond for the login, could I change the logo and the backgrong image ?
s
SiempreSteve
12/18/2023, 5:30 PMThis looks like what you want https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/login
c
Craig100
12/19/2023, 9:48 AMThe options are very limited in 13 (and poss 12). I raised a discussion about it last night: https://github.com/umbraco/Umbraco-CMS/discussions/15477
s
SiempreSteve
12/19/2023, 10:56 AMAre you not able to just add a custom login css file with something like .login-overlay__logo { display: none }
I haven't tried this - never had to customise the login screen
SiempreSteve
12/19/2023, 11:27 AMAh - I see - this is not just outputting the custom css - it requires you to change the css vars . Hopefully that can be more flexible as you say
y
Yasein H. Burqan
12/20/2023, 6:09 AM@SiempreSteve @Craig100 , Hello All , For me I used App_Plugin Direct as a package and it work,I hide the main logo and I add another logo and everything is good , I add a custom login css file with .login-overlay__logo { display: none } and add one more class.
Yasein H. Burqan
12/20/2023, 6:09 AMThank you Friends
Yasein H. Burqan
12/20/2023, 6:11 AM@SiempreSteve @Craig100
should use before the clas name :
.dev .className{} for the dev environment
and for the live
: .live .className{}
s
SiempreSteve
12/20/2023, 9:05 AMIs that on v13 though - I tried and couldn't get my css to load.
c
Craig100
12/20/2023, 6:05 PMI can confirm this works, if you want a logo but don't want a background image:-
Copy code
"Content": {
"LoginBackgroundImage": "#",
"LoginLogoImage": "../images/tiucl_logo_white.svg"
}12 Views