CSS Grid erlaubt es alleine mittels CSS zweidimensionale Layouts zu erstellen. Optisch erinnern diese Raster an Tabellen. Sie können einfach nur Zeilen oder Spalten erstellen, diese aber auch beliebig kombinieren.
Mit folgendem Beispiel erzeugen Sie einfache Zeilen. Alleine werden Sie das wohl kaum verwenden, weil das wenig Sinn macht.
.container{ display: grid; grid-template-columns: 250px; grid-template-rows: 150px; }
<div class="container"> <div> Zeile 1 </div> <div> Zeile 2 </div> <div> Zeile 3 </div> </div>
Dieses Beispiel erzeugt im <DIV> 3 Zeilen.
Mit folgendem Beispiel erzeugen Sie einfache Spalten. Das alleine können Sie durchaus mal brauchen.
.container{ display: grid; grid-template-columns: 250px 250px 250px; } .spalte-1 { grid-row: 3/3; } .spalte-2 { grid-row: 3/3; } .spalte-3 { grid-row: 3/3; }
<div class="container"> <div class="spalte-1"> Zeile 1 </div> <div class="spalte-2"> Zeile 2 </div> <div class="spalte-3"> Zeile 3<br />mit Untertext </div> </div>
z7
Mit folgendem Beispiel erzeugen Sie ein einfaches Layout für eine Webseite.
codepen.io/radarin/Zeilen-Spalten
medium.com/…/css-grid-einführung
Eine Zeitgemässe CSS-Formatierung der eigenen Webseite ist ein grosser Aufwand, insbesondere wenn man nicht der CSS Profi ist. Da gibt es viel zu tun:
Da sich diese Aufgaben immer wieder wiederholen, sind sogenannte Frameworks entstanden, die den Webdesignern die Arbeit erleichtern.
Das bekannteste Framwork wurde von Twitter entwickelt und heisst Bootstrap und wird teilweise von WordPress Themes verwendet. Sie erkennen das am ‘bootstrap.css’ im Quellcode der WP-Webseite. Mann muss also lediglich die entsprechenden Klassen im HTML anwenden. Es gibt aber auch die Möglichkeit es im eigenen Theme nachzurüsten.
code.makery.ch/de/
Offizielle Dokumentation
Bootstrap nachträglich in WordPress einbinden
Einzelne oder auch mehrere Worte können mit einem ‘Textmarker’ markiert werden.
.highlight-yellow{
background-color: #FEF04F;
padding: 0px 2px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 5px;
border-top-left-radius: 15px;
border-bottom-right-radius: 5px;
opacity: 0.8;
border-right-style: solid;
border-right-width: 3px;
border-right-color: #f8e400;
}
Das Wort oder die Wörter die so markiert werden sollen müssen im Quelltext in ein <span class=”highlight-yellow”>…</span> eingebunden werden.
Widgets in WordPress sind eine tolle Sachen. Sie bieten vielfältige Möglichkeiten um Informationen darzustellen. Dafür müssen im Theme entsprechende Bereiche vorbereitet werden. Das passiert in 2 Schritten.
Den folgenden Code notieren Sie in der ‘functions.php’:
Wichtig dabei nur die Angabe einer eindeutigen ‘id’, ‘name’ und ‘description’ sind nicht zwingend aber sinnvoll, da sie im Backend verwendet werden. Mit den zusätzlichen Angeben kann die Darstellung formatiert werden.
Damit das Widget im Theme auch angezeigt werden kann, muss es noch in die entsprechende Datei integriert werden:
https://www.holgerkoenemann.de/wordpress-basics-ein-widget-area-ein-theme-einbauen/