Aides sur les thèmes PHPBoost Petit thème deviendra grand !! Par EDN | Swan
Bonjour,
Pourquoi "Petit thème deviendra grand !!" ? j'avais envie de vous donner ma méthodologie.. Je ne vois pas beaucoup de personne qui partage ses connaissances ou son travail (thèmes ou modules) et je trouve cela dommage .. et je voulais partager ceci avec vous. En espérant que cela en incitera plus d'un pour tenter l'aventure .. Personne n'est nul , ni incapable ! On a tous débuté un jour ^^
===============
- MISE EN PLACE :
===============
Pour commencer, j'ai envie de dire que changer des images est à la portée de tous, si vous savez ou se trouve le dossier "images du thème. Et avoir aussi un brin de jugeote
Par contre pour changer des couleurs ou insérer du code , il vous faudra tout de même quelques notions, voir bien plus.
Mais comme j'aime à le dire c'est en pratiquant que l'on s'améliore ^^
A savoir : on ne travaille jamais sur un site qui est en ligne. On installe un serveur local ( Wamp, easyphp(windows), Lamp ou Xamp(Linux), Mamp ou Xamp (Mac) ). Vous trouverez des informations sur les sites officiels.
Ensuite si vous n'avez vraiment pas le choix , par manque de temps ou connaissances le plus prudent étant de faire avant toutes choses une sauvegarde complète du site et de votre base de données.
Dans les grandes lignes :.
1/ Partir toujours du thème "Base", cela vous évitera d'avoir de mauvaises surprises.
2/ Installer le module "Bac à Sable" de la dites version sur laquelle vous travaillez. On a beau dire, mais quand on peut se simplifier la tache , autant en profiter ^^
3/ Avoir un éditeur de texte comme notepad ++ (ou autres) , pour éditer tout les css en simultané.
- Avoir tous les fichiers css du thème ouvert permet de ne pas se disperser et perdre du temps.
4/ Ensuite savoir utiliser les outils de développements intégrés dans les navigateurs (touche de fonction F12 en générale..).
Note : J'utilise firefox. Et avec un simple clic droit : Examiner l'élément, en cliquant ensuite sur l'inspecteur pour trouver la zone à modifiée devient bien plus simple, pour savoir quoi modifier et surtout ou ..
5/ Si vous devez faire des modifications sur des fichiers templates ou css sachez qu'on ne travaille jamais sur les fichier templates des modules des dossiers racine. On les importe dans son thème dans un dossier qui sera nommé "modules.
Exemple d'un dossier thème : "http://localhost/MON-PBT/templates/MON-THEME/modules/forum" et dans celui ci vous y placerez les copies ""*"tpl et "*".css du dit modules. On travaille toujours sur le thème , jamais en extérieur.
6/ Une fois que vous avez tout cela vous êtes prêt pour modifier votre thème.
Commencez toujours par savoir sur quel genre de thème vous allez travailler. Ensuite je sélectionne/ modifie ou crée les images, Choisissez ensuite trois couleurs (2 couleurs sur 3 seront dans les mêmes tons)
Et vous aurez déjà un bon début pour créer votre propre design.
- Prendre le thème base sur son bureau, renommer le dossier.
- Ouvrir le "config.ini" et placez vos informations, enregistrez et fermez.
- Dans le dossier "lang" modifier dans les deux dossiers "french" et "english" les 2 "desc.ini" avec vos informations, enregistrez et fermez.
- Replacez le thème renommé dans le dossier "templates".
Dans l'ordre on commence par le plus simple:
cela sera répercuter sur tous les modules.
Ensuite on affine ! En passant par le module le module "Bac à Sable" (Sandbox), pour si rendre : "http://localhost/MON-PBT/sandbox/" ,
En passant par là avec les outils de développements vous allez effectuer déjà + de 70% des modifications du thème.
Mais ou sont les 30% restants ?
Ils sont là ..
rendez vous dans le module "Galerie" et survolez le menu d'action de celui-ci, et entrez dans les sous menus Vous verrez qu'il vous faudra aussi modifier les couleurs de fond que vous trouverez dans le "cssmenu.css" sur ces 2 lignes 651 & 652:
Ensuite entrez dans le module "Forum" : et surtout n'hésitez pas à regarder partout dans le forum, pour tout fignoler dans le forum.css.
Créez un article "Qu'est ce qu'un wiki? " avec ceci dedans :
Cela vous fera visualiser la table des matières et les titres qui y sont liés, pour pouvoir modifier les css.
Petite note: Sur la V5.0.XX, vous l'avez aussi dans le bac à sable, le seul problème c'est que le css lié du wiki au Sandbox est celui de la racine et pas celui du thème. Donc si vous passez par le Sandbox, les modifications ne s'appliqueront pas. mieux vaut donc passer directement par le lien wiki du menus pré-installé et voir sur place ^^
Pour finir, refaite un dernier tour dans tous les modules pour voir si vous n'avez rien oublié.
Et voilà ! Si vous avez des doutes ou des questions, n'hésitez pas à les poser.
Swan.
Pourquoi "Petit thème deviendra grand !!" ? j'avais envie de vous donner ma méthodologie.. Je ne vois pas beaucoup de personne qui partage ses connaissances ou son travail (thèmes ou modules) et je trouve cela dommage .. et je voulais partager ceci avec vous. En espérant que cela en incitera plus d'un pour tenter l'aventure .. Personne n'est nul , ni incapable ! On a tous débuté un jour ^^
===============
- MISE EN PLACE :
===============
Pour commencer, j'ai envie de dire que changer des images est à la portée de tous, si vous savez ou se trouve le dossier "images du thème. Et avoir aussi un brin de jugeote
Par contre pour changer des couleurs ou insérer du code , il vous faudra tout de même quelques notions, voir bien plus.
Mais comme j'aime à le dire c'est en pratiquant que l'on s'améliore ^^
A savoir : on ne travaille jamais sur un site qui est en ligne. On installe un serveur local ( Wamp, easyphp(windows), Lamp ou Xamp(Linux), Mamp ou Xamp (Mac) ). Vous trouverez des informations sur les sites officiels.
Ensuite si vous n'avez vraiment pas le choix , par manque de temps ou connaissances le plus prudent étant de faire avant toutes choses une sauvegarde complète du site et de votre base de données.
Dans les grandes lignes :.
1/ Partir toujours du thème "Base", cela vous évitera d'avoir de mauvaises surprises.
2/ Installer le module "Bac à Sable" de la dites version sur laquelle vous travaillez. On a beau dire, mais quand on peut se simplifier la tache , autant en profiter ^^
Il centralise :
- Le rendu des principales classes CSS
- Le rendu des menus cssmenu
- Le rendu des menus cssmenu
3/ Avoir un éditeur de texte comme notepad ++ (ou autres) , pour éditer tout les css en simultané.
- Avoir tous les fichiers css du thème ouvert permet de ne pas se disperser et perdre du temps.
4/ Ensuite savoir utiliser les outils de développements intégrés dans les navigateurs (touche de fonction F12 en générale..).
- Firefox : Documentation (depuis la version 51.1.0, le plugin firebug est fusionné d'office si vous l'aviez d'installé)
- Google Chrome : Documentation
- InternetExporer : Documentation
- Google Chrome : Documentation
- InternetExporer : Documentation
Note : J'utilise firefox. Et avec un simple clic droit : Examiner l'élément, en cliquant ensuite sur l'inspecteur pour trouver la zone à modifiée devient bien plus simple, pour savoir quoi modifier et surtout ou ..
5/ Si vous devez faire des modifications sur des fichiers templates ou css sachez qu'on ne travaille jamais sur les fichier templates des modules des dossiers racine. On les importe dans son thème dans un dossier qui sera nommé "modules.
Exemple d'un dossier thème : "http://localhost/MON-PBT/templates/MON-THEME/modules/forum" et dans celui ci vous y placerez les copies ""*"tpl et "*".css du dit modules. On travaille toujours sur le thème , jamais en extérieur.
6/ Une fois que vous avez tout cela vous êtes prêt pour modifier votre thème.
C'est parti ...
L'idée d'un thème :
Commencez toujours par savoir sur quel genre de thème vous allez travailler. Ensuite je sélectionne/ modifie ou crée les images, Choisissez ensuite trois couleurs (2 couleurs sur 3 seront dans les mêmes tons)
Et vous aurez déjà un bon début pour créer votre propre design.
Titré son thème :
- Prendre le thème base sur son bureau, renommer le dossier.
- Ouvrir le "config.ini" et placez vos informations, enregistrez et fermez.
- Dans le dossier "lang" modifier dans les deux dossiers "french" et "english" les 2 "desc.ini" avec vos informations, enregistrez et fermez.
- Replacez le thème renommé dans le dossier "templates".
Modifié son thème :
Dans l'ordre on commence par le plus simple:
- On change les images : le fond/background, avatar par défaut etc..
- La couleurs des liens, la taille de la police etc..
- La couleurs des liens, la taille de la police etc..
cela sera répercuter sur tous les modules.
Ensuite on affine ! En passant par le module le module "Bac à Sable" (Sandbox), pour si rendre : "http://localhost/MON-PBT/sandbox/" ,
En passant par là avec les outils de développements vous allez effectuer déjà + de 70% des modifications du thème.
Mais ou sont les 30% restants ?
Ils sont là ..
Module Galerie
rendez vous dans le module "Galerie" et survolez le menu d'action de celui-ci, et entrez dans les sous menus Vous verrez qu'il vous faudra aussi modifier les couleurs de fond que vous trouverez dans le "cssmenu.css" sur ces 2 lignes 651 & 652:
Code CSS :
#cssmenu-galleryfilter ul ul li .cssmenu-title { background-color: #FFFFFF; } #cssmenu-galleryfilter ul ul li:hover .cssmenu-title { background-color: #DDDDDD; }
Module Forum :
Ensuite entrez dans le module "Forum" : et surtout n'hésitez pas à regarder partout dans le forum, pour tout fignoler dans le forum.css.
Module Wiki
Créez un article "Qu'est ce qu'un wiki? " avec ceci dedans :
Code TEXT :
-- xcvwxcvwxcvw -- --- xcvxcvwxcvwxcvwxc --- ---- xcvwxcvwxcvw ---- ----- xwcvwxcvwxcvwxcvwxc ----- ------ xcvwxcvwxcvwxcwv ------ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at finibus felis, in cursus justo. Mauris nulla augue, dapibus sit amet metus sed, blandit elementum tellus. Sed justo elit, ultrices molestie est quis, finibus mollis metus. Vestibulum ultricies malesuada tortor non volutpat. Donec eget lacus in dui consequat convallis ut eget mi. Praesent ac est consequat, vehicula neque in, fermentum enim. Sed tincidunt nibh vel molestie suscipit. Pellentesque vitae sapien et purus commodo aliquet et non tellus. Mauris quis nulla in mauris lobortis posuere.
Cela vous fera visualiser la table des matières et les titres qui y sont liés, pour pouvoir modifier les css.
Petite note: Sur la V5.0.XX, vous l'avez aussi dans le bac à sable, le seul problème c'est que le css lié du wiki au Sandbox est celui de la racine et pas celui du thème. Donc si vous passez par le Sandbox, les modifications ne s'appliqueront pas. mieux vaut donc passer directement par le lien wiki du menus pré-installé et voir sur place ^^
Pour finir, refaite un dernier tour dans tous les modules pour voir si vous n'avez rien oublié.
Et voilà ! Si vous avez des doutes ou des questions, n'hésitez pas à les poser.
Swan.
Le gnu c'est bien, le partage c'est mieux 
Bonjour à tous,
Allez je fais une remontée de sujet, vieux de 2 ans, mais toujours utile
Juste pour vous rappeler comment faire ...
- Pour le "Bac à sable" de la 5.2 voir ici.
- Pour avoir Notepad ++ : voir le site.
- Pour créer / traiter/ modifier les images online, je vous propose 2 sites, ils sont équivalent à Photoshop, bien entendu il en existe bien d'autre, mais ils restent mes 2 favoris :
- Photopea : tout en français pour ceux qui veulent tenter un bon éditeur.
- Et mon incontournable PixelR
Sur ce .. Bonne journée !
Swan.
Bonne journée,
Swan.
Allez je fais une remontée de sujet, vieux de 2 ans, mais toujours utile
Juste pour vous rappeler comment faire ...
- Pour le "Bac à sable" de la 5.2 voir ici.
- Pour avoir Notepad ++ : voir le site.
- Pour créer / traiter/ modifier les images online, je vous propose 2 sites, ils sont équivalent à Photoshop, bien entendu il en existe bien d'autre, mais ils restent mes 2 favoris :
- Photopea : tout en français pour ceux qui veulent tenter un bon éditeur.
- Et mon incontournable PixelR
Sur ce .. Bonne journée !
Swan.
Bonne journée,
Swan.
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie