style.css - Der komplette Code

/*
Theme Name: Theaterportal
Theme URI: http://www.wp-handbuch.rneuhoff.de
Author: Reiner Neuhoff
Author URI; http://www.rneuhoff.de
Description: Ein einfaches Theme Theaterportal
Version: 1.0
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: layout, responsives design
Template: TwentySixteen
*/

/* CSS Reset */
img, ul, li {
border: 0;
margin: 0;
padding: 0;
}

/* Bilder automatisch skalieren */
/*  Bilder so breit wie der vorhandene Platz, Höhe automatisch, Bild wird nicht gestaucht  */
img {
max-width: 100%;
height: auto;
}

/* Schriftgröße und Schriftart */
body {
font-family: Helvetica,Arial,sans-serif;
font-size: 100%;
}

/*  Überschriften auf 1.5 em  */
h1 {
font-size: 1.5em;
font-weight: normal;
}

/* Seitentitel formatieren */
.site-title {
font-size: 2em;
font-weight: bold;

/* Links */

/* color: #000000 färbt die Schrift schwarz / text-decoration: underline Der Text wird unterstrichen */
a {
color: #000000;
text-decoration: underline;
}

/* Der Überschrift-Link besteht danach nur noch aus reinem Text */
h1 a { text-decoration: none; }

/* Maus über den Link ziehen, färbt sich orange */
a:hover { color: orange; }

/* Der Link soll kurz in einer anderen Farbe aufleuchten, wenn ihn der Besucher anklickt oder antippt */
a:active { color: green; }

 

/* Hauptmenü */

/*  Entfernen der Aufzählungspunkte nur in den Listen <ul>  */
nav ul { list-style:none; }

/* 
Jeder Link erhält als Hintergrundfarbe hellgrau  lightgrey / Innenabstand um den Link 0.5em
Nach jedem einen Zeilenumbruch einfügen mit display:block;  
Jeder Link erhält einen Außenabstand nach oben von 1px  margin-top: 1px;
Die Unterstriche werden entfernt mit  text-decoration: none;
*/
nav li a {
    background: lightgrey;
    padding:0.5em;
    display:block;
    margin-top:1px;
    text-decoration:none;
}

/*  Schriftfarbe: weiss /  Hintergrundfarbe: dunkelgrau  */
nav li a:hover {

    color:#fff;
    background:darkgrey;
}

/*
Alle Links a nach rechts um 1.5em vom linken Rand weg rücken
auch alle Aufzählungspunkte in einer Liste li 
auch wenn diese Liste in einer anderen Liste platziert ist ul ul
und wenn alles umgeben ist von nav
*/
nav ul ul li a { padding-left: 1.5em; }


/* Beiträge */

/*
Am unteren Rand eine Linie, durchgezogenen (solid), hellgrau (lightgrey), 1Pixel
Abstand: Abstand bis zum unteren Rand (Rahmenlinie) = padding-bottom
Abstand bis zum nächsten Beitrag margin-bottom
*/
article {
border-bottom: 1px solid lightgrey;
padding-bottom: 1em;
margin-bottom: 1em;
}

/*  Text unter der Überschrift des Beitrages verkleinern auf 0.8 em  */
header { font-size: 0.8em; }

/*  
Den <h1> Titel des Beitrages z.B. Vorstellungen wieder etwas vergrößern  
1.875em =>
Schrift = 10 Pixel | 0.8em = 10 Pixel x 0,8 = 8 Pixel
Um 15 Pixel zu erreichen  8 px = 100%  15px = 100/8*15 =1.875
*/
header h1 { font-size: 1.875em; }

/*  Schrift auf grün setzen, bei Maus over wird die Schrift dann schwarz  */
header h1 a { color: green; }

header h1 a:hover { color: black; }


/*  Kategorien  */

/*
Ein Punkt vor post-categories informiert den Browser, dass es um einen Klassennamen handelt
und nicht um ein HTML-Tag
list-style:none; = keine Aufzählungspunkte in der Liste
display:inline; = Kategorienamen werden zu normalen Text
*/
.post-categories li {
     list-style:none;
     display:inline;
}


/* Widgets  */ 

aside { font-size: 0.9em; } 

/* Überschriften <h2> in grün und normale Größe */
aside h2 {

     font-size: 1em;
     font-weight: normal;
     color: orange;
}

/* Aufzählungspunkte entfernen */
aside li { list-style:none; }

/* Abstand nur für die Widgets, nicht jedoch für deren Inhalte class Widget */
li.widget { margin-bottom: 2em; }

 

/*  Footer  */

/* Die aufgerufene header.php ruft wiederum die style.css auf,
in der nun die Formatierung erfolgt */
footer {
     font-size: 0.7em;
     text-align: center;
     color: red;
}
 

/* Beitragsbild */

/* Beitragsbild in einer eigenen Zeile platzieren */
.wp-post-image { display:block; }

 

/* Benutzerdefinierte Felder */

/*
margin-left: 1em; Einrückung vom linken Rand
list-style: disc; Aufzählungspunkte
font-style: italic; Schlüssel kursiv
*/
.post-meta {
      margin-left: 1em;
      list-style: disc;
}
.post-meta-key { font-style: italic; }


/*  Kommentare formatieren */


/* Aufzählungspunkte entfernen / Kommentar Abstand nach oben + unten vergrößern um 2em *>
li.comment {
list-style: none;
margin-top:2em;
margin-bottom:2em
}

/* Links werden nicht unterstrichen */
li.comment a { text-decoration: none; }

/* Antworten nach rechts um 2em einrücke, Abstand links 1em, links Rahmen hellgrau */
li.comment ul {
margin-left: 2em;
padding-left: 2em;
border-left: 2px solid lightgrey
}

/* Datum etwas kleiner */
li.comment .comment-meta { font-size: 0.8em; }

/* Avatar bild links bündig mit float: left, Abstand zum Bild 0.5em durch padding-right */
li.comment img.avatar {
float: left;
padding-right: 0.5em;
}

/* Link zu Antworten commt-reply-link auf 0.8em Schriftgröße + unterstrichen */
li.comment .comment-reply-link {
font-size: 0.8em;
text-decoration: underöine;
}


/*  Kommentar-Formular */

/* Formularüberschrift comment-reply-title auf 1em und fett */
h3.comment-reply-title {
font-size: 1em;
font-weight:bold;
}

/* Beschriftungen der Eingabefelder comment-form label jeweils in einer eigenen Zeile */
.comment-form label { display:block; }


/* Innenabstand 2em | Außenabstand 1em und Bereiche mit hellgrauen Strich trennen */
.comment-form {
margin-bottom: 2em;
padding-bottom: 1em;
border-bottom: 1px solid lightgrey;
}