Customizing CSS styles

This section describes how to customize the application by CSS stylesheets.

Theme

A system theme layout has been set up in the application in order to customize the application through the CSS.

To activate a theme, you should set the following properties in the file application.properties :

# application header logo, should be 40px in height
application.logo = img/MyLogo.png
# Application du thème :ici le thème “blue”
application.theme = blue

Then, the theme must have the following structure:

webapp/css/<theme-name>/theme.css

webapp/css/<theme-name>/img/

Thus, the style defined in this file theme.css will overwrite the old style.

Field Organization

The fields are organized in a table defined in HTML:

<tbody>
  <tr> : 1ère ligne
      <td class="form-label"></td>   : Label “Type”
      <td class="form-item select-item"></td> : Champs selection
      <td class="form-label"></td>   : Label “Sous-Type”
      <td class="form-item select-item"></td> : Champs selection
      <td class="form-label"></td>   : Label “Rôles du Tiers”
      <td class="form-item select-item"></td> : Champs selection
  </tr>
  <tr> : 2ème ligne
      <td class="form-label"></td>   : Label “Numéro de facture (Brouillon)”
      <td class="form-item"></td> : Champs string
      <td class="form-label"></td> : Label “Numéro de facture”
      <td class="form-item"></td> : Champs string
      <td class="form-label"></td>   : Label “Achat/Vente ?”
      <td class="form-item select-item"></td> : Champs sélection
  </tr>
</tbody>

Labels are identifiable by the CSS "class form-label "fields and the" class form-item ", regardless of the type of field (O2M, M2M, check-box, ..).

Each tag <td> contains the details of the label or field.

Example of a read-only field:

<td class="form-label">
  <label ng-transclude ui-label x-for-widget="_formWidget1" x-cell-css="form-label" class="ng-scope label-item ui-state-disabled">
      <span class="ng-scope">Type</span>
  </label>
</td>
<td class="form-item select-item">
  <div class="input-append ng-scope ng-pristine ng-valid select-item ui-state-disabled" ui-select id="_formWidget1" name="invoiceTypeSelect" x-field="invoiceTypeSelect" x-title="Type" x-readonly="true" ... >
      <input type="text" autocomplete="off" style="width: inherit; padding-right: 27px;" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-haspopup="true" tabindex="-1">
       ...
  </div>
</td>

Tags

The previous field is a select static which is identified by the attribute "ui-select" .

Being read-only (as defined in the view or action), it has the attribute x-readonly = "true" . This read-only property is defined in the CSS attribute class = "ui-state-disabled" .

A read-only field defined in the object will be other specific attributes: readonly = "readonly" , disabled = "disabled" and class = "ui-state-disabled" .

The fields are identified by attributes:

• O2M: ui-one-to-many
• M2M: ui-many-to-many
• M2O: ui-many-to-one
• Date: ui-time
• String: ui-string
• Decimal: ui-decimal
• Full: ui-integer
• Boolean: ui-boolean
• Button: ui-button
• Selection: ui-select

These attributes are placed in the tags <div> , child of the <td class="form-item">

Additional attributes:

• ng-invalid : Defines a field that is not valid (not yet filled, error ...).
• ng-valid : Defines a field that is valid.
• ng-invalid-required : Defines a field that is not valid and binding.
• ng-valid-required : Defines a field that is valid and binding.
• ui-state-disabled : Defines a read-only field.
• select-item : Sets a user selected field.

In CSS, target text whose appearance should be changed. To target the elements of the page to change the CSS uses selectors. It is possible to manipulate multiple selectors together to target the item to change.

The attributes listed are not exhaustive. Google Chrome console provides quick and easy target attributes, classes and tags used and overwrite, create or edit a CSS property, to visualize the desired effect in Chrome.

Examples of selectors

div .ui-state-disabled input {
    background-color: #ebebeb;
}

Selects all tags <input> located inside a tag <div> , featuring a class "ui-state-disabled".

div .ui-state-disabled input[type="checkbox"]{
    opacity : .60 !important;
}

Selects all tags <input> , with an attribute type = "checkbox" located inside a tag <div> , featuring a class "ui-state-disabled".

The site details all of the w3c selectors available: www.w3.org/TR/CSS2/selector.html