EDN forum

Aides sur les thèmes PHPBoost » Petit thème deviendra grand !! Par EDN | Swan

Administrateur

rank_admin.png

Avatar

Administrateur
WebDesigner

Inscrit le: 01/08/2009

Message: 8103

Commentaires: 375

Le 04/03/2017 à 17h18
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 ^^
Il centralise :
- Le rendu des principales classes CSS
- 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


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..

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.



- Pas de support par Message Privé, merci.
- Mes badges de compétences.
Youtube    

CsN Fuzil

rank_2.png

Avatar

Groupe: Membre

Inscrit le: 10/04/2016

Message: 86

Commentaires: 5

Le 04/03/2017 à 18h48
Bonsoir Swan,

Vraiment sympa ce partage. Tu as vraiment l'esprit GNU :top

Olivier.


Site web    

Modérateur

rank_modo.png

Avatar

Modérateur(s)

Inscrit le: 17/09/2009

Message: 2236

Commentaires: 23

Le 04/03/2017 à 21h19
:ave Le gnu c'est bien, le partage c'est mieux :ave



Chez Swan Site design Web phpboost3. Membre depuis 2009 & modérateur depuis 2011.
Mail Site web    

CsN Fusée

rank_special.png

Avatar

Inscrit le: 23/02/2010

Message: 2100

Commentaires: 4

Le 11/03/2017 à 15h38
Merci du partage :D


Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie

Qui est en ligne ?
Qui est en ligne ?

Qui est en ligne ?

Au total il y a 1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
( basées sur les utilisateurs actifs des 5 dernières minutes )
Utilisateur en ligne: Aucun membre connecté

Membres connectés au cours des dernières 24 heures:

Swan, saturnin, lise, janus57, enecowsertraele, Olivier, Fingolfin,

Légende

 [ Administrateur(s) ]   [ Modérateur(s) ]   [ Helpers]   [ WebDesigner(s) ]   [ Membres ]