Support Forum

This tutorial instend to give you the bases in order to customize a pnForum template. Indeed, by watching the default template, you could think that it could be hard to make a specific version for your template and Graphic charter, but in fact you can easily adapt the pnForum template to your portal style.

General color
The color of the template can be customize in the style CSS file of pnForum, all the color are centralized in this classes

Code

/* 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; } 

In pratice, you can change most of the color by editing ".pnf_bordercolor2" and ".pnf_bgcolor3".
Frames border
If you want to change the "weight" of the border of all fieldsets and div, in your template, it's a little more complex, indeed all the border properties are dispatched in several classes. BUT all the "border" properties are defining the same way, so you just have to do a "find and replace" with a software like "notepad++".
Find "border-width: 2px;", and replace it with you value (for instance border-width: 1px
Separators border
If you want to customize the separators (the weight of the line between the different posts), you can just do a search of "border-bottom-width: 2px;" and replace it with "border-bottom-width: 1px;"
Customize menu
pnForum is given with a lot of options in different menus, perhaps you want to customize them (or take them off).
General menu
The first menu is localized in the file "modules/pnForum/pntemplates/pnforum_user_header.html"

You just have to delete the "li" tags you don't want.
specific menu
For some pages, the one where you see the list of topics and the other where you see the messages, there is a dedicated menu. If you want to customize this menu, just go :

• in the first case (list of topics),
  
  Code

  line 39 "<ul id="pnf_javascriptareaforum" class="hidden optionrow pnf_bgcolor3 pnf_bordercolor2">"
  line 61 "<ul id="pnf_nonjavascriptareaforum" class="optionrow pnf_bgcolor3 pnf_bordercolor2">"  
  //the second option (line 61) is for people who doesn't have a javascript enabled browser 

  
  
• in the second case (list of messages),
  
  Code

  line 9, "<div id="pnf_javascriptareatopic" class="hidden optionrow pnf_bgcolor3 pnf_bordercolor2">"
  line 49,"<div id="pnf_nonjavascriptareatopic" class="optionrow pnf_bgcolor3 pnf_bordercolor2">"
  //the second option (line 49) is for people who doesn't have a javascript enabled browser 

  
  

Display all categories
If you want to display all the categorie by default, just take off the "hidden" tag from the "pnforum_user_main" template
General customization
In pnForum, there is three main files

• pnforum_user_viewtopic.html
  
• pnforum_user_viewforum.html
  
• pnforum_user_main.html

So if you wan't to port an existing phpBB templates to pnForum, you "just" have to customize this files.
french version



edited by: mumuri, Mar 30, 2008 - 11:29 AM
-----
Top Flood - a discussions board based on pnForum

Nice overview.

a little upgrade (concerning a post of MagicVince on pnfrance), if you want to have less work to do , in case of upgrade of your CMS, you should copy the HTML templates and CSS files to your theme folder,

see documentation



edited by: mumuri, Mar 29, 2008 - 08:52 AM

-----
Top Flood - a discussions board based on pnForum