Im Jahr 2014 wird HTML5 voraussichtlich endgültig fertiggestellt werden. Um die Spezifikationen festzuschreiben und den neuen Standard offiziell veröffentlichen zu können, werden aber erst einmal neue Autoren gesucht. Von Browser- und Webseitenbetreiberseite erhält er allerdings jetzt schon breite Unterstützung, die sich kontinuierlich ausdehnt.

Weiterhin arbeitet das W3C mit der WHATWG (Web Hypertext Application Technology Working Group) zusammen, die aus Mitarbeitern der
Browserentwickler Apple, Mozilla und Opera besteht und bereits HTML5 auf den Weg gebracht hat. Dort wird bereits seit längerem an einem Nachfolger für HTML5 gearbeitet, der dort schlicht und einfach “HTML” genannt wird. Dementsprechend soll die nächste Version gänzlich ohne Versionsnummer auskommen und sich dynamisch weiterentwickeln und neue Technik in der Spezifikation definieren.

Das SOAP-Problem lässt sich mittlerweile recht einfach beheben, indem man die Erweiterung nusoap aus dem Contao Extension Repository manuell installiert. Damit lässt sich dann der Katalog nutzen, auch wenn SOAP vom Server nicht unterstützt wird.

Die fehlenden Schreibrechte verursachen teils unterschiedliche Fehler. So kann es passieren, dass der Cronjob bei jedem Seitenaufruf gestartet wird, was man schnell im System-Log ermitteln kann. Das lässt sich manchmal schon durch das einfache Ändern der Zugriffsrechte beheben. Die Datei localconfig.php im Ordner “system/config/” sollte dabei auf 664 gesetzt werden.

Wenn das nicht hilft, kann man es über den Safe Mode Hack probieren. Dabei werden die FTP-Zugangsdaten in die Datei localconfig.php eingetragen und das CMS führt die Dateizugriffe dann über FTP durch. Hier die notwendigen Zeilen (gleich am Beispiel für Strato):

1
2
3
4
5

$GLOBALS['TL_CONFIG']['useFTP'] = true;
$GLOBALS['TL_CONFIG']['ftpHost'] = 'ftp.strato.com';
$GLOBALS['TL_CONFIG']['ftpPath'] = '/';
$GLOBALS['TL_CONFIG']['ftpUser'] = '***';
$GLOBALS['TL_CONFIG']['ftpPass'] = '***';

$GLOBALS['TL_CONFIG']['useFTP'] = true;
$GLOBALS['TL_CONFIG']['ftpHost'] = 'ftp.strato.com';
$GLOBALS['TL_CONFIG']['ftpPath'] = '/';
$GLOBALS['TL_CONFIG']['ftpUser'] = '***';
$GLOBALS['TL_CONFIG']['ftpPass'] = '***';

Ein weiterer Fehler trat auf, wenn man bspw. die Daten in der Systemwartung bereinigte oder neue Seiten anlegte. Beides wurde konsequent mit der Fehlermeldung Fatal error: Cannot create file 'statistik' beendet. Durch Recherche im Contao-Forum fand ich zwar einen Thread zu diesem Thema, allerdings ohne konkrete Lösung. Laut eines Users tritt der Fehler wohl aufgrund eines Symlinks im Hauptverzeichnis auf, der vom Contao CMS fehlinterpretiert wird. Die Problembehebung ist so simpel wie logisch: Man legt das komplette CMS einfach in ein Unterverzeichnis!

Im Hostingpaket muss dann natürlich noch das Verzeichnis für die Domain angepasst werden. Ebenso wie der Pfad des Safe Mode Hacks in der localconfig.php:

1

$GLOBALS['TL_CONFIG']['ftpPath'] = 'contaopfad/';

$GLOBALS['TL_CONFIG']['ftpPath'] = 'contaopfad/';

Duru Sans

von Sorkin Type Co

Duru Sans herunterladen

