In today’s post I will be teaching you the basics for designing a Pligg template. I’ve designed about a dozen Pligg templates so far, and through those experiences I have compiled some quick tips for beginners wanting to create their first Pligg template. Before I dive into the details let me first mention that there is some existing documentation about Template Structure and Template files, which can be read on the Pligg Wiki. This article is a primer for Pligg template designers, and is by no means a good reference for advanced template techniques.
Javascript, CSS and PHP in .tpl Files
Pligg uses a variation of the Smarty template engine, called Template Lite. Smarty code requires special markup when you want to use Javascript, CSS or PHP code in your .tpl files. For Javascript and CSS you will need to begin the code with a {literal} tag and end it with {/literal} tags. For PHP code, you will need to replace the < ?php opening tags with {php} and the ?> closing tag with {/php}. Examples are provided below to demonstrate each of these languages being used in a Pligg .tpl file.
Javascript Example
{literal}
<script type="text/javascript">
document.write("Hello World!");
</script>
{/literal}
A large number of new threads being created on the forums are by users who attempt to add javascript to their templates without knowing that they should use {literal} tags. If you have added javascript to a .tpl file and you see an error beginning with “Parse error: syntax error, unexpected ‘{‘ ” you more than likely forgot to wrap the javascript with {literal} tags.
CSS Example
{literal}
<style type="text/css">
.example {font-weight:bold;}
</style>
{/literal}
Beginners often overlook CSS files as a good first step for changing the style of your site. Many design projects could probably be completed by only editing the stylesheet file(s). I highly suggest that users start out modifying a Pligg template by tweaking the stylesheet file.
PHP Example
{php}
echo 'Hello World!";
{/php}
You can see more examples of using PHP in .tpl files in the Wiki article “PHP in Template Files“. I will occasionally write entire features into Pligg template files by using {php} tags, which should only be done for very simple {php} code, or when you don’t have time to create a module.
The Top 5 Template Files
Most people who begin a Pligg template without any previous experience will probably feel a little intimidated by the number of .tpl files that Pligg uses. There are roughly 40 files to work with in the stock Pligg template(s). These files control every small detail that a designer might want to take advantage of, but don’t feel like you need to edit all of the files to achieve a unique looking template. You could probably customize just 5 template files and in no time at all your site will look radically different.
1. Pligg.tpl
This template is the main “wrapper” for all other templates. It controls the main layout for the site and includes most of the data located in the
of the document. After you’ve finished changing your CSS the pligg.tpl file is the first template file that you should open up and explore.
2. Header.tpl
This template is usually used for navigation for the upcoming, published and submit pages. It is also used commonly to wrap the category, breadcrumb and search box.
3. Sidebar.tpl (and sidebar2.tpl)
As you can guess by the name, these two files are typically used for the sidebar content. It is divided up into two files should you want to have 2 sidebars or use the second sidebar in a more creative position like just before your footer. The sidebar will contain “sidebar widgets” which is what we call things like the “Top Today” or “Latest Comments” modules.
4. Footer.tpl
As you may have guessed by the name, footer.tpl controls the footer content on your website. This is normally used for credits, contact information and site links.
5. Link_summary.tpl
Last, but certainly not least is probably the most misunderstood template file for Pligg. Link_summary.tpl is responsible for styling the story data used by Pligg wherever the story appears. This includes the story data used on the story page, profile page, group page, upcoming page, or third submission step page. It holds the vote number and links, admin tools, story title, story description and a lot of other items. This is probably the most complicated template file to understand because there are so many features in it, but if you take ten minutes to carefully read the code you probably won’t struggle to pick up on how the template is laid out. Because this file deserves it’s own article I will not dive into every detail for this file, but I will emphasize the important features.
Read the rest of this entry »
Loading ...
We will be using the poll results as part of the criteria in selecting the winners of the template design contest. Seven of the sixteen templates are not eligible for winning this contest because the authors are Pligg developers who will be judging the entries. Voting will remain open until Sunday, November 1. Make sure that you cast your vote before Halloween is over.
If you are an author of one of these templates you will receive an email shortly with a $20 Pligg Pro gift certificate as an entry prize. 
