Forum GLPI-Project

quatis

Member

From: Sao Paulo, Brazil

Registered: 2022-06-13

Posts: 6

GLPI Formcreator Style Help

Greetings, i wanna know how to change background color of section on GLPI formcreator. I'm using GLPI 9.5.5 and formcreator 2.12.5, tried to change the formcreator/css/styles.scss "#plugin_formcreator_form [data-itemtype="PluginFormcreatorSection"] > h2 {background: #1B2F62}" setting but nothing changes on the page. I also changed it on the formcreator/css_compiled/styles.min.css file. I need some help doing it, thanks.

cconard96

Moderator

Registered: 2018-07-31

Posts: 2,819

Website

Re: GLPI Formcreator Style Help

CSS changes should be done using the UI Customization feature which can be found in the configuration of each Entity.

---

GLPI Collaborator and Plugin Developer.
My non-English comments are automated translations. Sorry for any confusion that causes.
Mes commentaires non anglais sont des traductions automatiques. Désolé pour toute confusion qui cause.
Mis comentarios que no están en inglés son traducciones automáticas. Perdón por cualquier confusión que cause.

quatis

Member

From: Sao Paulo, Brazil

Registered: 2022-06-13

Posts: 6

Re: GLPI Formcreator Style Help

CSS changes should be done using the UI Customization feature which can be found in the configuration of each Entity.

Thanks for your answer, i can't find an entity that will affect the formcreator's form section background color. I dropped this css code on the main entity and nothing happened:
   [data-itemtype = "PluginFormcreatorSection"] {
      background: #EEE;
      /*box-shadow: 2px 2px 2px #CCC;*/
      margin: 0 0 10px;

      > h2 {
         background: #133d0f;
         color: #FFF;
         margin:  0 0 10px;
         padding: 5px 10px;
         border-bottom: 1px solid #FFF;
         box-shadow: 2px 2px 2px #CCC;
         text-align: center;
         line-height: 24px;
      }
   }

cconard96

Moderator

Registered: 2018-07-31

Posts: 2,819

Website

Re: GLPI Formcreator Style Help

Three things about your example,
1. The UI Customization only works with plain CSS since no compilation is done. This means that nested rules do not work. You can break out the h2 rule and use "[data-itemtype = "PluginFormcreatorSection"] > h2" instead.

2. The background and margin seem to apply but there are inner elements that have their own background (the inner .card-header and .card-body). You should try changing the background on those elements instead of set them to transparent.

3. It is helpful to use the developer tools (F12) of your browser when working on this. You can inspect specific elements and see what styles are being applied. In Chrome, any styles that are crossed out and have a warning icon are invalid. If they are crossed out without a warning icon, they are overridden by a more specific rule.

---

GLPI Collaborator and Plugin Developer.
My non-English comments are automated translations. Sorry for any confusion that causes.
Mes commentaires non anglais sont des traductions automatiques. Désolé pour toute confusion qui cause.
Mis comentarios que no están en inglés son traducciones automáticas. Perdón por cualquier confusión que cause.

quatis

Member

From: Sao Paulo, Brazil

Registered: 2022-06-13

Posts: 6

Re: GLPI Formcreator Style Help

Thanks, appreciate your help. Problem solved.