CSS Anpassungen im Ambience-Stil (Blue)

Doerek

Hallo zusammen,

ich habe mir eine kleine CSS-Anpassung für den Accordeon-BBcode in der Blauen Variante des Ambience Stil eingebaut, evtl. kann ja jemand etwas damit anfangen.

CSS

/* CLS-Design - BBcodes zur gestaltung EDITS - Start */

.accordeon-content-wrapper {
    border: 1px dotted #18568a;
}

.accordeon-content-wrapper .spoilerSummary {
    padding: 10px;
    background-color: #17578c3b;
    border-bottom: 1px dotted #18568a;
}

.accordeon-content-wrapper .spoilerContent {
    padding: 10px 10px 10px 10px !important;
}
/* CLS-Design - BBcodes zur gestaltung EDITS - ENDE */

Alles anzeigen

und so sieht es aus:

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.

Im Standard hat das Accordeon einen schwarzen Hintergrund und unsichtbar Ränder, was das unterscheiden der Zeilen etwas erschwert.

Falls noch jemand CSS Anpassungen für die neuen "BBcodes zum Gestalten" zusammen mit dem Ambience-Stil (in blau) teilen möchte, packt sie einfach hier rein.

MfG

Doerek

Hallo zusammen,

ich habe mir gerade die folgende CSS-Anpassung für die Tag-Cloud eingebaut. (Farbliche abstufung)

CSS

/* Tagging-Cloud Farben - START */

.tagList .tagWeight1 {
    font-size: 12px;
    color: #1962A0;
}

.tagList .tagWeight2 {
    font-size: 14px;
    color: #1962A0;
}

.tagList .tagWeight3 {
    font-size: 16px;
    color: #207AC6;
}

.tagList .tagWeight4 {
    font-size: 18px;
    color: #4394D8;
}

.tagList .tagWeight5 {
    font-size: 20px;
    color: #74ACDC;
}

.tagList .tagWeight6 {
    font-size: 23px;
    color: #A2C5E3;
}

.tagList .tagWeight7 {
    font-size: 28px;
    color: #F4F8FB;
}

/* Tagging-Cloud Farben - ENDE */

Alles anzeigen

Das Ergebnis sieht dann so aus:
Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen. Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.

.tagWeight1 & .tagWeight2 haben bewusst die selbe Farbe, weil es ansonsten m.M.n. zu dunkel wurde, Beispiel:

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.

ihr könnt mit der Abstufung natürlich rumspielen wie ihr möchtet. Ich habe mich dazu an einer Basisfarbe Orientiert und dann mit:

Kostenloser HEX-Farbpaletten-Generator & Farbpalette aus HEX erstellen - Readdy

Erstellen Sie sofort harmonische Farbschemata mit unserem HEX-Farbpaletten-Generator. Tonabstufungen, semantische Token und kopierfertige CSS-Variablen aus…

readdy.ai

..mir eine Stufung generiert.

Doerek

