Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht

Navigation: Dokumentationen agorum core > Übersicht tags > Styles von agorum core anpassen

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

Allgemeine Logo-Anpassungen

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

Dazu können Sie die Template Manager Aktion Register GUI css verwenden, siehe GUI css registrieren.

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

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

oder:

.logo {
    background: no-repeat url(/roiwebui/meinestyles_module/img/MeinLogo.svg) center center !important;
    background-size: contain !important;
}

no-repeat
- sorgt dafür, dass das Bild nicht mehrfach gekachelt wird.
!important
- sorgt dafür, dass diese Regel andere überschreibt
center center
- damit wird das Bild horizontal und vertikal zentriert.
background-size: contain !important;:
- das Bild wird so skaliert, dass es vollständig sichtbar ist und in das Element passt (also weder gestaucht noch abgeschnitten, sondern mit korrekten Proportionen eingepasst). Auch dies wird mit !important vorrangig behandelt.

Zusammengefasst:
Mit diesem CSS sorgen Sie dafür, dass ein SVG-Logo auf einem Element, das die Klasse .logo trägt, als zentriertes Hintergrundbild angezeigt wird, das nicht wiederholt und immer möglichst groß, aber vollständig eingeblendet ist.

Logo-Anpassungen für bestimmte Verwendungszwecke

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 Ihre CSS-Style-Angaben mit der Template Manager Aktion GUI css registrieren in der MetaDB hinterlegen oder Ihre Angaben in einem bereits vorhandenen MetaDB-Eintrag ergänzen.

Ihre CSS-Styles werden in der MetaDB unter folgendem Pfad gespeichert:

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 herausfinden, über den die Anpassungen durchgeführt werden können. Die DevTools sind in Google Chrome automatisch vorhanden.

Sie können auch einen anderen Browser, etwa 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 einen MetaDB-Eintrag mit den CSS-Style-Angaben über die Template Manager Aktion GUI css registrieren erstellen. Sie können die CSS-Einträge auch in einem bereits vorhandenen MetaDB-Eintrag hinterlegen, wie hier beschrieben:

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

Öffnen Sie den Pfad zu den Style-Anpassungen für Ihr Konfigurationsprojekt:

MetaDb/MAIN_MODULE_MANAGEMENT/home/control/Styles/[<konfigurationsprojekt> ]/<name>.css

Fügen Sie im Feld Wert (String) 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.