CSS Anpassungen im Ambience-Stil (Blue)

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.

/* 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 */

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

Hallo zusammen,

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

/* 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 */

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:

..mir eine Stufung generiert.

...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:

/* =========================================================
	   Ü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:not(.badgeOnline),
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:not(.badgeOnline),
.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
   ========================================================= */

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

Hallo nochmal,

es hat sich tatsächlich ein minimaler Anzeigefehler eingeschlichen. evtl. kann mir ja Tom einen Tipp geben wie er zu lösen ist.

Es geht um die Grüne Badge (Green) die auch für die green badgeOnline benutzt wird, hier erstmal ein Ausschnitt was ich genau meine.

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

Auf kleinen Bildschirmen wird die Reguläre "badge" ausgeblendet und stattdessen der Grüne Kreis (Oben Rechts) angezeigt.

ich habe auch schon rausgefunden an welchen CSS-Regeln es liegt, hier mal ein Screenshot:

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

wenn ich padding: 2px 7px; und border: 1px solid #3e8d68; bei der Green-Badge raus nehme, ist die Anzeige wieder in ordnung:

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

Bevor ich aber nun irgendwas versuche mir mit Breakpoints & Co zusammen zu fummeln, wollte zunächst einmal nachfragen.

Tom

Ich vermute einfach mal du hast irgendwo eine spezielle CSS-Regel für die green badge, deren Selektor + Breakpoint dafür sorgt dass sie ausgeblendet wird.

Mein erster Gedanke war, mir ebenfalls ein Media-Query zu bauen dass die class green badgeOnline unter einer mindestgröße des Bildschirms einfach ausblendet. Dabei kam einfach die Frage auf ob ich beim verändern der Regeln für die einzelnen Badges etwas anders hätte machen sollen.

Hast du da evtl. einen Tipp? ...Ich hoffe ich konnte es verständlich erklären...

MfG

Zitat von Tom

Kannst du mal testen, Zeile 152:

Code

.badge.green,

durch:

Code

.badge.green:not(.badgeOnline),

ersetzen.

Das war genau der Denkanstoß den ich gebraucht habe, Klasse Tom.

Mit der Änderung in Zeile 152 wurde immernoch der border: 1px solid #3e8d68; aus Zeile 23 angezeigt. Also habe ich den Selektor auch in Zeile 19 eingefügt. Seit dem ist der Bug behoben. Code oben ist angepasst....

MfG & Vielen Dank