J'ai donc été agréablement surpris en voyant que le template pouvait facilement se personnaliser, je ne ferais pas un tuto détaillé de toutes les classes CSS de pnforum, çà n'apporterai rien , mon but est juste de donner des pistes à ceux qui souhaitent l'utiliser dans leur portail.
couleurs générales
Les couleurs du templates peuvent être facilement personnalisées, elles sont stockées dans le fichier "modules\pnForum\pnstyle\style.css"
- .pnf_bgcolor1 { background-color: #FFFFFF; }
- .pnf_bgcolor2 { background-color: #AFBFC8; }
- .pnf_bgcolor3 { background-color: #FFFFFF; }
- .pnf_bgcolor4 { background-color: #EDF3F7; }
- .pnf_bgcolor5 { background-color: #EDF3F7; }
- .pnf_bordercolor1 { border-color: #FFFFFF; }
- .pnf_bordercolor2 { border-color: #CCCCCC; }
- .pnf_bordercolor3 { border-color: #999999; }
- .pnf_bordercolor4 { border-color: #EDF3F7; }
- .pnf_bordercolor5 { border-color: #EDF3F7; }
dans la pratique, on s'aperçoit que les couleurs importantes sont ".pnf_bordercolor2" et ".pnf_bgcolor3", la personnalisation de ces deux classes suffit à changer le thème de couleurs au complet.
Bordure des cadres
Donc là c'est un peu plus complexe, car les classes CSS définissant les bordures sont réparties un peu partout dans le css, mais par chance, ces bordures sont toutes définies de la même manière, il suffit donc de faire un "remplacer " avec un logiciel type "notepad++".
Pour cela, rechercher "border-width: 2px;" et remplacer là par la valeur voulue (border-width: 1px; par exemple), tous les fieldsets et cadres auront alors des bordures de tailles personnalisées
[size=large]Bordure des séparateurs[/size]
Vous l'aurez remarqué les bordures qui définissent les séparateurs de messages dans les pages qui listent les posts ne sont pas les mêmes, en effet, pour personnaliser cette bordure, il vous suffit de recherche "border-bottom-width: 2px;" et le remplacer par la valeur voulue ("border-bottom-width: 1px;")
Personnaliser le menu
Menu général
Vous trouvez qu'il y a trop d'icônes dans le menu (voir que le menu est de trop), vous pouvez facilement le personnaliser
Pour le premier menu en haut, vous pouvez le personnaliser en modifiant le fichier "modules/pnForum/pntemplates/pnforum_user_header.html"
Supprimer les balise "li" en trop, et tester au fur et à mesure.
Menu spécifique
Pour les autres menu, spécifique au différentes pages du forum (affichages des la listes des sujets et affichage d'un sujet), vous pouvez les modifier respectivement dans "modules/pnForum/pntemplates/pnforum_user_viewforum.html" et "modules/pnForum/pntemplates/pnforum_user_viewtopic.html"
Détails dans "pnforum_user_viewforum.html"
Aller à la ligne 39 , "<ul id="pnf_javascriptareaforum" class="hidden optionrow pnf_bgcolor3 pnf_bordercolor2">"
Aller à la ligne 61,"<ul id="pnf_nonjavascriptareaforum" class="optionrow pnf_bgcolor3 pnf_bordercolor2">" (rendu non Javascript pour ceux qui l'ont pas activé dans leur navigateur)
Détails dans "pnforum_user_viewtopic.html"
Aller à la ligne 9, "<div id="pnf_javascriptareatopic" class="hidden optionrow pnf_bgcolor3 pnf_bordercolor2">"
Aller à la ligne 49,"<div id="pnf_nonjavascriptareatopic" class="optionrow pnf_bgcolor3 pnf_bordercolor2">"(rendu non Javascript pour ceux qui l'ont pas activé dans leur navigateur)
Personnalisation générale
Notez que dans pnforum, les trois fichiers les plus importants sont ceux ci:
- pnforum_user_viewtopic.html
- pnforum_user_viewforum.html
- pnforum_user_main.html
Autrement dit, personnaliser un template pour pnforum revient à modifier ces trois fichier "html", sous entendu, vous pouvez donc moyennant quelques connaissances en design html/css adapter un théme phpBB ou autre existant à votre module postnuke.
modifié par : mumuri, 27 Mar 2008 - 00:34




