Last week, I spent some time customizing a Pligg installation. After reading many pages of code to familiarize myself with the process, I decided to share my findings in hopes that it will be helpful to some others who also need to customize the look of a Pligg site. This was my first time installing and customizing Pligg, so these instructions are not necessarily the best practice. Please feel free to add comments with your own suggestions and experiences.
Pligg Templates
With Pligg Beta 8.0, two templates come with the installation: millio-beat and paul01. If you look at the directory: {$my_pligg_base}/templates/ you will see these two templates. All related files are under their own directory.
You are able to flip between these two templates by manually editing, then uploading {$my_pligg_base}/config2.php or by using the admin panel. To use the admin panel, first you need to login (you can use the default “god” account), choose “configure your site”, then choose “template”. Click on the template name to edit it. The revised name takes effect immediately.
Add Your Own Design
I suggest starting out by making a copy of one of the existing templates. Keep the copy under “{$my_pligg_base}/templates/” directory, and rename it. By making this extra copy, you will be able to refer back to the original, in case of errors.
The file you will want to look at first is the “master” template file: “pligg.tpl”, under your template directory “{$my_pligg_base}/templates/{$the_template}/”. A few things to note with this file:
- {config_load file=”../libs/lang.conf”}
- lang.conf is the language file. If you want to customize any labels, then this file is the place to look. Again, you can revise this file directly then upload. A better way is to config the entries using the provided admin panel.
- Stylesheet: {$my_pligg_base}/templates/{$the_template}/css/main.css
- if you need to change the link color, etc. this is the file to modify
- a few other .tpl files are included in the pligg.tpl. By default:
- $tpl_header.”.tpl” is “header.tpl”
- $tpl_left_sidebar.”.tpl” is “user_panel.tpl”
- $tpl_right_sidebar.”.tpl” is “sidebar.tpl”
- $tpl_footer.”.tpl” is “footer.tpl”
These are defined in {$my_pligg_base}/lib/smartyvariables.php. I suggest using these default values if you can. This way you don’t need to touch the php pages outside your template directory.
The value can be overwritten in individual pages. Opening up, for example, {$my_pligg_base}/shakeit.php, you will see a line:
$main_smarty->assign(‘tpl_center’, $the_template . ‘/shakeit_center’);
You will find that every page has this ‘tpl_center’ defined to correspond to a .tpl file under the template. But others are left out to use the default values. You can define a new value to overwrite the old value.
My Approach
The approach I took was to start from the HTML/CSS styled based on the design (thanks to my friend Russell), then seperate the HTML code into header, sidebar, page center or footer, and put each section into a corresponding .tpl file:
- header.tpl for header
- user_panel.tpl for the leftside nav
- foot.tpl for footer
Then I modified {$my_pligg_base}/templates/{$the_template}/pligg.tpl to:
- Include my stylesheet. I put it before the main.css. (I did check the main.css and comment out the possible conflicts). You can just modify main.css if you like.
- Include new .js files
- Replace the main page content (between <body> tags) with my own version
- Separate header, footer and other common stuff into their own .tpl files and include them into pligg.tpl. using {include file=$tpl_header.”.tpl”}
Then I made sure:
- All images are copied to {$my_pligg_base}/templates/{$the_template}/images
- New style sheet(s) are copied to {$my_pligg_base}/templates/{$the_template}/css
- New javascript files are copied to {$my_pligg_base}/templates/{$the_template}/js
That’s it
Upload the new template to server, then flip to the new template using the admin panel. Poof…a brand new pligg!
Thanks, this is easier than i thought. 🙂
great, thanks for the approaches
Appreciate this post. Let mee try it out.