EasyCss : Personnalisation CSS

PaperToss Membre non connecté

Booster Bazooka

Le 06/06/2016 à 15h24

Bonjour,

Je vous propose aujourd'hui de découvrir un module encore en développement : EasyCss

Ce module est destiné à simplifier au maximum la personnalisation des fichiers CSS de vos thèmes. C'est à dire qu'il vous permettra de les éditer sans aucune connaissance en CSS, ni aucun éditeur : Tout se fait avec le navigateur, depuis l'administration de votre site.

Installation

Vous pouvez télécharger le module ici : Personnalisation CSS

Puis, procédez à l'installation comme n'importe quel module.

Module uniquement utilisable sous PHPBoost version 5.0.x

Utilisation

Vous pourrez accéder au module depuis l'administration, onglet 'Outils', et cliquez sur 'EasyCss'.

Apparaissent alors les différents thèmes installés et les fichiers qui composent le thème :

easycss1

Cliquez sur le fichier que vous souhaitez modifier.

Modifications

Sur cette page sont affichés tous les éléments modifiables du fichier précédemment sélectionné :

easycss2

Pour modifier les valeurs, il suffit de cliquer sur l'élément, choisir la couleur voulue.

Une fois toutes les modifications effectuées, rendez-vous tout en bas de la page, et cliquez sur 'Envoyer'.

Les modifications sont alors immédiatement prises en compte dans le fichier CSS d'origine, et si le cache est activé, celui-ci est automatiquement rafraichit.

Aux graphistes

Comme l'image précédente le montre, le module affiche les noms des blocs comme décrits dans le CSS ( div#top-content etc).

Vous avez la possibilité de guider les utilisateurs qui auraient moins de connaissances dans le CSS avec des titres et des commentaires.

Les titres

Vous pouvez afficher des titres n'importe où sur la page très simplement.

Pour cela, il suffit d'insérer dans le code CSS une balise comme celle-ci :

Code CSS :

/** --- TITRE --- */

Notez la présence des 2 étoiles (*) après le slash et les 3 tirets de par et d'autre du titre.

Soit dans un contenu CSS :

Code CSS :

/** --- Contenu superieur de la page --- */
div#top-content {
    margin : 0 0 2% 0;
    padding : 0.1em 0.8em;
    background-color : #ffffff;
    border : 1px solid #bebebe ;
}
 
div#bottom-content {
    margin : 2% 0 0 0;
    padding : 0.1em 0.8em;
    background-color : #ffffff;
    border : 1px solid #bebebe ;
}

Et ainsi apparaitra un titre sur le module :

easycss3

Ici on voit que le titre 'Contenu superieur de la page' a remplacé le nom original du bloc 'div#top-content'.

Les commentaires

Vous pouvez par ailleurs ajouter des annotations qui pourront décrire à quoi correspondent les éléments grâce à des commentaires.

La syntaxe est presque semblable aux commentaires originaux de CSS, à l'exception faite qu'il ne faille rajouter une étoile après le slash :

Code CSS :

/** Commentaire */

Soit dans un code CSS :

Code CSS :

div#top-content {
    margin : 0 0 2% 0;
    padding : 0.1em 0.8em;
    background-color : #ffffff;
    border : 1px solid #bebebe ;
}
 
/** Emplacement au dessus du pied de page */
 
div#bottom-content {
    margin : 2% 0 0 0;
    padding : 0.1em 0.8em;
    background-color : #ffffff;
    /** Couleur des bordures autour du contenu du pied de page */
    border : 1px solid #bebebe ;
}

Le résultat en image :

easycss4

On voit ici que les commentaires sont bien visibles aux endroits désirés, mais n'ont pas eux remplacé le titre 'div#bottom-content'.

Pour le moment, le module gère uniquement les attributs :

- color

- background

- background-color

- border

- border-color

- border-top (bottom, right, left)

- border-top-color (bottom, right, left)

Et il n'est possible de modifier que les couleurs prédéfinies (white, black, green, .......), les couleurs hexa ( #123456), RGB, et RGBA.

Sont pris en charge les 'none, transparent, inherit et initial' pour lesquels le module affichera une zone de texte vous permettant de définir vous-même une modification.

Il est également possible pour toutes ces valeurs d'ajouter ou retirer l'attribut '!important'.

J'attends vos retours sur ce module afin de le rendre le plus stable possible, et bien sûr, pouvoir l'améliorer.

Je précise encore une fois qu'il s'agit d'un module en développement. Aussi, il se peut qu'il contienne encore des bugs non détectés.

Il est donc très fortement conseillé de réaliser une sauvegarde de vos thèmes avant d'utiliser ce module sur vos thèmes.

Si vous l'avez raté, je remets le lien ici : Personnalisation CSS

Édité par PaperToss Le 06/06/2016 à 15h53