UI Builder: Unable to set a custom background image for Header Banner on CSM Landing Page

[John Tomko]

I'm just starting to play around with Workspace configuration, and am working with the CSM/FSM Configurable Workspace, CSM Landing Page.  I am unable to replace the default "space theme" background image.  I can change the container height and other values, but nothing I do with "background-image" seems to work.  I uploaded the image I want to use to db_image, and verified I can do what I want someplace like a header, but I can't seem to modify the background of the container itself.

Despite the fact that my CSS for the container is:

* {

    background-image: url('email_template_now_logo.png');

    background-position: right;

    background-repeat: no-repeat;

    min-height: 160px;

    flex-direction: column;

    display: flex;

    grid-template-columns: 1fr;

    grid-template-rows: 1fr 1fr;

    justify-content: center;

    flex-wrap: nowrap;

    grid-auto-rows: 1fr;

    grid-auto-columns: 1fr;    

}

 

[John Tomko]

I've actually been pulled in a different direction and not had time to look at this lately.  My thought, based on @JagjeetSingh 's remark above, is that I probably need to create an entirely new variant.  That seems a little bit odd to me, since you can change pretty much anything else about the OOTB variant and there is nothing anywhere that I have seen about anything being write-protected, but I am a novice at Workspace Config, so I wouldn't be shocked if that was it.

[Christian Prob2]

Hi @John Tomko  / @Jeff Currier - having the same annoying issue in Utah instances - just tried in an new Vancouver PDI:

- create copy of the ootb page

- modify the element in the variant copy: TaDa!!! no problem 🙂

So not sure if that means it's only fixed in Vancouver, but so far if creating a copy in Utah and trying ... still wastes time and does not work.

It also seems that in Vancouver the ootb page is now write protected and you are forced to create a local copy (seems that initially that was not recommended either way, but in one of the more recent videos with @Brad Tilton 'create a copy if you want to modify anything, then give your copy a lower order so it gets pulled first' it was kind of mentioned as the official best practice. (Note: it would be great if SN folks would think ahead and not start with "0", feels weird to go a negative order...)

Christian

(Feel free to mark correct or helpful if deemed so) 

---

[Sebastian Kring]

Hello everybody,

I was facing the same issue. I was able to solve it by uploading a header image as resource first (All > System UI > Images). I used the CSM Workspace scope for that, but I do not know if that really matters.

After saving, I used the filename from the "name" field (not the name of the original uploaded file) within the css of the UI Builder config (internal layer):

This is what did the trick for me. Good luck!

[JLeong]

Hi Sebastian, 

How do I get to the CSS?

Thanks.

[Sebastian Kring]

Hi JLeong,

you can find the CSS properties in the UI Builder:

1. Inside the left column select the element you want to adjust the css for

2. In the right column select "Styles", scroll to the bottom and enable "Show advanced configuration options".

3. Then you can see the switch "View and edit CSS"

4. After enabling that option, you will be able to edit the CSS for the external and the internal layer. In my case I needed to edit the styles for the internal layer.

I hope I could help you.