Forum

Créations de Modules EasyCss : Personnalisation CSS

PaperToss Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 25/03/2016 à 12h10

Messages: 189

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

Booster Bazooka

Rang

Avatar

Inscrit le : 18/04/2012 à 16h08

Messages: 104

Le 06/06/2016 à 17h23
Bonjour .

Mille merci , je pense que c est un grand pas pour PHPBoost ,surtout pour les personnes qui ont un peut de mal avec le langage "css" ( comme moi )

merci :top Edité par kpi Le 06/06/2016 à 18h03
Site web    
Patoufix Membre non connecté

Booster Roquette

Rang

Avatar

Inscrit le : 13/11/2012 à 17h30

Messages: 276

Le 06/06/2016 à 17h38
Ben voilà une idée quelle est bonne .
Moi qui est du mal avec les css.

Merci à toi

Gaaaazzzzzzzzz


Salut à tous
Monde...Raymonde et Patoufix...Patrice
Le site de Mon Moto Club en PHPBoost : www.mcleopards.fr
Notre Blog : Ma Fiat 850 : http://poukynette.wordpress.com
Mon coté Artiste : Peintures et Photos : http://www.photopat.free.fr
Site web    
PaperToss Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 25/03/2016 à 12h10

Messages: 189

Le 06/06/2016 à 19h20
Merci à vous deux.

Le module EasyCss s'inscrit justement dans la ligne de conduite de PHPBoost, c'est à dire de rendre accessible à tous la création, l'utilisation, la personnalisation et la maintenance d'un site web.

Après quelques recherches, dites-moi si je me trompe, je ne connais aucun autre CMS qui dispose de ce genre de module, et j'espère pouvoir l'emmener bien plus loin que ça. Edité par PaperToss Le 06/06/2016 à 19h20
   
MickaelFR Membre non connecté

Booster Fusée

Rang

Avatar

Inscrit le : 20/01/2014 à 11h01

Messages: 1669

Le 06/06/2016 à 19h48
Bonne idée, merci :top
kpi Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 18/04/2012 à 16h08

Messages: 104

Le 06/06/2016 à 21h05
PaperToss:


Après quelques recherches, dites-moi si je me trompe, je ne connais aucun autre CMS qui dispose de ce genre de module, et j'espère pouvoir l'emmener bien plus loin que ça.


oui c est vrai , a part peut être Artisteer qui est pas mal pour d autre cms .

je part testé "easycss_0-1" en local tout de suite .

merci .
Site web    
vtt64 Membre non connecté

Booster Roquette

Rang

Avatar

Inscrit le : 16/12/2009 à 19h08

Messages: 255

Le 06/06/2016 à 21h06
:top
olivierb Membre non connecté

Modérateur

Rang

Avatar

Equipe Assistance

Inscrit le : 07/02/2014 à 21h54

Messages: 1754

Le 06/06/2016 à 21h41
Bonjour,

Merci beaucoup pour ce module PaperToss. Je cherchais quelque chose comme cela pour modifier mes couleurs. Tu me vois ravi :)

Cordialement,
Olivier.


Olivier
signboost
Site web    
PaperToss Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 25/03/2016 à 12h10

Messages: 189

Le 06/06/2016 à 21h42
"On me signale dans l'oreillette que nombre de plugins de ce genre existe".
Mauvaise info, je n'en connaissais pas, pardon.
   
olivierb Membre non connecté

Modérateur

Rang

Avatar

Equipe Assistance

Inscrit le : 07/02/2014 à 21h54

Messages: 1754

Le 06/06/2016 à 21h51
PaperToss:
"On me signale dans l'oreillette que nombre de plugins de ce genre existe".
Mauvaise info, je n'en connaissais pas, pardon.

Peut-être, mais intégré à PHPBoost ? Je n'en ai pas vu ou alors je n'ai pas les yeux en face des trous ;)

Cordialement,
Olivier.


Olivier
signboost
Site web    
PaperToss Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 25/03/2016 à 12h10

Messages: 189

Le 06/06/2016 à 22h19
Non pas dans PHPBoost mais sur d'autres CMS.

Quoi qu'il en soit, j'attends vos bugs éventuels et suggestions d'amélioration :)
   
poete Membre non connecté

Booster Bazooka

Rang

Avatar

Inscrit le : 16/04/2012 à 11h02

Messages: 138

Le 15/06/2016 à 15h12
Bonjour,

Merci beaucoup pour ce module PaperToss!

Alors une petite suggestion d'amélioration : donner la possibilité de mettre une image de fond :)

Encore merci

-------------------------------------------
Edité le Mercredi 15 Juin 2016 à 15h57

Bonjour,

Je viens d'installer le module (la dernière version qui vient de sortir aujourd'hui).
l'installation s'est bien passé par contre en allant dans l'administration, onglet 'Outils', puis 'personnalisation css' j'ai eu une page écrit "Une erreur s'est produite lors de l'opération" et mon site pointer sur www.monsite.com/EasyCss/index.php?url=/theme

ps: dans l'admin, le module ce nome "personnalisation css" et non pas "EasyCss"

Merci de votre aide. Edité par poete Le 15/06/2016 à 15h58
Site web    
Cyberily Membre non connecté

Booster Minigun

Rang

Avatar

Inscrit le : 12/11/2014 à 15h11

Messages: 41

Le 15/06/2016 à 17h22
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


Président du Club d'escalade Gravelines Grimp
Site web    
j1.seth Membre non connecté

Administrateur

Rang

Avatar

Chef de Projet Equipe Développement

Inscrit le : 01/09/2008 à 09h42

Messages: 2921

Le 16/06/2016 à 07h09
Bonjour,

C'est corrigé, une mise à jour du module est sortie.
Site web    
patgame Membre non connecté

Booster Missile

Rang

Avatar

Inscrit le : 03/09/2009 à 19h18

Messages: 1067

Le 27/07/2016 à 22h53
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
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
Annonces