Pnforum : personnaliser son template
Auteur Sujet

Post 
En voyant la nouvelle version de pnforum (actuellement déployé sur la community) , j'avais peur qu'elle soit difficilement intégrable dans une CMS, en effet, un thème bleu clair ne ne s'inclue pas forcément dans n'importe quel site web.

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.


pnforum-custom.PNG


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"

  1. .pnf_bgcolor1 { background-color: #FFFFFF; } 
  2. .pnf_bgcolor2 { background-color: #AFBFC8; } 
  3. .pnf_bgcolor3 { background-color: #FFFFFF; } 
  4. .pnf_bgcolor4 { background-color: #EDF3F7; } 
  5. .pnf_bgcolor5 { background-color: #EDF3F7; } 
  6. .pnf_bordercolor1 { border-color: #FFFFFF; } 
  7. .pnf_bordercolor2 { border-color: #CCCCCC; } 
  8. .pnf_bordercolor3 { border-color: #999999; } 
  9. .pnf_bordercolor4 { border-color: #EDF3F7; } 
  10. .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"
pnforum-menu.PNG

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
Données personnelles Accueil

Post 
Merci pour ces informations mumuri. icon_smile

-------------------------------------------
...n'oubliez pas que l'outil Recherche est votre ami !
...bien souvent il répond à nos questions avant même que l'on ne se les pose ! ^^
Données personnelles Accueil

Post 
est-ce que pour un thème Xanthia, il n'y aurait pas intérêt à faire ces modifs dans les répertoires template et style du thème?
Données personnelles Accueil
Post 
exact, çà sera plus maintenable en cas d'upgrade du CMS ( il suffira juste de mettre à jours le template)[/color]

de toute manière çà ne remet pas en question le tutorial, puisque çà à revient à copier les fichiers html/css existant dans pnforum, dans le répertoire du thème et à modifier le master.ini correspondant.


http://community.postnuke.com/Wiki-TemplateOverridng.htm







modifié par : mumuri, 29 Mar 2008 - 16:33
Données personnelles Accueil