Veraltetes Wordprss Theme anpassen

[Rolf B]

Hallo Kryptophäe,

ich habe jetzt mal draufgeguckt und gehe davon aus, dass Du die Änderungsvorschläge noch nicht umgesetzt hattest.

id="about" ist nur dann ein Problem, wenn Du diese ID im CSS zum Styling einsetzen möchtest ODER wenn Du mittels Hash-Teil der URL die Seite direkt dahin positionieren möchtest (also https://hhpvgbr.de#about). Wenn Du diesen HTML-Teil direkt im Zugriff hast, würde ich Dir die IDs about_kerstin und about_heiko vorschlagen.

Im CSS hast Du dann das Problem, dass das Bild nicht als Bild, sondern als Hintergrundbild geladen wird. Mit Hilfe des div.overfly wird es dann „elegant“ pastellisiert, indem es mit 70% transparentem Weiß überlagert wird. Wenn ihr das toll findet, na gut. Andernfalls solltest Du die 0.7 in Zeile 1183 von style.css kleiner machen.

In der Stelle musst Du eh ran. In Zeile 1170 wird dem my-pict Bereich das Hintergrundbild zugeordnet, das musst Du trennen. Mit den oben vorgeschlagenen IDs könntest du das so lösen, dass Du die background-image Zeile herauslöst und direkt dahinter zwei weitere Regeln einfügst:

#about_kerstin .my-pict {
   background-image: url(../images/kerstin-pict.jpg);
}
#about_heiko .my-pict {
   background-image: url(../images/heiko-pict.jpg);
}

Im Moment hast Du für die zweite Visitenkarte ein .my-pict2 draus gemacht, wodurch aber die 7 existierenden Regeln für die Klasse my-pict im Stylesheet nicht mehr angewendet werden. Für my-pict2 finde ich hingegen gar keine Regel.

Benenne die Klasse wieder zurück, verwende unterschiedliche IDs, und dann klappt das so, wie ich gezeigt habe.

Kleiner Kritikpunkt an dem Weiß-auf-Schwarz Infobereich: Da wird Fettschrift mit <strong> erzeugt. Das strong-Element formatiert nebenbei fett, ja, hat aber auch die Semantik von "Dies ist besonders wichtig". Und das sehe ich hier nicht. Es ist einfach die Beschriftung einer Information. Hier würde das <label>-Element passen, finde ich, das Du im Stylesheet per

.myprofile .mydesc label {
   font-weight: bold;
   display: inline-block;
   width: 8em;
}

stylen kannst. Breitenfestlegungen mit Klassen, so wie es Bootstrap macht, sind der Grund, warum dieses Produkt oftmals auch Bootcrap genannt wird. Aber es ist halt ein CSS-Framework, da gehört das dazu. Generische CSS-Klassen, die NUR dazu dienen, bestimmten Elementen bestimmte Eigenschaften zu geben, sind falsch verstandenes CSS. CSS ist nur zum geringen Teil generisch, es muss immer spezifisch für die darzustellende Seite oder Gruppe von Seiten sein. Ins HTML gehört eigentlich nichts hinein, was nur zu Layout-Zwecken dient. Die Ausnahme sind diverse divs, die man als Träger von Formatierungsmerkmalen braucht. Wenn man es damit übertreibt, kommt die Matroschka-Struktur heraus, die schon erwähnt wurde.

Habs auch mal versucht mit mobirise nachzubauen. Geht ganz gut, ist aber bei weitem nicht so flexibel, sieht nicht so gut aus (mouse over beim Bild oder den JS) und ich würde nichts lernen 😂

Das ist das Problem mit KI. Zum einen ist sie immer nur so gut wie die Regeln, die man ihr gegeben hat, zum anderen verkümmert damit die EI (eigene Intelligenz). Aber Du willst dein Geld ja eigentlich mit Pflegeprodukten verdienen statt mit Softwareentwicklung…

Rolf