Themes anpassen

Du kannst das Aussehen deiner Webseite anpassen. Demo anschauen.

Themes

Themes bestimmen das Aussehen deiner Webseite und es gibt Themes zum Herunterladen. Das Standardtheme wird in den Systemeinstellungen festgelegt. Eine anderes Theme lässt sich in den Einstellungen ganz oben auf jeder Seite festlegen, zum Beispiel Theme: flatsite.

Jede Webseite hat ein kleines Icon, auch Favicon genannt. Der Webbrowser zeigt dieses Icon beispielsweise in der Adresszeile, in Lesezeichen oder auf der Arbeitsfläche an. Um das Standardicon zu ändern überschreibe die Datei system/themes/assets/icon.png.

HTML

Um Themes zu verstehen, ist es gut die HTML-Struktur einer Seite zu kennen. Es gibt eine Standard-HTML-Struktur die von den meisten Webseiten, Blogs und Wikis benutzt wird. Das ist nur ein Vorschlag damit alles zusammenpasst, du kannst jede Struktur benutzen die du willst.

Hier ist die Standard-HTML-Struktur:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="page template-default">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
  </body>
</html>

Das erste <div>-Element hat nützliche Klassen-Information, zum Beispiel template-default. Eine Blog-Seite benutzt template-blog, eine Wiki-Seite template-wiki und eine Sidebar with-sidebar. Damit kann man Themes an unterschiedliche Templates anpassen.

CSS

Um Themes anzupassen, kann man CSS benutzen. Damit kannst du Farben, Schriftart und das Aussehen deiner Webseite anpassen. Am Einfachsten ist es die vorhandenen CSS-Dateien zu ändern. Du kannst auch eine neue Datei anlegen, zum Beispiel Theme: custom.

Hier ist eine Beispiel-CSS-Datei system/themes/assets/custom.css:

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
body { background-color:#f8cc44; color:#fff; margin:1em; }
body { font-family:Helvetica,sans-serif; font-size:1.5em; font-weight:normal; }
h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:bold; }
h1 { font-size:2.5em; }
a { color:#fff; text-decoration:none; }
a:hover { color:#fff; text-decoration:underline; }
.header .sitename a { color:#fff; font-size:0.4em; font-weight:normal; }
.navigation, .footer { display:none; }

Hier ist ein Beispiel-CSS mit zentriertem Text:

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
body { background-color:#f8cc44; color:#fff; margin:1em; }
body { font-family:Helvetica,sans-serif; font-size:1.5em; font-weight:normal; }
h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:bold; }
h1 { font-size:2.5em; }
a { color:#fff; text-decoration:none; }
a:hover { color:#fff; text-decoration:underline; }
.header .sitename a { color:#fff; font-size:0.4em; font-weight:normal; }
.navigation, .footer { display:none; }
.page { text-align:center; margin:0 auto; max-width:27em; }

Hier ist ein Beispiel-CSS mit Hintergrundbild:

html, body, div, form, pre, span, tr, th, td, img { margin:0; padding:0; border:0; vertical-align:baseline; }
body { background-color:#f8cc44; color:#fff; margin:1em; }
body { font-family:Helvetica,sans-serif; font-size:1.5em; font-weight:normal; }
body {
    background-image:url(custom-background.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
h1, h2, h3, h4, h5, h6 { color:#fff; font-weight:bold; }
h1 { font-size:2.5em; }
a { color:#fff; text-decoration:none; }
a:hover { color:#fff; text-decoration:underline; }
.header .sitename a { color:#fff; font-size:0.4em; font-weight:normal; }
.navigation, .footer { display:none; }
.page { text-align:center; margin:0 auto; max-width:27em; }

JavaScript

Um Themes noch weiter anzupassen, kann man JavaScript benutzen. Damit kannst du Webseiten mit dynamischen Funktionen erstellen. Du kannst JavaScript in eine Datei speichern die einen ähnlichen Namen hat wie die CSS-Datei. Sie wird dann automatisch eingebunden.

Hier ist eine Beispiel-JS-Datei system/themes/assets/custom.js:

var ready = function() 
{
    console.log("Hello world");
    // Add more JavaScript code here
}
window.addEventListener("load", ready, false);

Weiter: Templates anpassen →