...

Aktivierung CSS-Code

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

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

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:

...

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;
}

/* ---------------------- Deaktivierte Buttons --------------------------------- */
.theme-basic .nuc-button:disabled {
    background-color:#E5E5E5; 
    border-color: #E5E5E5; 
    color: black;
}

/* ---------------------- Regelausführung Buttons --------------------------------- */
.theme-basic .nuc-button-execute-rule {
    background-color:#007FBA; /*türkisblau*/
    border-color: #0071B5; /*türkisblau dunkler*/
    color: white;
}
.theme-basic .nuc-button-execute-rule:hover {
    background-color:#0063AF; /*dunkelblau*/
    color: white;
}

/* ---------------------- Buttons (neu, klonen, aktualisieren) --------------------------------- */
.theme-basic .btn-success {
    background-color: #007FBA; /*türkisblau*/
    border-color: #0071B5; /*türkisblau dunkler*/
    color: white;
}
.theme-basic .btn-success :hover {
    background-color: #0063AF; /*dunkelblau*/
    border-color: #0063AF;
    color: white
}

/* ---------------------- Buttons (abbrechen) --------------------------------- */
.theme-basic .btn-warning {
    background-color: #E5E5E5; /*hellgrau*/
    border-color: #999999; /*grau*/
    color: black;
}
.theme-basic .btn-warning:hover {
    background-color: #F7A806; /*orange*/
    border-color: #F7A806;
    color: black;
}

/* ---------------------- Buttons (löschen) --------------------------------- */
.theme-basic .btn-danger {
    background-color: #BD4E1C; /*rot*/
    border-color: #BD4E1C;
    color: white;
}

/* ---------------------- Ja-Button --------------------------------- */
.theme-basic .btn-ok {
    background-color: #E5E5E5; /*hellgrau*/
    border-color: #999999; /*grau*/
    color: black;
}
.theme-basic .btn-ok:hover {
    background-color: #F7A806; /*orange*/
    border-color: #F7A806;
    color: black;
}
/* ---------------------- Nein-Button --------------------------------- */
.theme-basic .btn-cancel {
    background-color: #E5E5E5; /*hellgrau*/
    border-color: #999999;
    color: black;
}
.theme-basic .btn-cancel:hover {
    background-color: #F7A806; /*orange*/
    border-color: #F7A806;
    color: black;
}

/* ---------------------- Navigationsleiste (Menü) --------------------------------- */
.navbar-light .navbar-nav .nav-link {
    font-size: 1.1em;
}
.p-2 {
    font-size: 1.1.em;
}

.theme-basic nuc-menu nav.bg-faded {
  background-image: linear-gradient(90deg,#0063AF 30%,#00A5C0 100%); /* Farbverlauf dunkelblau -> türkis*/
}

/* ---------------------- Deaktivierung Download-Sysmbol neben Bild in Subform --------------------------------- */
nuc-subform-document-renderer > div[name='attribute-symbol'] > div > a.download-file {
   display: none;
}

/* ---------------------- Höhe Bild in Subform --------------------------------- */
nuc-subform-document-renderer > div[name='attribute-symbol'] > img.image {
   height: 40px;
}

/* ---------------------- Farbe Fehlermeldung in Dialogmodus --------------------------------- */
#detail-modal-dialog #errorMessage pre {
   color: #BD4E1C;
}

/* ---------------------- diverse Einstellungen in Panels  --------------------------------- */
.card {
  margin-bottom: 10px;
  border-radius: 9px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: #ececec;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.theme-basic .card-header h4 {
 margin-top:0;
 margin-bottom:.2rem;
 font-size:1.4rem;
 font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------- diverse Einstellungen in Panels, z.B. abgerundete Ecken  --------------------------------- */
.card > .card-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.theme-basic .nav-tabs .nav-item:nth-child(1) .nav-link {
  border-left: 1px solid lightgray;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  font-weight: bold;
}

.theme-basic .panel-content {
  border: 1px solid lightgray;
  flex: 1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}