Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

...

Info

Diese Anleitung wurde für Nuclos Versionen >= 4.2022.31 geschrieben.

Aktivierung CSS-Code

Es gibt zwei Möglichkeiten, dass CSS für den Webclient anzupassen:

  1. über den Systemparameter "WEBCLIENT_CSS":
  2. durch das Hochladen einer .css-Datei im Nuclet Extensionbereich:

Beispiele für CSS-Möglichkeiten

Beispiel 1

In diesem Beispiel soll der aktive Tab durch eine orangefarbene Umrandung hervorgehoben werden. Außerdem soll das Bewegen der Maus auf einen Tab, diesen noch etwas dunkler machen, als im standardmäßigen Webclient Verhalten. Dazu definieren wir den Parameter "WEBCLIENT_CSS", wie in nachfolgendem Bild:

...

Info
titleHintergrundwissen

Die eigentliche Hintergrundfarbe der Tab-Lasche bleibt in diesem Beispiel unberührt. Stattdessen zeichnen wir einen schwarzen, linearen Gradienten mit etwas Transparenz darüber, um die Farbe, welche wir an dieser Stelle nicht kennen, abzudunkeln.

Beispiel 2

Die Tabs-Laschen lassen sich mit der ganzen Mächtigkeit von CSS anpassen. Um dies zu demonstrieren, wird nachfolgend gezeigt, wie die aktive Tab-Lasche durch einen helleren Balken über ihrem Titel hervorgehoben werden kann.

...

Das Ergebnis sieht so aus:


Weitere Beispiele

/* ---------------------- Buttons mit Umrandung wenn Primary --------------------------------- */
.theme-basic .btn-primary {
    background-color:#E5E5E5; /*hellgrau*/
    border-color: #0071B5; /*blau*/
    border-width: 1px;
    color: black;
}
.theme-basic .btn-primary:hover {
    background-color:#0063AF; /*dunkelblau*/
    border-color:#0063AF;
    color: white;
}

...