How do I use CSS to change header background and font color on a group control?
Ultimately I want a dark blue background with white font and heading 5 for my headers for each group control but when using the OOB formatter, it won’t allow for something like this. :(
Best answer by Jake
View original
+13
Hi
any preference on colour code?
Jake
+13
Hi
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.
Hi
I am away at the moment but as soon as I am back online I will give you the css you need.
Jake
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?
+13
Hi
yes image storage in tables is planned, no release date yet, we are still in beta phase of tables release.
Jake
+13
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.
+13
Hi
Using the CSS styling in the forms you can use the following css:
[dir] .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.
+13
Hi
I have updated the css for you to allow to control the header background based on css class
[dir] .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,
[dir] .bg-gradient-reversed > .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
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.