Inverser l'ordre des colonnes d'un thème PluXML
Les thèmes par défaut que propose PluXML, ainsi que mes templates, proposent une organisation en deux colonnes : la partie article se situe à gauche, et la sidebar contenant les derniers articles, les tags, les catégories, ... se situe à droite. Il est possible de changer très facilement l'ordre de ces colonnes.
Nous allons utiliser le css pour inverser ces colonnes. Dans un premier temps, rendez-vous dans le dossier de votre thème, et ouvrez votre fichier css (par défaut style.css). Dans votre feuille de style repérez ces deux balises :
Vous remarquerez que ces deux balises ont toutes deux une propriété identique nommé float. Pour faire simple, cette propriété permet de choisir un positionnement (par exemple gauche et droite dans notre cas). Si votre balise #article à une propriété float:left, passez là en float:right (ou inversement), et faîtes de même pour la balise aside.
L'ordre de vos colonnes est maintenant inversé. Il est possible que dans certains thèmes, des margin et des padding soient appliqués aux colonnes, provoquant des problèmes d'alignement verticaux : pour cela, il vous suffit de modifier leurs valeurs dans votre css.
Voici un exemple avec le thème par défaut :
Nous allons utiliser le css pour inverser ces colonnes. Dans un premier temps, rendez-vous dans le dossier de votre thème, et ouvrez votre fichier css (par défaut style.css). Dans votre feuille de style repérez ces deux balises :
- #article (pour la colonne article)
- #aside (pour la sidebar)
Vous remarquerez que ces deux balises ont toutes deux une propriété identique nommé float. Pour faire simple, cette propriété permet de choisir un positionnement (par exemple gauche et droite dans notre cas). Si votre balise #article à une propriété float:left, passez là en float:right (ou inversement), et faîtes de même pour la balise aside.
L'ordre de vos colonnes est maintenant inversé. Il est possible que dans certains thèmes, des margin et des padding soient appliqués aux colonnes, provoquant des problèmes d'alignement verticaux : pour cela, il vous suffit de modifier leurs valeurs dans votre css.
aucun commentaire Le 31 janvier 2012 - Classé dans : Tutoriels