Solved

NAC Custom CSS

  • 13 December 2023
  • 5 replies
  • 119 views

Badge +4

There seems to be all control types except Labels represented below. Or am I missing it?

Following is a list of all control types/element names:

  1. ntx-address

  2. ntx-barcode

  3. ntx-multichoice

  4. ntx-choice

  5. ntx-currency

  6. ntx-data-lookup

  7. ntx-datetime

  8. ntx-email

  9. ntx-file-upload

  10. ntx-geolocation

  11. ntx-group

  12. ntx-image

  13. ntx-richtext-label - this is the field label, not the label control

  14. ntx-number

  15. ntx-people-picker

  16. ntx-repeating-section

  17. ntx-signature

  18. ntx-space

  19. ntx-multilinetext (Text – Long)

  20. ntx-textbox (Text – Short)

  21. ntx-boolean (Yes/no control)

icon

Best answer by SimonMuntz 20 December 2023, 01:09

View original

5 replies

Userlevel 6
Badge +22

Hi @harfmt1,

I am no expert either, but I looked at the styles in a browser's dev tools.
It looks like you need to add .nx-theme-richtext to target the label.

The below worked for me.

[dir] .nx-theme-styles .nx-theme-form .nx-theme-richtext {

background-color: yellow;

}

 

Badge +4

oh yes! that works. I’ll need to work out how to restrict it to specific labels though. It’s also colouring group headers as well. 

 

Thanks!

Badge +4

Any idea how to apply to an individual control? It supposed to be possible:

Add a custom CSS to a specific control

You can target a specific control and apply a style only to the control you want using the CSS field in the configuration panel of the form control. This enables you to apply unique styles to a control or a group of controls easily. The style is applied only to the controls you apply that style to using the CSS field, rather than applying it to all controls in the form.

I’ve tried the following in the label control with no luck. I’m guessing the syntax should be different for an individual control.

[dir] .nx-theme-styles .nx-theme-form .nx-theme-richtext {background-color: yellow;}

Userlevel 6
Badge +22

Hi @harfmt1,

Try:
 

[dir] .mylabel {

background-color: yellow;

}

Then, just type mylabel in for the CSS class on the control, and it should only affect that control.

Badge +4

Thanks Simon! That’s the one. Much appreciated. 

Reply