...und weiter geht`s

ich fand die Labels des neuen Stils hier so schön, dass ich mir eine CSS-Anpassung erstellt habe die bei den Standard-Labels ungefähr die gleiche Optik erzeugt.

Hier eine kurze Vorschau:

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.

Und hier der CSS Code:

CSS

/* =========================================================
	   Überarbeitung der WoltLab Standard-Labels - START
   ========================================================= */

/* Update / Hinweis */
.badge.badgeUpdate,
a.badge.badgeUpdate {
	--background-color: #fb2223;
    --color: #fff0f1;
}

a.badge.badgeUpdate:hover {
    --background-color: #aa3944;
    --color: #ffffff;
    border-color: #e7737d;
}

/* Grün */
.badge.green,
a.badge.green {
    --background-color: #173b2e;
    --color: #a8dfc3;
    border: 1px solid #3e8d68;
}

.badge.green:hover,
a.badge.green:hover {
    --background-color: #20503e;
    --color: #d0f3e0;
}


/* Rot */
.badge.red,
a.badge.red {
    --background-color: #482126;
    --color: #efadb4;
    border: 1px solid #a44d58;
}

.badge.red:hover,
a.badge.red:hover {
    --background-color: #602c34;
    --color: #ffd3d8;
}


/* Schwarz */
.badge.black,
a.badge.black {
    --background-color: #25282c;
    --color: #d8dce0;
    border: 1px solid #555b61;
}

.badge.black:hover,
a.badge.black:hover {
    --background-color: #34383d;
    --color: #f4f5f6;
}


/* Braun */
.badge.brown,
a.badge.brown {
    --background-color: #423026;
    --color: #dfbdab;
    border: 1px solid #8f624b;
}

.badge.brown:hover,
a.badge.brown:hover {
    --background-color: #573e31;
    --color: #f6d8c8;
}


/* Orange */
.badge.orange,
a.badge.orange {
    --background-color: #49301a;
    --color: #efc08b;
    border: 1px solid #a66a31;
}

.badge.orange:hover,
a.badge.orange:hover {
    --background-color: #613f21;
    --color: #ffe0b5;
}


/* Gelb */
.badge.yellow,
a.badge.yellow {
    --background-color: #454018;
    --color: #e5da92;
    border: 1px solid #94883b;
}

.badge.yellow:hover,
a.badge.yellow:hover {
    --background-color: #5a5420;
    --color: #fff3af;
}


/* Blau */
.badge.blue,
a.badge.blue {
    --background-color: #1b334b;
    --color: #aed3f2;
    border: 1px solid #437ca8;
}
.badge.blue:hover,
a.badge.blue:hover {
    --background-color: #244560;
    --color: #d5ebff;
}


/* Violett */
.badge.purple,
a.badge.purple {
    --background-color: #35264b;
    --color: #ceb9eb;
    border: 1px solid #7659a3;
}

.badge.purple:hover,
a.badge.purple:hover {
    --background-color: #473363;
    --color: #eadcff;
}


/* Pink */
.badge.pink,
a.badge.pink {
    --background-color: #45243b;
    --color: #e9afd1;
    border: 1px solid #a05283;
}

.badge.pink:hover,
a.badge.pink:hover {
    --background-color: #5c304f;
    --color: #ffd4ed;
}

.badge.badgeUpdate,
.badge.green,
.badge.red,
.badge.black,
.badge.brown,
.badge.orange,
.badge.yellow,
.badge.blue,
.badge.purple,
.badge.pink {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

/* =========================================================
	   Überarbeitung der WoltLab Standard-Labels - ENDE
   ========================================================= */

Alles anzeigen

Ich habe mir die CSS Anpassung unter:

Anpassung -> Stile -> "Ambience"-Stil Bearbeiten -> Erweiterte Einstellungen -> Eigene Deklarationen eingefügt.

Vielleicht kann der ein oder andere ja was damit anfangen..

Ich möchte dabei aber ganz klar anmerken, dass ich kein CSS Profi bin und übernehme keine Gewähr, falls ihr euch etwas damit zerschießt.

Vielleicht hat Tom irgendwann mal ein paar Minuten Zeit und wirft einen Blick darauf.

MfG

Tom

Die gefallen mir sehr gut. Die sind nicht so laut wie die Labels hier sondern gehen in die Richtung elegant.

So vom Gefühl her würde ich wohl nur zwei Dinge anpassen.

Die Textfarbe vom Update Label finde ich eine Tick zu hell im Vergleich zu den anderen
Die Textfarbe vom roten Label finde ich einen Tick zu dunkel im Vergleich zu den anderen.

Aber wirklich nur einen minimalen Tick. Wenn ich meine Augen etwas zusammenkneife und die Darstellung Unscharf wird fallen mir die beiden Labels auf.

TimoB

Zitat von Tom

Wenn ich meine Augen etwas zusammenkneife und die Darstellung Unscharf wird fallen mir die beiden Labels auf.

Dann lass das doch, gibt nur Falten

Spaß...

Tom

Er erzählt was von Falten

Währenddessen ich:

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben ihn zu sehen.

CSS Anpassungen im Ambience-Stil (Blue)

Doerek 7. September 2026 um 20:58

Benutzer online in diesem Thema

cls studio

Informationen

Demoinstallationen

Hilfe