My Tools and Approach to Port or Construct a Pligg Template

[Adam]

Hi All,

Over the past few weeks more and more people have been asking how to port templates to pligg, more specifically what are the tools, applications and approach that i use to port a template to the pligg cms system. Again never being someone that withholds information from the pligg community i thought i would explain my approach. Please note that this article is based on porting a template using yget as a base and not creating a template from scratch, although after you have ported a few successfuly creating your own will be a lot easier. Okay so lets get on with it then.

Tools/Applications- These are the tools and applications i use when porting a pligg template.

Dev Server - Wamp to run a copy of pligg on my localhost
Text Editor - PHP Expert Editor to edit php and tpl files with.
Browsers - Internet Explorer 7, FireFox, Opera and Safari to check browser compatibility.
Images - Ulead Photoimpact XL 12 and Photoshop CS3 to edit/create images with.

When simply porting a template you will mostly find yourself using the Text Editor and a browser to refresh the page and see the changes. WAMP Server allows you to run an installation of pligg on your home computer identical to a full blown Web Server, this way is much faster for editing files and seeing the changes as you do not have to continually upload edited files to your live web server. It also means that you will never be working on a live site with visitors which is never recommended.

OK so that should be the tools i use covered, on the odd occasion i might use dreamweaver briefly but this is very rare when it's a pligg template i prefer a straight text editor for pligg. For those who do use Dreamweaver i haven't found a way to edit the files in design view as i have been asked that question a lot recently. It might be possible with a Pligg/Smarty plugin for dreamweaver but i cannot say.

What Coding Languages Do I Need To Know

There are four main languages that you will need to at least know the basics of when porting or creating a pligg template and those are.

CSS, HTML, PHP, Smarty/Template Lite

CSS
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

HTML
HTML is a computer language devised to allow website creation. These websites can then be viewed by anyone else connected to the Internet. It is relatively easy to learn, with the basics being accessible to most people in one sitting; and quite powerful in what it allows you to create. It is constantly undergoing revision and evolution to meet the demands and requirements of the growing Internet audience under the direction of the » W3C, the organisation charged with designing and maintaining the language.

PHP
PHP is a server-side scripting language for creating dynamic Web pages. You create pages with PHP and HTML. When a visitor opens the page, the server processes the PHP commands and then sends the results to the visitor's browser. PHP is especially lightweight and speedy.

Smarty/Template Lite
Smarty is a template engine for PHP. More specifically, it facilitates a managable way to separate application logic and content from its presentation. This is best described in a situation where the application programmer and the template designer play different roles, or in most cases are not the same person. For example, let's say you are creating a web page that is displaying a newspaper article. The article headline, tagline, author and body are content elements, they contain no information about how they will be presented. They are passed into Smarty by the application, then the template designer edits the templates and uses a combination of HTML tags and template tags to format the presentation of these elements (HTML tables, background colors, font sizes, style sheets, etc.) One day the programmer needs to change the way the article content is retrieved (a change in application logic.) This change does not affect the template designer, the content will still arrive in the template exactly the same. Likewise, if the template designer wants to completely redesign the templates, this requires no changes to the application logic. Therefore, the programmer can make changes to the application logic without the need to restructure templates, and the template designer can make changes to templates without breaking application logic.

When porting a template you will be mostly using CSS, HTML and Smarty/Template Lite very rarely should you need to edit any PHP when porting a template.

Adam's Porting Approach

First off you want to find a template you would like to port, XHTML/CSS is more favorable don't use a template with tabled layout only CSS templates are best. The actual chances of your template remaining XHTML after porting to pligg are pretty slim anyway due to various pligg features.

Once you have chosen and downloaded the template you like you should have an index.html, images folder and a CSS file of the design. These files and images contain everything that you require to port the template to pligg, layout, colours, images etc.

So what would i do next? Well if you haven't already read my Quick and Dirty Understand Pligg CSS file Structure Post do so now.

• Start Wamp Server and install a clean version of Pligg.
  
• Create a folder in your pligg templates directory with the name of your new template example "newtemplate".
  
• Copy the entire contents/folder structure of the original yget template to the newly created folder called "newtemplate".
  
• Now Copy your downloaded template contents to the newly created older and overwriting any files it asks should probably only be images.
  
• Open your text editor now open your downloaded templates index.html and its CSS file. Then open the yget main.css, pligg.tpl, header.tpl, footer.tpl and link_summary.tpl
  
• Goto your localhost pligg index and login to Administration section of pligg, goto Configure and Template change the default template value from "yget" to "newtemplate". Now refresh your browser and you should still see the yget template but this is fine remember you are basing your template on yget and copied it to your newly named folder so this is what to expect.

In your text editor you should now have all the files open that you require to port the template. I would normally start from the header.tpl and work down building the template as i go something like this. Header, Content, Sidebar, Footer.

pligg.tpl = Main layout structure of header, content, sidebars and footer basically the whole site.
header.tpl = header of the pligg site
link_sumary.tpl = content layout, , story title link, story content, votebox, discuss, bookmark this links etc
footer.tpl = the footer of course normally pretty simple text.

Well thats about it for now i don't want to go into massive detail just yet of how to transfer the CSS and HTML as i an hopefully going to make a few tutorial videos that will be easier to follow and less lengthy than text. But hopefully this will answer some questions and at least be enough to get started with.

All further questions welcomed.

Regards

Adam

[jemima]

Adam,
Its nice to finally have a starting point for making and porting pligg templates. This info has helped me alot with just knowing what apps to install. I would love to see more and the videos sound like they will be even more helpful Thanks again