Thème W3css pour PluXml

W3css est un nouveau thème pour PluXml. Il reprend le framework du même nom et permet d'adapter facilement le style d'un site. Le thème W3css adopte la même structure des pages (articles, catégories, tags et archives, ...) que le thème par défaut mais avec une touche colorée et quelques modifications. Le thème peut être utilisé tel quel mais il est possible de modifier la couleur par défaut et de nombreux éléments (faudra quand même bricoler pour ça).
Il existe +50 couleurs disponibles et la possibilité d'importer ses propres couleurs pour contenter tous les goûts.

L'objectif est de fournir un thème élégant tout en profitant des fonctions et de la simplicité de W3css pour obtenir un site aboutit. Il sera très facile d'ajouter du contenu (comme de tableaux, listes, alertes, ....) qui reprendra le même style que celui du thème pour une mise en page impeccable.

Le thème est sous licence libre et peut donc être modifié/partagé selon vos envies.

Présentation

Voici quelques exemples de la page d'accueil déclinée en plusieurs couleurs.

Fonctions principales

  • Thème responsive design pour s'adapter à tous les écrans
  • Intégration de la police d'icônes FontAwesome
  • Une pagination simplifiée
  • Un menu déroulant pour les pages statiques
  • De nombreux thèmes de couleur disponibles
  • La possibilité de créer un thème de couleur facilement

Le thème en images

Installation

Pour faire fonctionner le thème, il faudra évidement installer le thème ainsi que deux plugins supplémentaires qui permettront d'intégrer la police d'icône FontAwesome et une pagination adaptée au thème.

Pré-requis

  • PluXml 5.5
  • Thème W3css 1.0
  • Plugin plxFontAwesome 0.3
  • Plugin plxSimplePager 1.0

Le thème a été créé pour la version 5.5 de PluXml et aucune compatibilité avec les versions précédentes n'est assurée.

Installation du thème W3css

On commence par télécharger le thème: http://blog.niqnutn.com/plugins/repository/index.php
Ensuite, il faut décompresser l'archive. Le dossier du thème doit être nommé w3css pour fonctionner correctement (renommer le si besoin).
Il ne reste plus qu'à le déposer sur votre serveur dans le répertoire themes de votre installation PluXml.
On finit par activer le thème dans l'administration de votre site depuis le menu: Paramètres > Thèmes puis sélectionner le thème W3css et cliquer sur Modifier les options d'affichage pour appliquer les changements.

On complète l'installation avec deux plugins qui permettent d'améliorer le thème: plxFontAwesome et plxSimplePager.

Installation de FontAwesome

On continue en installant le plugin plxFontAwesome qui ajoutera la police d'icône.
On télécharge le plugin sur: http://blog.niqnutn.com/plugins/repository/index.php
Ensuite, il faut décompresser l'archive. Le dossier du plugin doit être nommé plxFontAwesome pour fonctionner correctement (renommer le si besoin).
Il ne reste plus qu'à le déposer sur votre serveur dans le répertoire plugins de votre installation PluXml.
On finit par activer le plugin dans l'administration de votre site depuis le menu: Paramètres > Plugins puis dans l'onglet Plugins inactifs sélectionner plxFontAwesome et dans le menu déroulant plus haut sélectionner Activer pour valider les modifications.

Pour plus d'information, un article détaillé pour découvrir FontAwesome et son utilisation: http://blog.niqnutn.com/index.php?article18/fontawesome

Installation de plxSimplePager

Il reste encore le plugin plxSimplePager pour ajouter une pagination simplifiée à PluXml.
On récupère l'archive sur : http://blog.niqnutn.com/plugins/repository/index.php
Ensuite, il faut décompresser l'archive. Le dossier du plugin doit être nommé plxSimplePager pour fonctionner correctement (renommer le si besoin).
Il ne reste plus qu'à le déposer sur votre serveur dans le répertoire plugins de votre installation PluXml.
On finit par activer le plugin dans l'administration de votre site depuis le menu: Paramètres > Plugins puis dans l'onglet Plugins inactifs sélectionner plxSimplePager et dans le menu déroulant plus haut sélectionner Activer pour valider les modifications.

Une fois le thème et les deux plugins correctement installés et activés, il suffit de recharger la page d'accueil pour découvrir le nouveau thème.

Toutes les informations concernant l'installation se retrouve également dans le fichier Readme.md en cas de changement.
Les informations concernant l'utilisation du thème sont dans le menu: Paramètres > Thèmes > Aide

Changer les couleurs du thème

Le thème a été créé dans le but d'offrir une très grande personnalisation. Le premier élément que l'on peut changer, c'est la couleur !

Le plugin W3cssThemeSelect permet de sélectionner parmi une liste de couleurs prédéfinit, ce qui sera pratique pour tous ceux qui se lancent dans la construction de leur premier site ou ceux qui ne souhaitent pas s'aventurer dans la modification du code. Pour ceux qui veulent aller un peu plus loin, il est possible d'ajouter ses propres couleurs, un outil permet de générer automatiquement le code CSS correspondant ou simplement de l'éditer manuellement. Il faudra dans ce cas l'intégrer dans le fichier CSS du thème.

Installation de W3cssThemeSelect

L'installation du plugin W3cssThemeSelect est la solution la plus simple et celle qui est recommandée.

On commence par installer W3cssThemeSelect qui permettra de choisir la couleur du thème.
On télécharge le plugin sur: http://blog.niqnutn.com/plugins/repository/index.php
Ensuite, il faut décompresser l'archive. Le dossier du plugin doit être nommé plxW3cssThemeSelect pour fonctionner correctement (renommer le si besoin).
Il ne reste plus qu'à le déposer sur votre serveur dans le répertoire plugins de votre installation PluXml.
On finit par activer le plugin dans l'administration de votre site depuis le menu: Paramètres > Plugins puis dans l'onglet Plugins inactifs sélectionner W3cssThemeSelect et dans le menu déroulant plus haut sélectionner Activer pour valider les modifications.

Il faut maintenant changer la couleur du thème. Dans le menu permettant de gérer le plugin, cliquer sur le lien Configuration correspondant à W3cssThemeSelect . Il suffit de choisir parmi la liste déroulante et de cliquer sur Enregistrer pour valider les modifications.

Pour voir les modifications, il faut penser à recharger la page d'accueil.

De cette manière, on pourra changer régulièrement le thème pour l'adapter aux saisons ou aux événements de l'année.

Modification manuelle

Pour modifier les couleurs du thème manuellement, il faudra éditer la feuille de style présente dans "/themes/w3css/css/w3-custom.css". Cela correspond aux première lignes du fichier CSS.

/themes/w3css/css/w3-custom.css 
/* Couleurs du thème */

.w3-theme-l5 {color:#000 !important; background-color:#faf9f8 !important}
.w3-theme-l4 {color:#000 !important; background-color:#efeae6 !important}
.w3-theme-l3 {color:#000 !important; background-color:#dfd4cd !important}
.w3-theme-l2 {color:#000 !important; background-color:#cfbfb4 !important}
.w3-theme-l1 {color:#000 !important; background-color:#bfa99b !important}
.w3-theme-d1 {color:#fff !important; background-color:#a48470 !important}
.w3-theme-d2 {color:#fff !important; background-color:#95745f !important}
.w3-theme-d3 {color:#fff !important; background-color:#836654 !important}
.w3-theme-d4 {color:#fff !important; background-color:#705748 !important}
.w3-theme-d5 {color:#fff !important; background-color:#5d493c !important}

.w3-theme-light {color:#000 !important; background-color:#faf9f8 !important}
.w3-theme-dark {color:#fff !important; background-color:#5d493c !important}
.w3-theme-action {color:#fff !important; background-color:#5d493c !important}

.w3-theme {color:#fff !important; background-color:#af9483 !important}
.w3-text-theme {color:#af9483 !important}
.w3-theme-border {border-color:#af9483 !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#af9483 !important}

Il est possible de l'éditer directement depuis l'interface d'administration depuis le menu: Paramètres > Thèmes > Éditer les fichiers du thème ou en modifiant et en envoyant le fichier CSS correspondant via FTP.

Un outil est disponible en ligne pour générer le code CSS à partir d'une couleur. Il faut se rendre sur la page W3.CSS Color Themes pour créer son thème personnalisé. Une fois le thème créer, il suffit de récupérer le CSS qui a été généré et le recopier dans w3-custom.css .

Une fois les modifications effectuées, il faut recharger la page d'accueil pour que les modifications s'appliquent.

Aide sur W3css

W3css ne se limite pas uniquement au thème mais permet la mise en page du contenu d'un site. Cela peut passer par la mise en page d'un tableau, d'images, formulaires, boutons ... en utilisant les class qui correspondent. Rien de compliquer, il suffit de se baser sur les nombreux exemples disponibles puis de les adapter à votre contenu. Aucune connaissance n'est nécessaire pour utiliser W3css.

Quelques exemples de ce qu'il est possible de réaliser:

Pour profiter du framework W3css, des exemples sont disponibles dans l'aide du thème.

Pour voir toutes les possibilités de W3css, on peut visiter les différents modèles: http://www.w3schools.com/w3css/w3css_templates.asp
Pour découvrir toutes les fonctions, il faut parcourir la documentation et ses nombreux exemples: http://www.w3schools.com/w3css/default.asp

Ressources

Télécharger

2016 nIQnutn CC-BY
tags : pluxml
0 vote
06/07/2016 19:29
Ecrit par nIQnutn - Afficher l'article originel
Vus : 1596
Publié par nIQnutn : 73