If 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 is my workflow for porting a template to Pligg.
Getting Started
Gather the right tools. Hacking a template is a bit tricky. You’ll need to peek into the .tpl files and get up to your elbows in HTML and CSS. You proably already have your prefered tools. I use a handful of apps to do my dirty work and, if you’re a Mac user, I highly recommend the following:
- Xyle scope (great for seeing how a page is really put together)
- CSSEdit (my preferred CSS editor, also good for x-raying a site)
- skEdit (for editing code)
Also, read this: Panic Coda 1.0 First Impressions
You might also have a look at Aptana, a free, open source editor which is available for Mac, Windows, and Linux. If you have other recommendations, especially for Windows, please post a comment.
Cut and paste. Whether you’re porting a template to Pligg or creating a completely new design, don’t start from scratch. You’ll find it much easier to begin with an existing template. You can start with one of the templates included with the Pligg distribution, but I’ve created a stripped-down template just for this purpose, Upstart Blogger Tutor Lite.
- Make a copy of the template, rename it, and upload it to your /pligg/templates/ directory.
- Rename the main.css file and create a new main.css. Unless you’re just tweaking the existing template, you’ll find it easier to start with a blank slate and to cut and paste from the old file to the new as needed.
- Select the new template in your Admin > Configure Pligg > Template.
Start with the layout. A tool like Xyle scope, CSSEdit, or WebDevAdditions (a SIMBL plugin for Safari; see picture below; click to enlarge) can help you see at a glance how a template is put together. If you’re porting a pligg template, you can just edit the tags, but if you’re porting a design template, strip out everything but the structure of the layout. If you’re starting from scratch, create your new layout first. A simple layout might include a header, main column for entries, a sidebar, and a footer. Create the CSS for the structure of the page, which builds the framework for your site.
Seek and ye shall find. Don’t forget this tip from Understanding Pligg Template Files (if you haven’t already read this post, read it now; what follows will make more sense). If you aren’t sure what a CSS tag is for or what some PHP code does, do a search for it in all of the files in your Pligg distribution. You should be able to figure out what’s going on by following the breadcrumbs from one file to another.
Dig into pligg.tpl
As you know, having read my post on Understanding Pligg Template Files, pligg.tpl is the file that creates the main structure of your Pligg page. Open your CSS file (and the Pligg template’s old CSS file) and pligg.tpl, arrange them side by side, and get to work:
- Edit the <head> tag. Add your meta tags. You’ll want to be careful not to delete the wrong thing here, but depending on what template you’re starting with, you may be able to get rid of unused Java scripts (e.g., if you know you don’t want to use the spell checker, you can delete the code here). If you’re using FeedBurner for your feeds, you’ll need to edit your RSS link.
- Edit the <div> tags. Edit the existing tags in pligg.tpl or, if that’s too confusing, strip them out and add your own structural <div> tags. But before you do, make sure you understand the structure of the page.
Notice that pligg.tpl has several includes:
{include file=$tpl_header.”.tpl”} (The header)
{include file=$tpl_right_sidebar.”.tpl”} (The sidebar)
{include file=$tpl_center.”.tpl”} (The center of the page, filled in with index.tpl, link_summary.tpl, etc., depending on the page)
{include file=$tpl_footer.”.tpl”} (the footer)
Note: Keep the lines above and below the center include together, like this:
{checkActionsTpl location="tpl_pligg_above_center"}
{include file=$tpl_center.".tpl"}
{checkActionsTpl location="tpl_pligg_below_center"}
When you’ve edited the <div> tags in pligg.tpl, reload your Pligg site and take a look at your page. If things don’t look right, now’s the time to fix them. This basic structure will be applied to just about all of your Pligg pages.
Finish the Framework
Edit header.tpl. I’m not going to walk through all of the code in the template files (I plan to annotate Upstart Blogger Tutor Lite, so look there for more explanations), but let’s take a look at header.tpl as an example of what you’ll encounter.
If you look at the top of this file, you’ll see this line:
{config_load file="/libs/lang.conf"}
This line loads the variables from the Admin > Modify Language section of your Pligg site (you can also edit the lang.conf file directly). You’ll find this line at the top of most Pligg .tpl files. Don’t mess with it.
You’ll also see some tags in braces, like this:
{#PLIGG_Visual_Home#}
If you look in the Admin > Modify Language section you’ll see that this is the first variable under Section: HEADER. It’s the name of your Pligg site (and it’s a good idea to change it before you forget, unless you want to call your site Pligg Beta 9). You’ll almost always want to use these tags, keeping them intact, but you can delete them or use other tags from the Modify Language section, as needed. Just note that they have to be enclosed in {# #}.
You’ll also see some code that looks like this:
{checkActionsTpl location="tpl_header_just_after_profile"}
Don’t mess with these checkActionsTpl tags (you’ll see them in other files, too). These call other PHP files. In this case, the code calls messaging_init.php. (How did I know that? See Seek and Ye Shall Find, above.)
Notice the {if} and {if}{else} statements. You’ll probably want to keep these intact. For example:
{if $user_authenticated eq true}
means just what it sounds like. If it’s true that the user is authenticated (i.e., logged in), show the Profile link in the menu.
Finally, notice that some of the links have tags that look like this:
The code will dynamically fill in the link with your Pligg installation’s base URL. Again, probably a good idea to leave these things intact, but know that you can replace them with static URLs.
Edit index_center.tpl. Lots of {if}{else} statements here defining different conditions depending on what information is being displayed (search, upcoming, etc.). Notice at the bottom of the page that there’s an include for link_summary.php, the code that displays the stories.
Edit link_summary.tpl. Lots of {if}{else} statements in this file. Edit with care.
Edit sidebar.tpl. This template contains several includes, grabbing content from the sidebar_modules/ folder of your template. I can’t prove it, but you might be able to give your site a performance bump by integrating the code from those modules you want use directly into the sidebar.tpl file.
Edit footer.tpl. If you’re editing a template, be sure to edit the copyright info in the footer and add the tracking code for any stats services you use, like Google Analytics. And be a good sport and leave a link to the designer.
Keep Going
Having edited the above .tpl files, you’ve created the framework for your new design. Now you can go through and systematically edit the other files.
hello robert, where is wrapper .tpl declared in the sidebar.tpl?
Devendra, I’m not sure I understand what you’re asking. The wrapper.tpl files are called from sidebar.tpl and live in the /sidebar_modules sub-folder.
Hi,
I noticed there is a bit of chaos in the sidebar code, sometimes the wrapper calls another well done tpl like categories, some other time it calls a php file on the root, that has conditional blocks with HARDCODED template names, like yget, i donno, is this expected? so do i have to write a new block of code in the original php to account for my new template?
thanx for the efforts
Hi, Mariam. Yes, the sidebar code in Pligg is a mess. I’m not exactly sure what you’re asking, though. You can add your template name and path to /templates/templates.tpl, which should add it to the list in your Admin, but I don’t think you should have to change any other files outside of the template directory (but I haven’t played with Pligg for a while, so my memory is a little fuzzy). But don’t be surprised by anything in Pligg. It’s not like WordPress. It should be very easy to work with templates after v1.0, however.
BTW, took a look at your site. I love it. Beautiful design! Love the multicolumn newspaper layout!
well thank you Bob :) im still working on the layout though
seems to me like the version i got is old or something! its Pligg Beta 9.6 :s is there any newer version? What i am referring to is actually code in sidebar_stories.php that referred to “yget” template name, hard-coded, when i changed the template it messed up the side bar because of this… well maybe i should wait for the 1.0 version :) [I love wordpress!]
Mariam, I believe Beta 9.6 is the latest version.
Yes, you’re right. There is some hard code in sidebar_stories.php. I don’t know what you’re trying to do, so you’ll just have to play with it, but you can probably just copy and edit this code, name it whatever you want to call your template, and make some adjustments:
elseif ($the_template == "yget [change this to your template name]") {echo "
$ss->template = $the_template . ‘/sidebar_stories.tpl’;
$ss->show();
echo “
“;
}
Oh, and waiting for v1.0 is sensible, if you’re not in a hurry. Things look to be changing radically and porting and creating templates should be much easier.