Sofia

von Latinotype

Sofia herunterladen

LemonChicken

von Crack-a-Jack Studios

LemonChicken herunterladen

Worstveld Sling

von Typotheticals

Worstveld Sling herunterladen

Kostenloses Tagebuch WordPress Theme: Diary

Demo | Download

WordPress Template: Boldy

Demo | Download

Minimalistisches WordPress Theme: ecoBlog

Demo | Download

Theme für Comics und Manga: Katana

Demo | Download

Portfolio WordPress Template: Aurelius

Demo | Download

Variablen – CSS wird dynamisch

LESS erweitert CSS um dynamische Komponenten, wie Variablen, Operationen und Funktionen. Es läuft dabei entweder auf dem Server des Besuchers (ab IE 6+, Webkit-Browsern und Firefox) oder direkt auf dem eigenen Server.

Variablen können damit also einmal gesetzt und an verschiedenen Stellen des Stylesheets verwendet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* LESS */
@color: #4D926F;
 
#header {
    color: @color;
}
h2 {
    color: @color;
}
 
/* Kompiliertes CSS */
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

/* LESS */
@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

/* Kompiliertes CSS */
#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

Mixins – CSS-Funktionen

Die sogenannten Mixins erlauben es, CSS-Klassen in andere Klassen einzubetten, indem einfach der Name der Klasse als Eigenschaft verwendet wird. Also ähnlich wie die Variablen, nur halt für eine gesamte CSS-Klasse. Mixins können sich auch wie Funktionen verhalten und Argumente übergeben, was man sonst nur aus Programmiersprachen wie PHP kennt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* LESS */
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
 
#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}
 
/* Kompiliertes CSS */
#header {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

/* LESS */
.rounded-corners (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

/* Kompiliertes CSS */
#header {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#footer {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Nested Rules – CSS-Klassen einfach verschachteln

Anstatt langer Selektoren-Namen, die Vererbungen festlegen, können mit den Nested Rules alle Selektoren einfach in die gewünschte Klassen geschrieben werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* LESS */
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}
 
/* Kompiliertes CSS */
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

/* LESS */
#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p { font-size: 12px;
        a { text-decoration: none;
            &:hover { border-width: 1px }
        }
    }
}

/* Kompiliertes CSS */
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

Funktionen und Operationen

Mit LESS können außerdem Operationen wie Addition, Subtraktion, Multiplikation und Division verwendet werden. Das funktioniert erstaunlicherweise nicht nur bei Größenangaben, sondern auch bei Farbwerten. Damit können komplexe Verbindungen zwischen Elementen hergestellt werden. Darüber hinaus können Werte auch noch durch JavaScript-Code manipuliert werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/* LESS */
@the-border: 1px;
@base-color: #111;
@red:        #842210;
 
#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}
 
/* Kompiliertes CSS */
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

/* LESS */
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: @base-color * 3;
    border-left: @the-border;
    border-right: @the-border * 2;
}
#footer {
    color: @base-color + #003300;
    border-color: desaturate(@red, 10%);
}

/* Kompiliertes CSS */
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

LESS verwenden

Wird LESS auf Browser-Seite verwendet, muss lediglich die Stylesheet-Datei, gefolgt vom JavaScript im <head> der Website eingebunden werden.

1
2

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

Die Installation auf dem Server erfordert schon mehr Erfahrung und setzt gewisse Serverrechte voraus.

LESS produktiv einsetzen

Die Möglichkeiten, die einem LESS bietet, sind ohne Frage hervorragend und hat sich sicher schon jeder Webentwickler mehr als einmal gewünscht. Hat man die Möglichkeit, LESS auf einem Server installieren zu können, steht einer Verwendung eigentlich nichts entgegen. Auf Client-Seite wird aber zwingend JavaScript benötigt, andernfalls bekommt der Besucher die reine HTML-Seite zu Gesicht. In einer Zeit in der man ohne JavaScript allerdings kaum noch auskommt, ist dies wohl zu verschmerzen. Wünschen würde ich mir, dass das W3C-Konsortium, dass für den CSS-Standard verantwortlich ist, einige dieser neuen Möglichkeiten endlich direkt festlegt. Schließlich handelt es sich dabei hauptsächlich um Erweiterungen, die nur von den Browsern unterstützt werden müssten.

