Forum

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 :

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é :

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 :


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 :


Et ainsi apparaitra un titre sur le module :


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 :


Soit dans un code CSS :


Le résultat en image :


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 Edité par PaperToss Le 06/06/2016 à 15h53

Ben voilà une idée quelle est bonne .
Moi qui est du mal avec les css.

Merci à toi

Gaaaazzzzzzzzz

Bonne idée, merci

"On me signale dans l'oreillette que nombre de plugins de ce genre existe".
Mauvaise info, je n'en connaissais pas, pardon.

Non pas dans PHPBoost mais sur d'autres CMS.

Quoi qu'il en soit, j'attends vos bugs éventuels et suggestions d'amélioration

Bonjour, pareil pr moi :
Fatale : Unable to find language file "common" in: "/easycss"

[0] /kernel/framework/core/lang/LangLoader.class.php:102 - LangLoader::get_real_lang_path(string, string)
[1] /kernel/framework/core/lang/LangLoader.class.php:94 - LangLoader::load(string, string, string)
[2] /kernel/framework/core/lang/LangLoader.class.php:85 - LangLoader::get_raw(string, string)
[3] /EasyCss/controllers/AdminEasyCssThemeController.class.php:52 - LangLoader::get(string, string)
[4] /EasyCss/controllers/AdminEasyCssThemeController.class.php:43 - AdminEasyCssThemeController->init()
[5] /kernel/framework/mvc/dispatcher/UrlControllerMapper.class.php:87 - AdminEasyCssThemeController->execute(HTTPRequestCustom)
[6] /kernel/framework/mvc/dispatcher/UrlControllerMapper.class.php:59 - UrlControllerMapper->do_call()
[7] /kernel/framework/mvc/dispatcher/Dispatcher.class.php:67 - UrlControllerMapper->call()
[8] /kernel/framework/mvc/dispatcher/DispatchManager.class.php:43 - Dispatcher->dispatch()
[9] /EasyCss/index.php:38 - DispatchManager::dispatch(array)
[URL] /EasyCss/index.php?url=/theme

Cordialement, Edité par Cyberily Le 15/06/2016 à 18h18

bonjour amis
 
voila un plus indaignable pour nous les réfractaires  au code ( peut être même que ça va finir par faire  gagner du temps aux dev qui doivent en permanence répondre à ce  genre de questions )
 
un petit commentaire
j'essaied'utiliser ce module avec une page personnalisée par le module page d'accueil
je trouve que les design .css et ce type de menu doivent être explicité dans le module en disant à quoi ça sert content.css etc
 
dans chaque module idem header on se doute de ce que c'est mais dix# top-header-container  ???? là on ne sait plus à quoi ça  correspond
 
ensuite j'aimerais pour chaque menu changer le background soit la couleur soit ajouter une image de fond  comment fait on
 
j'ai trouvé pour la couleur dans le design css mais ça fait changer toutes les pages
 
pour etre concret changer le background de la page accueil puis changer celui de mon autre menu par exemple calendar  etc ou une page perso 
 
merci à toi mais là on tient le bon bout
cdlt
 
pat Edité par patgame Le 27/07/2016 à 22h54