Pligg is a Digg-style, open source CMS. It’s full of promise, but Pligg is still in beta, with limited documentation and few available templates.
I hacked a template to create my Pligg site, Futurosity (you’re free to use the template, FuturePligg Solemnity ). In the hopes that more Pliggers will create freely available templates, here’s a quick tutorial on how to decipher Pligg template files.
I’ve written a follow-up to this post, How to Hack a Pligg Template. If you’re looking for tips for creating or modifying a Pligg template, have a look.
File Structure
Open a Pligg template directory and you’ll likely be overwhelmed by the number of files and subfolders. It can be confusing to figure out just what file does what. Fortunately, when you peek into the files, you’ll see that things are not quite as complicated as they first appear. Pligg actually creates only a handful of different pages and if you think first about pages, instead of pieces, you’ll have an easier time piecing together what all of those files actually do.
Let’s take a look at the main page in the digitalnature template (templates/digitalnature/), the default template for Pligg Beta 9, as an example.
The Main Page
When you go to a Pligg site, you’ll see a page that’s composed of several parts. The pages are opened by their php files. Look at index.php in your Pligg installation’s root directory and you’ll see, at the bottom of the file, a line that reads:
$main_smarty->display($the_template . '/pligg.tpl');
This line calls the pligg.tpl file. pligg.tpl is the main template file that creates the framework for the page, calling the necessary pieces, which are located in other .tpl files. Have a look at it and you’ll see that it:
- Loads the /libs/lang.conf file (with {config_load file=”/libs/lang.conf”}), which contains all of the settings you configure in the Modify Language area of your Admin Panel (many other .tpl files will have this as their first line).
- Has the DOCTYPE, <head> tag (you’ll see that several scripts are loaded here), and <body> tag. Note that these tags are closed at the bottom; pligg.tpl is providing the HTML to contain the page.
- The header is included with the line {include file=$tpl_header.”.tpl”} (on line 132).
- The sidebar is included with the line {include file=$tpl_right_sidebar.”.tpl”} (on line 137).
- The center of the page is included with the line {include file=$tpl_center.”.tpl”} (on line 153).
- The footer is included with the line {include file=$tpl_footer.”.tpl”} on line 163).
Note: There’s something really confusing when you look at this. The lines, {include file=$tpl_right_sidebar.”.tpl”} and {include file=$tpl_center.”.tpl”} are a real puzzle. If you look in the template folder, you won’t find any files named right_sidebar.tpl or center.tpl. That’s because {include file=$tpl_right_sidebar.”.tpl”} is a variable that is set in /libs/smartyvariables.php (which calls the file sidebar.tpl) and {include file=$tpl_center.”.tpl”} is a variable that’s called from /index.php (which calls the file index_center.tpl). Don’t blame me.
You can see, then, that the main page is composed of at least five different Pligg .tpl files: pligg.tpl, header.tpl, sidebar.tpl, index_center.tpl and footer.tpl. I say “at least five” because, actually, it consists of more than five template files; sidebar.tpl, for example, calls additional files from the digitalnature/sidebar_modules folder.
The other pages in your Pligg site work in the same way: The Admin page is created using admin_template.tpl, and the parts of the page come from .tpl files in the digitalnature/admin_templates/ subfolder (for example, the Category Management area is created from digitalnature/admin_templates/category_manager.tpl). The Submit a new story pages are created by…you guessed it: the submit pages (the three submit steps are submit_step_1.tpl, submit_step_2.tpl, and submit_step_3.tpl). And so on. When you understand the logic, it’s not hard to figure out which .tpl file does what.
File Tags
Now let’s have a closer look at a .tpl file. What is all this stuff?
HTML tags These are pretty easy to recognize. You’ll see <div> tags, link (<a href=>) tags, list (<ul>, <li>) tags, and so on.
Scripts Look at pligg.tpl, for example, and you’ll see <script type=”text/javascript”> tags. These are for Java scripts, which are in the digitalnature/js/ folder.
Code All that stuff in {curly brackets} is Pligg code. You’ll see a lot of {if} {else} tags. You probably don’t want to mess with this stuff.
Variables See the tags with the # signs? They refer to information that is stored somewhere else; they’ll be filled in when Pligg generates the page. For example, look at line 118 of pligg.tpl. The tag {#PLIGG_Visual_Name#} is set in the Modify Language area of your Admin Panel (it’s your site’s name). BTW, all of these settings are in the /libs/lang.conf file, but you’re better off making changes from within your Admin Panel.
Comments These are set off with /*, <!–, or //. They usually provide clues about what you’re looking at.
Hacking a Template
Now that you know what you’re looking at when you peak into a .tpl file, it isn’t difficult to hack the code to create your own template.
- First, add your template to /templates/templates.tpl. Add this code to the last line:
- Create a new directory for your template in the /templates/ directory.
- Copy the contents of another template into the new directory.
- Hack the HTML in the .tpl files. Change the tags or rearrange the Pligg code to create your new layout, being careful not to damage the code itself.
- Hack the CSS files to style your pages. You’ll find the css files in the /templates/[yournewtemplatename]/css/ folder.
If anyone is interested, I may write a tutorial on hacking the HTML and CSS for a template.
Tips
Seek and ye shall find. If you don’t know what something is for, you’ll need to go on a little treasure hunt. If you have an application that can search that can search all the files in a directory (if you’re on a Mac, I recommend skEdit), just search for the puzzling tag. This is how I figured out that $tpl_center.”.tpl” actually called the index_center.tpl file.
Don’t be color blind. Make it easier to distinguish different tags by turning on highlighting in your editor. I set all HTML tags to display in bright green text in skEdit so they stand out from all the other tags, making them easier to find for editing.
When things get sticky, head for the wiki. There isn’t much there as I write this (and what is there is out-of-date), but be sure to check the Pligg Wiki for more information on working with templates. And have a look at the Pligg forums, too.
Disclaimer
Please understand that I’m not a programmer. I’m just a hacker who finds my way by cutting and pasting and, when that doesn’t work, scratching my head until I figure a few things out. I don’t have any inside scoop on Pligg. So, if I’ve gotten anything wrong above or you have tips to add, kindly enlighten me in the comments.
17 Trackbacks
[…] Ellis has a very nice explanation of Pligg file structure. Really useful if you are looking to understand how Pligg works from a developer/customization […]
[…] Understanding Pligg Template Files (tags: pligg tutorial templates) […]
[…] Understanding Pligg Template Files (tags: pligg tutorial templates) […]
[…] You’ll find more information about Pligg template files in Understanding Pligg Template Files. […]
[…] For more information about Pligg templates, see Understanding Pligg Template Files. […]
[…] Understanding Pligg Template Files (tags: o templates pligg tutorial) […]
[…] You’ll find more information about Pligg template files in Understanding Pligg Template Files. […]
[…] Understanding Pligg Template Files (tags: cms pligg template howto) […]
[…] you’ve read my post on Understanding Pligg Template Files and want to take a crack at hacking a template of your own, you may find these tips helpful. This […]
Understanding Pligg Template Files…
Pligg is a Digg-style, open source CMS. It’s full of promise, but Pligg is still in beta, with limited documentation and few available templates.
I hacked a template to create my Pligg site……
[…] Understanding Pligg Template Files […]
Understanding Pligg Template Files…
ОпиÑ?ание файлов шаблонов CMS Pligg…
[…] için ÅŸimididen baÅŸlayacakları pligg arayüzleri ile ilgili tasarım çalışmaları ileride güzel […]
[…] 05:08 AM Check out Understanding Pligg Template Files. It provides a good overview of how templates work. www.mobengines.com Create your own Pligg […]
[…] mit der Template-Engine beschäftigen möchte, dem empfehle ich diesen Einsteigerartikel: Understanding Pligg Template Files. Es gibt aber gesamtheitlich bei weitem nicht so viele Templates, die man downloaden kann, wie zB […]
[…] editing the template files (tpl and css files) may be more involved, to understand more check out Understanding Pligg Template Files - which has some good information about this. www.mobengines.com Create your own Pliggs […]
[…] with a contact module which will do exactly as you described above. You may also want to check out Understanding Pligg Template Files __________________ Add your site to the Pligg Directory - Add video to your site using Xoinks […]
15 Comments
Nice template, thanks!
By the way, I tried to subscribe to this blog but your FeedBurner is not working.
Cheers
Lee
Lee, thanks for letting me know about the FeedBurner problem. Should be working now.
Glad you enjoyed the template!
My Pligg:
www.faveser.com
What do you think?
OOps. mispelled it.
www.favester.com
Excellent explanation of Pligg. I was pretty overwhelmed when i first took a look at the pligg files. I have managed to make changes the pligg.tpl and sidebar.tpl, but only enough to add some extra content. Looking forward to trying my hand at creating my own hacked template.
One thing - could you please clarify:
TemplateName
With this, is TemplateName the “code” word, and just the >TemplateNameTranquillizer
?
Kung-fu kid, sorry that wasn’t clear. I’ve edited the post to (hopefully) clarify this.
TemplateName means the name of your template. So, if the name of your template is Tranquilizer, you’d put in the name of the template folder and then the name of the template. Like this:
Tranquilizer
This is a great help. I figured installing pligg is a great way to get away from coldfusion and .net and dive into PHP. I’m sure I’ll be back here a few times!
Thanks a lot this really helped
Seeking shablom for its sayta.Vot and Apo to vam.Spasibo for an interesting site
Sorry, reza, I don’t understand your comment, though I did visit your site and see that you’re trying to get a Pligg template working. If you’re looking for help, try using Google Translator.
In which .tpl file do I find the CSS color defintions that give the template its overall colors? I want to change the default colors to something else, such as dark smoke grey. Also, is there a setting anywhere to set the page (table?) width to something static and non-resizing, rather than scaling to fill all the horizonal space (so that it would be in harmony with my main site, that does not change horizontal widths)?
Color definitions are not in a .tpl file, they’re in the main.css file (or other CSS files) in the template’s /css folder. You would also have to edit the CSS file to give the template a fixed width.
Just wanted to say thank you for taking the time to write this article. It was very helpful in understanding how Pligg template files work.
Hey Robert, would you recommend building out your template first into an html page then break it apart into the respective pligg files?
@Joey: Yes, I usually create the web page first, then work it into the Pligg code.