Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[maloross]

Dank der vielen Tipps hier im Forum habe ich mir ein paar recht ansehnliche Views gebastelt. Nun möchte ich das Feintuning angehen und diverse Anpassungen per CSS vornehmen. Ein paar Sachen klappen gut, einige garnicht.

Globales CSS: neue Views in allen Projekten gleiche Einstellungen (Hintergründe, Fontfamily usw.) = funktioniert gut.

Projekt-Css: hier hakt's grad ein wenig beim Widget "Border". Hintergrund, Font, Ränder, Schatten funktionieren. Lediglich den obere Bereich (als "Title" vorgegeben) kann ich nicht formatieren, da ich die betreffenden Variablennamen* nicht kenne. Hier würde ich gern Farben, Abstände usw. einheitlich gestalten.

Gibt es irgendwo eine Liste über die im jeweiligen Widget eingesetzten konfigurierbaren Variablen oder kann mir einer der Fachmänner hier weiterhelfen?

*bpsw. setzt background-image ein Bild in den Hintergrund usw.

[maloross]

habe dies hier bei github gefunden: ` > "label": {"en": "Label", "de": "Beschriftung", "ru": "Надпись"},

"icon_src": {"en": "Icon URL", "de": "Ikone URL", "ru": "URL иконки"},

"icon_width": {"en": "Icon width", "de": "Ikonenbreite", "ru": "Ширина иконки"},

"icon_height": {"en": "Icon height", "de": "Ikonenhöhe", "ru": "Высота иконки"},

****"icon_top": {"en": "Icon left", "de": "Icon-Offset von oben", "ru": "Сдвиг иконки сверху"},

"icon_left": {"en": "Icon top", "de": "Icon-Offset von links", "ru": "Сдвиг иконки слева"},****

"icon_class": {"en": "Icon class", "de": "Ikonenklasse", "ru": "Иконка"},

{ `
(rotmarkiert ist mMn. vertausche Deklaration)

nach meinem Verständnis kann ich aus dem o.g. Pool alles zum Ändern hernehmen, aber das Widget ändert sich nicht.

–-----

wie gestalte ich daraus eine CSS-Klasse mit mehreren Styling-Befehlen?

Beispiel:

Alle Metros sollen eine weißen Rahmen (3px), zwei farbige Schatten (weiß/blau), gelben Hintergrund und rosa Brand haben, die Klasse erhält den Namen .metrospeziell. Dies war meine Idee:

.metrospeziell {
    box-shadow: 3px 3px 10px blue, -3px -3px 10px white;
    border-color: white;
   .metro .bg-class {
    background-color: yellow;}
   .metro .brand_bg_class{
    background-color: pink;}
}

die aber mit einem Fehler ab ".metro .bg-class" endet. Wo ist der Denkfehler?