Hi @brandiwoodson 

any preference on colour code? 
 

Jake

Hi @brandiwoodson 

I am away at the moment but as soon as I am back online I will give you the css you need. 
 

Jake

This is what I came up with so far using images - and it looks GREAT compared to what I’ve done in the past.

However, depending on the user - it sometimes doesn’t render since Nintex doesn’t provide a storage for images within NAC. We can’t make our internal site we storing images available to all guests. And sometimes guests in our tenant use these forms. We do not have storage that is public at this time. So I wanted to avoid rendering of a URL from an image control. If that makes sense. 

 

Thank you. Hopefully my example helps with what our end goal is. I may use this when it’s just employees, and then CSS when it’s guests involved in the process. Not sure yet. Do you know if storage in NAC for images are in the works so they quickly render and not contingent on a third-party URL? 

Hi @brandiwoodson 

yes image storage in tables is planned, no release date yet, we are still in beta phase of tables release. 
 

Jake

@brandiwoodson 

also there is a possibility we can use SVG if they are simple graphics and we can store the SVG in a form variable, is it the stop sign logo you are referring too?

So all the borders are images I used with snagit. And I just did the stop sign to cover our logo. The entire top and bottom and lines on the form is just pictures.

The pictures are stored on one of our internal sites that is available to everyone in the company, including guests that we have selected that are employees, just in our system as “guests” in Microsoft Entra. 

For true guests (like I accepted an invite from my gmail account or a customer accepted an invite or vendor etc.) that I have not given access to these sites to AND employees on non-company devices, they can’t see the images because we have a conditional access policy. It’s supposed to render, but they don’t. So we just have several issues with images rendering on forms unfortunately given how we are structured.  

Hi @brandiwoodson 

Using the CSS styling in the forms you can use the following css:

 

sdir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background {
    background: rgb(0,73,135);
    background: linear-gradient(45deg, rgba(0,73,135,1) 0%, rgba(24,85,139,1) 40%, rgba(19,30,72,1) 86%);

}

 dir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background p {
    color: white;
    font-weight: bold;
}

I added a gradient for you :) 

If you want to flip the colours then you can use this line:

 

background: linear-gradient(45deg, rgba(19,30,72,1) 0%, rgba(24,85,139,1) 60%, rgba(0,73,135,1) 100%);

Jake 

Is there a way to put CSS on one group or just all groups across the board? I couldn’t figure out how to use the CSS on one group to flip the gradient. 

 

Hi @brandiwoodson 

I have updated the css for you to allow to control the header background based on css class

 

sdir] .bg-gradient > .nx-group-control-header-background {
    background: rgb(0,73,135);
    background: linear-gradient(45deg, rgba(0,73,135,1) 0%, rgba(24,85,139,1) 40%, rgba(19,30,72,1) 86%);
}

 dir] .bg-gradient-reversed > .nx-group-control-header-background {
    background: rgb(0,73,135);
    background: linear-gradient(45deg, rgba(19,30,72,1) 0%, rgba(24,85,139,1) 60%, rgba(0,73,135,1) 100%);
}

 dir] .bg-gradient > .nx-group-control-header-background p,
 dir] .bg-gradient-reversed > .nx-group-control-header-background p{
    color: white!important;
    font-weight: bold;
}

Now by using bg-gradient and bg-gradient-reversed you can apply the styling how you wish, however as we are no longer using the OOB css classes some behaviour changes, specifically when it comes to colour of text, so I had to add !important tag to the text colour, Ideally I would prefer to not do this and perhaps would advise you remove the following part entirely and just use the OOB control for setting the colour in the header text its self.

-dir] .bg-gradient > .nx-group-control-header-background p,
    color: white!important;
    font-weight: bold;
}

This is because important tags can cause issues with accessibility, specially when it comes to contrast accessibility for text colour. 

Hope this helps

Jake

@Jake  Quick question. How do I make the arrows white? Hard to see, and I have a need to use collapsible sections. Can you assist pretty please? 

I’m using the following at the moment: 

adir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background {
    background: rgb(0,73,135);
   background: linear-gradient(45deg, rgba(19,30,72,1) 0%, rgba(24,85,139,1) 60%, rgba(0,73,135,1) 100%);

}

 dir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background p {
    color: white;
    font-weight: bold;
}

Hi Brandi, try this:

[dir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background  {
    background: rgb(0,73,135);
   background: linear-gradient(45deg, rgba(19,30,72,1) 0%, rgba(24,85,139,1) 60%, rgba(0,73,135,1) 100%);
}

[dir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background [data-e2e='chevron-down'] {
    color: white;
}

[dir] .nx-theme-styles .nx-group-control-container [data-e2e='chevron-right'] {
    color: white;
}

[dir] .nx-theme-styles .nx-group-control-container .nx-group-control-header-background p {
    color: white;
    font-weight: bold;
}