Eigenes CSS hinterlegen

Sie können bei Bedarf das Erscheinungsbild von agorum core über das Theme hinausgehend verändern. Dazu ermitteln Sie die verwendeten Styles im Browser und überschreiben Sie ggf. mit eigenen CSS-Angaben.

Logo anpassen

Das Logo im Login-Screen und im Header jedes agorum core Moduls ist im Style .logo definiert.

Um das Logo zu überschreiben, legen Sie Ihr Logo auf dem Server ab, etwa unter:

<Installdir>/jboss/server/default/deploy/roi.ear/roiwebui.war/meinestyles_module/img/MeinLogo.svg

Erstellen Sie zum Überschreiben des allgemeinen Layouts einen Eintrag in der MetaDB unter:

/MAIN_MODULE_MANAGEMENT/home/control/Styles

Beispiel: myStyles.css

Ergänzen Sie in diesem Eintrag wie folgt den Pfad zu Ihrem Logo:

.logo {
    background-image: url(/roiwebui/meinestyles_module/img/MeinLogo.svg);
}

Wenn Sie spezifischere Logo-Style-Anpassungen vornehmen möchten, können Sie das Logo im Login-Screen über folgenden Eintrag im CSS beeinflussen:

.login-view .logo

Für das Logo im Header können Sie spezifischere Layout-Angaben über folgenden Eintrag im CSS hinterlegen:

.home-bar.title-bar .logo

Beispiel für ein eigenes Logo auf der Startseite

Beispiel für ein anderes Logo in der Kopfleiste (mit ebenfalls angepasster Farbgebung)

aguila-Widgets anpassen

Sie können Ihre eigenen aguila-Widgets per CSS individuell anpassen. Sie können dazu eine CSS-Datei in Ihrem Konfigurationsprojekt erstellen und den Inhalt mit der Template Manager Aktion GUI css registrieren in der MetaDB hinterlegen. Sie können einen entsprechenden MetaDB-Eintrag auch selbst unter folgendem MetaDB-Pfad erstellen:

MAIN_MODULE_MANAGEMENT/home/control/Styles/[ <configuration project> ]/<file name>.css

Im folgenden Beispiel wird eine Schaltfläche angepasst.

Öffnen Sie links in der App-Leiste Explorer.

Öffnen Sie Ihr Konfigurationsprojekt:

Eigene Dateien‎/Administration‎/customers‎/<Ihr Konfigurationsprojekt>

Öffnen Sie im Projektordner den Ordner js.
Erstellen Sie bei Bedarf den Ordner aguila.
Öffnen Sie mit der rechten Maustaste das Kontextmenü.
Wählen Sie Neu > JS-Dokument.
Vergeben Sie einen eindeutigen Namen für das Dokument.

Befüllen Sie das JavaScript etwa mit folgendem Inhalt:

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 400,
  height: 400,
  items: [
    {
      type: 'agorum.button',
      text: 'Mein Button', // sample button text
      cls: 'prefix-my-button' // use a unique name per CSS class
    }
  ]
});

widget;

Klicken Sie auf Save und auf Run.

Ergebnis: Das aguila-Widget öffnet sich.

Sie sehen die Schaltfläche Mein Button in den Standardfarben. Diese Farben werden verwendet, wenn nichts anderes definiert ist. Das Ziel ist es jetzt, die Schaltfläche rot zu färben. Die Schrift soll in Weiß und fett dargestellt werden.
Registrieren Sie das Widget ggf. mit der Template Manager Aktion aguila widget registrieren.

Aussehen nach Ausführen des Skripts

CSS-Elemente herausfinden

Um herauszufinden, welche Elemente im CSS geändert werden müssen, damit die Schaltfläche rot und die Schrift weiß werden, verwenden Sie die Entwickler Tools DevTools (etwa über Chrome). Mit diesen lässt sich vorab der CSS-Code herauszufinden. Die DevTools sind in Google Chrome automatisch vorhanden.

Sie können auch einen anderen Browser wie Firefox verwenden, der die gleichen Funktionen bietet wie Google Chrome.

Öffnen Sie mit F12 die Entwickler Tools DevTools (etwa über Chrome), während Ihr aguila-Widget geöffnet ist.
Klicken Sie links oben in den DevTools auf .
Fahren Sie mit der Maus über die Schaltfläche im aguila-Widget.

Ergebnis: Rechts erscheint die Button-Klasse, unter der die Schaltfläche erkennbar ist.

Anzeige der Button-Klasse
Klicken Sie rechts auf .

New Style Rule erstellen

Fügen Sie Folgendes hinzu:

.x-btn.prefix-my-button {
    background-color:  red;
}

Bestätigen Sie mit der Enter-Taste.

Ergebnis: Die Schaltfläche erscheint mit rotem Hintergrund.
Wählen Sie in der Registerkarte Elements in den DevTools das darunterliegende Element span an und klappen Sie es zweimal auf.
Klicken Sie rechts oben erneut auf (New Style Rule).

Fügen Sie Folgendes hinzu:

.x-btn.prefix-my-button span {
    color: white;
    font-weight: bold;
}

Bestätigen Sie mit der Enter-Taste.

Ergebnis: Die Schaltfläche erscheint in fetter, weißer Schrift und mit rotem Hintergrund.

Schaltfläche in fetter, weißer Schrift und mit rotem Hintergrund
Klicken Sie auf das inspector-stylesheet und kopieren Sie den gesamten CSS-Code in die Zwischenablage.

Den CSS-Code hinterlegen

Nachdem Sie in Ihrem Browser die CSS-Elemente herausgefunden und den Code ausprobiert und kopiert haben, hinterlegen Sie diesen in agorum core, damit Ihr aguila-Widget sich dort ebenfalls verhält wie eben gesehen.

Sie können dafür eine CSS-Datei in Ihrem Konfigurationsprojekt anlegen und mit der Template Manager Aktion GUI css registrieren. Sie können die CSS-Einträge auch direkt in einem MetaDB-Eintrag hinterlegen wie hier beschrieben:

Öffnen Sie links in der App-Leiste Administration und dann MetaDB.

Öffnen Sie den Pfad:

MetaDb/MAIN_MODULE_MANAGEMENT/home/control/Styles

Erstellen Sie über eine Property-Gruppe mit neuem Namen, etwa:
```
[ Mein Button ]
```
Öffnen Sie die Property-Gruppe.
Öffnen Sie mit Rechtsklick das Kontextmenü.
Erstellen Sie über einen Property-Entry mit folgendem Inhalt:

Name
prefix-styles.css

Datentyp
Inhalt (Content)

Fügen Sie im Feld Wert (Content) Ihren kopierten CSS-Code aus der Zwischenablage ein:

.x-btn.prefix-my-button {
    background-color:  red;
}

.x-btn.prefix-my-button span {
    color: white;
    font-weight: bold;
}

Öffnen Sie Ihr JavaScript zum aguila-Widget und klicken Sie auf Run.

Ergebnis: Die Schaltfläche erscheint in fetter, weißer Schrift und rotem Hintergrund.