Customize background color

Donatella Marino

24. Januar 2025 07:00

Hi all,

I'd like to have this effect on my App, changing the background color and giving some space between the elements, or even change a color of a component (Column or Rows):

Anyone knows how I can do it?

Thanks in advance.

Donatella

 

1

• 

  Nico Burgerhart

  24. Januar 2025 07:55

  Accent Color and Color Theme
  https://docs.vertigisstudio.com/webviewer/latest/admin-help/settings-branding.html

  Compact View 
  https://docs.vertigisstudio.com/webviewer/latest/admin-help/settings-user-preference.html

  0
• 

  Donatella Marino

  24. Januar 2025 08:12 Bearbeitet

  Hi Nico, 

  thanks for the quick answer, but I still dont't understand how I can obtain the effect, because the “Theme” is only “Light” or “Dark”, and the “Accent Color” is only for the elements, as Buttons. I'd like to visualize better the single components, as, up to now, it's all white and also adding some Padding or Rand is not helping.

  Thanks

   

  0
• 

  Nico Burgerhart

  24. Januar 2025 08:22

  You can use a startup workflow with Inject CSS activity, but documentation on this topic is limited.
  https://docs.vertigisstudio.com/workflow/latest/help/inject-css.html

  https://support.vertigis.com/hc/en-us/community/posts/18659607515154-How-best-to-target-css-selectors-for-inject-css

  https://support.vertigis.com/hc/en-us/community/posts/19485981581458-Help-with-Inject-CSS-syntax-for-form-items

  0
• 

  Amanda Putri

  22. Januar 2026 01:56 Bearbeitet

  Hi, as Nico mentioned that there are limited resources on this, does anyone have an example of CSS that they can share on how to change the background colour of a component, specifically a column in Studio Designer, using workflow? I'm trying to colour the header background black as seen in the screenshot below. This header is made of columns component. 

  

  I tried to use the Inject CSS activity in workflow, which I add within the App Initialization tab, but it didn't work: 

   split-91e1ab0d {
   background-color: #000 !important;
   color: #fff;

  I'm new to CSS so would appreciate any pointers to make this work. Thank you!

  0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.