Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,196,933 members, 7,962,973 topics. Date: Monday, 30 September 2024 at 09:51 PM |
Nairaland Forum / Science/Technology / Webmasters / Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates (4494 Views)
10 Best Free Blogger Templates For 2013 Download / Joomla,drupal Or Wordpress Which Do I Use!!! / Beginners Class For Joomla - Join Now! (2) (3) (4)
Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:03pm On Mar 12, 2010 |
My first tutorial this year based on several requests of many nairalanders. So we are going to be looking at how to create templates for websites. I will start from the old school table based templates, and upgrade to css based templates. Followed by Joomla templates and drupal templates. Please let me know if this interests anybody, or maybe i should forget about this thread. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by DualCore1: 8:04pm On Mar 12, 2010 |
If you no want make we shoot you, you better go on. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:09pm On Mar 12, 2010 |
There are 3 kinds of templates we are going to be talking about here: 1. Direct templates (table/css-based) that you can create from the scratch (similar to what dreamweaver creates for you) 2. How to convert that template you created into a drupal/joomla template 3. How to convert an existing website into drupal or joomla. For instance, you can do a site initially with drupal and decide to convert it into joomla, or the other way round. Now, by extension, to completely convert an existing website into drupal or joomla, you must be able to create joomla modules or drupal modules/blocks. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:11pm On Mar 12, 2010 |
By the way, this tutorial is for intermediate users, which means that you must be able to design websites to an extent for direct template creation. But if you want to create drupal or joomla, you must know how to use the frameworks already. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:12pm On Mar 12, 2010 |
If you are a newbie, please check out this thread first - https://www.nairaland.com/nigeria/topic-216485.0.html |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by c7(m): 8:24pm On Mar 12, 2010 |
Just start. I knws pple will like to learn |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by c7(m): 8:28pm On Mar 12, 2010 |
Oops! Network problem. Well just carry on |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:56am On Mar 13, 2010 |
Now some of you guys do not like to read stuff, but please read this, it may help - http://www.quirksmode.org/css/quirksmode.html This is a very important key to creating proper templates. One if the reason for using stuffs like: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"And also why we sometimes have issues with templates in different browsers. I am going to be talking about 3 kinds of popularly used templates: - Two Columns - Three Columns - Fixed layouts - Liquid Layouts If you can build those set of templates, then you will have figured out plenty. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 12:31pm On Mar 14, 2010 |
Please take a look at template designs here. http://www.dynamicdrive.com/style/layouts/ I dont want to waste time with the basic templates. I think i will just jump to how to convert those kinda templates into drupal / joomla. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:48pm On Mar 14, 2010 |
you are totally right the best is to avoid quirksmode because it's hard to centralize body in quirksmode, but shoot on with the tutorial, |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:23pm On Mar 14, 2010 |
so i think i can just move straight on to joomla template. Please read the writeups above for the regular template building. But if you have any questions about building regular templates, please ask and you shall get answered. pc guru is itching to get his hands on the joomla template part. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 5:33pm On Mar 14, 2010 |
Let me start by using my website template (www..com) as an example of a joomla template: template.php <?php in joomla, there is usually a folder called template. Inside that folder, there are templates each one in their folders. Oops, battery low, time to go, i will be back later on. Before i go, i must remind you that, before you get to this step, you must have designed your template in html and preferably to have designed your template with the home page and possibly the other pages, so you will just need to do a conversion into joomla or drupal by some manual systematic coding. I am going to avoid delving into the APIs of the frameworks, you dont need so much of that knowlege to build your template per say. But i will explain the minimal ones you need to get your templates done. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:17pm On Mar 16, 2010 |
In a typical joomla template, you have the following files: index.phpThose are the minimal files you can have in your joomla template. Of course you can have your image folders, style folders and other folders and files. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 9:20pm On Mar 16, 2010 |
index.phpLet me try to explain a bit. ja_templatetools.php and ja_vars.php => these 2 come with joomla, just copy from any existing joomla template. template_thumbnail.png - this is a thumbnail of your template, this is not compulsory favicon.ico - this is a favicon of your template, if you dont know how to create favicon, pls find out - it is not compulsory The main files you have to work on are the following: index.php I have already given an example of what an index.php look like - that is the main template file, we will get back to this later params.ini is some joomla settings that look like this: logoType=imageThis contain some joomla settings that the users can customize later in the joomla backend and then the template will interprete it with your own codes. templateDetails.xml <install version="1.5" type="template">This too is a joomla customization stuff. It explains the template positions, and the location of your files. This is used in the template installation. Now, i have given the structure of a joomla template, i will have to explain properly, step by step in the next class. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 9:00am On Mar 17, 2010 |
okay from that so far i understand time to practice thanks for taking time cheers bro, |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 3:58pm On Mar 18, 2010 |
Let me try to explain the templateDetails.xml <install version="1.5" type="template">This is the installation and a configuration file of your template. After creating your template, you are required to list out the path of the files you want joomla to install and where they are relative to your folder. That is where your files array come in <files>I suspect that is easy to understand. Next is the positioning stuff: <positions>If you have been using joomla, you will notice that you can arrange modules and set their positions in the joomla backend and how you want them arranged, as in, which module comes before another module. So in this positioning, you define the positions available in your template. Later in the index.php, you will determine where exactly those positions will be displayed in the final output. One advice at this point is that, you may start peeking at the default templates that come with joomla, you may take at look at their templateDetails.xml to compare with what i have been explaining so far. These rubbish stuffs i am saying are important to know before getting your hands dirty with the index.php which is the main template file. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:00pm On Mar 18, 2010 |
The params.ini i will skip. you may just copy and paste the one i have shown so far. Explaining how to use that will involve diving into the joomla API which is not really compulsory to do your stuff, after this tutorial, you may look up google and joomla.org to figure out the remaining. I must admit that building templates in joomla is not so straightforward without understanding some funny joomla terminologies. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:04pm On Mar 18, 2010 |
Let me make the index.php somewhat simpler: template.php <?php |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:07pm On Mar 18, 2010 |
Sorry, i have been mixing up some filenames. Please for joomla, there is no template.php per say. Anywhere you see template.php please replace it with index.php = this is what happens when you use too many frameworks. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 7:53am On Apr 11, 2010 |
Well, here is a sample template i created for this class. I mean a joomla template. Since i could not upload a zipped file here, i had to place it on my website. Download it here And that ends my joomla template tutorial. The others will be questions. To install the template, it is the usual way it is done in joomla, you visit the administrative area with the /administrator, then install, and select the zipped file which i think is dynamic. The tpl.zip contains the template and a little readme stuff. From this point, i will expect questions for the joomla users. I think i can confortable move on to drupal. That sample dreamweaver template, i will convert it into a drupal template. It is about the simplest stuff i can use. From there, you can start figuring out how to put images and all that and make it finer according to your taste. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by quadrillio(m): 2:49pm On Apr 11, 2010 |
Go on bro, SHARING IS FUN. -SAFE |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 3:50pm On Apr 11, 2010 |
You are welcome. Before i forget, when converting your templates, some of the contents that need to go into the sidebars and footer are best placed in modules. Then position the modules into the right places. Module creation in joomla is another topic entirely, however, i have a utility on my website - www..com that allows easy creation of module. It can create the skeleton for a module and zip it and allow you to download it. After installing that module into your joomla, you can subsequently edit it and add whatever content you wish to put there. The full link to the joomla module wizard is - here Installation of modules is similar to templates and other stuffs in joomla. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:02pm On Apr 11, 2010 |
So now, letz assume i create a website like www.mwebng.net (yeah, that is my site done in drupal while .com is my site in joomla). Now in drupal, the templates are called themes and are stored in the themes folder that is : site/themes Here the installation is automatic, drupal will detect any new theme automatically. So just go into the themes folder and create a folder like: "dhtmlext" Whatever name you give the folder will determine your file naming convention for the .info file. Next, you will need the following files: block.tpl.php [The Main Files] page.tpl.php is the main template file that you need to work on. page-front.tpl.php is optional and can be used whenever you need a custom home page that is different from the rest of the pages. An example of such a drupal site is - fidelitypensionmanagers.com (disclaimer, i did not design the site, i only converted it to drupal). If you are a drupal user, you will realize there are some small bits of items in drupal such as comments, nodes. . . [Not so important files] box.tpl.php - is the subtemplate for theming block modules comment.tpl.php - is subtemplate for theming comments node.tpl.php - is for theming node displays. [Images] logo.png - is the logo of your site screenshot.png - is the screenshot of your template [Stylesheets] style.css is the default stylesheet of your template style-rtl.css is the template for rtl rendering [dont bother with this yet] [Configuration] dhtmlext.info is the configuration file of your theme |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:08pm On Apr 11, 2010 |
An example of the page.tpl.php (from a recent website i developed) is: <html> First i designed the template with fireworks, slices it out into pages, then separated the components into modules and page contents. I will explain the steps in details later on. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:16pm On Apr 11, 2010 |
On that same website, the block.tpl.php is: <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">I think i removed the title. You can check the block.tpl.php of the templates that came with drupal like garland and compare them with this. As for the comment.tpl.php and block.tpl.php i just copy them from the default drupal template |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:19pm On Apr 11, 2010 |
dhtmlext.info goes like this: ; $Id: dhtmlext.info,v 1.4 2007/06/08 05:50:57 dries Exp $The most important thing here is the custom regions which specify my module positions. In drupal, module positions are called blocks. The other information are straight forward enough (or so i immagine). |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:22pm On Apr 11, 2010 |
If you scroll back up to the page.tpl.php you will notice that when rendering module/block positions, i simply used stuffs like: The will render the header which was defined as regions[header] = Header <?php echo "$header";?> So others like: <?php echo "$left";?> regions[left] = Left Sidebar <?php echo "$right";?> regions[right] = Right Sidebar <?php echo "$footer";?> regions[footer] = Footer . . . |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:28pm On Apr 11, 2010 |
So now, let my try explain the page.tpl.php from begining to end. Head section <head>print $head will render some settings that are meant to be in the head section like meta tags and so on. $head_title will specify the title of the current page. $styles will specify the stylesheets of the page. stye.css is added automatically by default. $scripts will load the default scripts like jQuery if it has been enabled The body section <body> $topnav, $header, $navbar,$footer are the module/block positions that we have spoken about. $content is the main page content whether page or view or node. Sometimes, drupal uses some tabs, those tabs are rendered by $tabs Drupal also renders messags atimes with the <?php if ($show_messages) { print $messages; } ?> Help contents are rendered by <?php print $help ?> Optionally to render feed icons <?php print $feed_icons; ?> |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 4:30pm On Apr 11, 2010 |
From this point, i am done with drupal template basics. I will take questions from here on. By the way, there are different types of template/theme engines in drupal, i am sticking with the php template engine. I will post a sample theme for download later on, just for learning, nothing spectacular. |
Re: Tutorial: Create Templates For Joomla, Drupal, Direct Css-based Templates by Nobody: 8:34am On May 03, 2010 |
Please check out my Joomla / Drupal Template Converter Online Application and the Joomla / Drupal / Plain Online Template Wizard I will take questions from this point on. . . |
(1) (Reply)
4 Reasons Why Blogging Is Good For Your Business / How To Integrate "Payment With Airtime" Feature Into Your Web Applications. / The 12 Dos And Don’ts Of Writing A Blog
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 83 |