4 - Externe CSS-Datei

Im Page-Controller (Ordner: mysite/code/Page.php) werden Standardmässig drei CSS-Dateien geladen. Es ist sinnvoll, diesen Standard zu benutzen. (Andernfalls müsste Page.php entsprechend angepasst werden.)

Requirements::themedCSS('layout'); 
Requirements::themedCSS('typography'); 
Requirements::themedCSS('form'); 

Diese drei Dateien werden im Ordner themes/meintemplate/css erwartet. Im Moment können die nicht verwendeten aber aufgerufenen CSS-Dateien leer sein, sollten aber existieren, um einen Fehler beim Debugging zu vermeiden. Wir beginnen also damit unseren Templateordner aufzubauen:

1. Im Ordner themes/meintemplate/css erstellst du folgende Dateien:
   layout.css
   typography.css
   form.css
   print.css (wir können die Printausgabedatei bereits vorbereiten)

Dein Ordner sollte nun folgendermassen aussehen:

Die Absicht der Silverstripe-EntwicklerInnen erscheint klar.

• form.css soll die Stile für Formulare enthalten
• print.css die Stile für die Druckausgabe
• typography.css die schriftgestalterischen Angaben
• layout.css soll die Positionsangaben des Layouts enthalten.

In diesem Tutorial werden wir zuerst einmal den ganzen CSS-Code in der Datei layout.css unterbringen. Einem späteren Ausbau steht somit nichts im Wege.

2. Öffne die Datei layout.css im Editor
3. Füge den CSS-Codeblock aus der Vorlagedatei ein

Beispieldatei Codeansicht CSS:

body {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #CCCCCC;
}
header {
    height: 60px;
    background-color: #66CC99;
    width:100%;
}
header h1 {
    padding: 5px 0 5px 200px;
}
nav {
    width: 33%;
    float: left;
}
nav ul {
    list-style: none;
    padding-left: 20px;
}
nav ul li a {
    color: #990000;
    text-decoration: none;
}
nav ul li a:hover {
    color: #006600;
}
article {
    width: 67%;
    float: left;
}
article h1 {
    color: #990000;
}
footer {
    width: 100%;
    height: 60px;
    background-color: #66CC99;
    clear: both;
}
footer p {
    padding: 20px;
}

4. Speichere die Datei layout.css

Weiter, den HTML-Code nach Page.ss kopieren