Eine Übersicht aller Variablen, Mixins, Nested Rules, Funktionen und Operationen, sowie den Download findet man auf der LESS-Website.

Landliebe

von Richard Mitchell

Landliebe herunterladen

Unibody 8

von Underware

Unibody 8 herunterladen

Cartwheel

von Sansami Fonts

Cartwheel herunterladen

3Dumb

von Tension Type

3Dumb herunterladen

Unter “Design” – “Menüs” kann man sich die individuellen Navigationselemente anlegen. Unterstützt das aktuelle WordPress-Theme diese Funktion nicht, erhält man folgenden Hinweis in der Box “Anordnung im Theme”: “Das zurzeit aktive Theme unterstützt von sich aus nicht die WordPress-Menüfunktion, aber du kannst das ‘Individuelles Menü’-Widget nutzen, um hier erstellte Menüs im Theme nutzen zu können.” Das wollen wir natürlich nicht!

1. Benutzerdefinierte Menüs in der functions.php aktivieren:
Öffne als erstes die functions.php im Template-Ordner und füge folgenden Code ein:

1
2
3
4
5

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'main-navi' => __( 'Hauptnavigation' )
    ));
}

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'main-navi' => __( 'Hauptnavigation' )
    ));
}

Mittels function_exists() prüfen wir, ob die verwendete WordPress-Version die Funktion register_nav_menus() kennt. Anschließend registrieren wir die Navigation “Hauptnavigation”. Nach dem Speichern der functions.php erscheint dieser Begriff in der Box “Anordnung im Theme” und gibt einem die Möglichkeit, das gewünschte Menü auszuwählen. Sollen mehrere Menüs verwendet werden, muss das Array nur erweitert werden:

1
2
3
4
5
6

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'main-navi' => __( 'Hauptnavigation' ),
        'side-navi' => __( 'Seitennavigation' )
    ));
}

if ( function_exists('register_nav_menus') ) {
    register_nav_menus(array(
        'main-navi' => __( 'Hauptnavigation' ),
        'side-navi' => __( 'Seitennavigation' )
    ));
}

2. Menü-Ausgabe im WordPress-Template
Damit das benutzerdefinierte Menü im Theme erscheint, muss es noch in den Template-Dateien aufgerufen werden. Die Hauptnavigation also bspw. in der header.php, die Seitennavigation in der sidebar.php. Dies geschieht mit der Funktion wp_nav_menu():

1

<?php wp_nav_menu( array( 'theme_location' => 'main-navi' ) ); ?>

<?php wp_nav_menu( array( 'theme_location' => 'main-navi' ) ); ?>

“main-navi” bezieht sich auf den Namen, den wir dieser Navigation in der functions.php gegeben haben. Die Funktion wp_nav_menu() lässt sich außerdem um weitere Parameter erweitern, wie z. B. “container_class”, wodurch die Navigation eine eigene CSS-Klasse erhält:

Für die Seitennavigation sähe das bspw. so aus:

1
2
3
4

<?php wp_nav_menu( array(
    'theme_location' => 'side-navi',
    'container_class' => 'side-navi-class'
) ); ?>

<?php wp_nav_menu( array(
    'theme_location' => 'side-navi',
    'container_class' => 'side-navi-class'
) ); ?>

Das war’s auch schon. Im WordPress-Codex findet man eine Liste aller Parameter, die wp_nav_menu() unterstützt.

Iconset IC Minimal herunterladen

Pinsel 3D Explosion herunterladen