Mulischaf

Ein kleines WordPress-Template II

1. Mai 2021

Ich habe noch eine kleine, zusätzliche Modifikation hinzugefügt und die Menüs in der Seiten-Leiste rechts und links umgeändert, so dass sie mehr nach Navigation, denn nach einer Liste, wirken. Zuerst habe ich die margin- und padding-Abstände in Grundsetup für die beiden Seitenleisten entfernt und vergebe diese direkt dann. In dem Fall zuerst mal den Überschriften, zudem hinterlegen wir, dass der Listenpunkt auch gesamt mit der Maus anklickbar sein soll und nicht nur der Text selber.

nav h3, aside h3 {
padding: 2% 7%;
}
nav li a, aside li a {
display: block;
width: 100%;
}
nav li:hover, aside li:hover {
background-color: #ededed;
}

Der Rest danach ist eher eine visuelle Spielerei, ganz nach Geschmack, Lust und Laune. Wir vergeben oben und unten Border-Linien und die passenden Abstände sowie eben auch Farben, außerdem berücksichtigen wir den letzten Listeneintrag mit einem :last-child um am Ende eine abschließende Linie zu haben.

nav ul, aside ul {
list-style: none;
padding: 0px;
margin: 0px;
border-top: 1px solid #CCC;
}
nav ul li, aside ul li {
display:block;
padding: 2% 7%;
color: #999;
background-color: #f5f5f5;
border-top: 1px solid #FFF;
border-bottom: 1px solid #CCC;
text-decoration: none;
}
nav ul li:last-child, aside ul li:last-child {
border-bottom: 1px solid #CCC;
}

Und das war es auch schon wieder. Sicherlich weiterhin eher recht old school und nicht so fancy, wie andere Lösungen und Styles heutzutage, aber es funktioniert und ist schnell sowie einfach erledigt. Ganz ohne große Code-Eingriffe oder Template-Anpassungen. Wenn man jetzt noch etwas Muse hat, könnte man auch die Variablen-Definitionen in der CSS-Datei weiter ausbauen und darüber den kompletten Farbauftritt schnell und einfach gestalten.

/* Variablen-Definition */
:root {
--background_topsidebottom: #f1f1f1;
--background_middle: #FFFFFF;
--font_color: #333333;
--link_color: #9a0026;
--link_hover_color: #084B8A;
--border_color: #CCCCCC;
und so weiter.....
}

Momentan belasse ich es jedoch dabei, bis ich ein für mich fertiges Setup gefunden habe. Danach passe ich die Definitionen an und es würde sich auch theoretisch anbieten, diese soweit zu hinterlegen, dass man sie auch über die WordPress-Theme-Konfiguration im Backend dann steuern könnte. Aber das ist Luxus und einfacher, schlichter Code ist genauso so effizient – zumindest für meinen Geschmack.

Momentan beträgt damit die Größe des gesamten Templates in etwa 8 Kilobyte, wenn man noch den hier für die Code genutzten Highlighter hinzurechnet (eine umfangreiche Javascript-Datei plus CSS-Style für das Farbschema) kommen wir insgesamt auf ca. 85 Kilobyte.

Zum Vergleich: die Datei-Größe des Katzenfotos (Photo by Timothy Meinberg) am Anfang des Beitrags kommt auf ca. 120 Kilobyte und ist damit wesentlich größer (und ja, natürlich kann man diese Dateigröße bei einem Bild noch deutlich reduzieren). Aber so sollen Templates in meiner Welt sein: klein und unkompliziert und nur das tun, was sie im Alltag auch leisten sollen, nämlich Text und Bild anzeigen.

Technik / Template

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

·
Nach oben