Joomla Template Making Video Tutorial, for More please visit http://technologystory.net
http://i3.ytimg.com/vi/JS5-Lw9GtUw/default.jpg
Joomla Template Tutorial - Part 6: In Joomla Template, the important thing is jdoc tag. As you see at below picture, jdoc tag is a way load module, component, and head component (like title, description, keywords, etc). In this post, we will try to use jdoc tag.
I just rememberring picture that placed jdoc in blocks.
From the picture, you can guess the jdoc formula:
<jdoc:include type="[head|module|component]" />
So, open your index.php within mytemplate folder. Add following bold code:
< ? // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ? > < html > < head > <jdoc:include type="head" /> < / head > <body> <table width="100%" border="1" bgcolor="#FFFF00"> <tr> <td colspan="3"> <jdoc:include type="modules" name="top" /></td> </tr> <tr> <td colspan="2">jdoc:include type="modules" name="user3" /></td> <td>jdoc:include type="modules" name="user4" /></td> </tr> <tr> <td rowspan="2" valign="top">jdoc:include type="modules" name="left" /></td> <td colspan="2"> <table width="100%" border="1"> <tr> <td>jdoc:include type="modules" name="user1" /></td> <td>jdoc:include type="modules" name="user2" /></td> </tr> </table> </td> </tr> <tr> <td height="200">jdoc:include type="component" /></td> <td valign="top">jdoc:include type="modules" name="right" /></td> </tr> <tr> <td colspan="3">jdoc:include type="modules" name="footer" /></td> </tr> </table> < / body > < / html >
The result, like this:
Joomla Template Tutorial - Part 5: Before put content, we must design the blocks where module or component placed. In this posting, we use ‘classic’ HTML (I mean, use <table> not <div>).
Our layout target like following picture:
Ok, open index.php within folder mytemplate. Enter following code:
< ? // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ? > < html > < head > < / head > < body > <table border="1" width="100%" bgcolor="#ffff00"> <tbody> <tr> <td colspan="3">Top</td> </tr> <tr> <td colspan="2">User 3</td> <td>User 4</td> </tr> <tr> <td rowspan="2">Left</td> <td colspan="2"> <table border="1" width="100%"> <tbody> <tr> <td>User 1</td> <td>User 2</td> </tr> </tbody></table> </td> </tr> <tr> <td height="200">Component</td> <td>Right</td> </tr> <tr> <td colspan="3">Footer</td> </tr> </tbody></table> < body > < html >
Joomla Template Tutorial - Part 4: After create ‘embryo’ joomla template, now, we try to activate the template. In Joomla, we make this template as default.
Now, when you point your browser to localhost/joomla, you can see ‘nothing’. Yup, because template used has changed. Active template is mytemplate. But we don’t define anything in this template. So, we just see blank page.
Joomla Template Tutorial - Part 3: Now, we will build our first joomla template. We start from simplest layout. This posting focus on step by step creating simple joomla template.
< ?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>mytemplate</name> <version>1.0.0</version> <creationdate>07/09/08</creationdate> <author>Rakibul Islam</author> <authoremail>me@yahoo.com</authoremail> <authorurl>http://www.technologystory.net</authorurl> <copyright></copyright> <license>GNU/GPL</license> <description>TPL_MY_TEMPLATE</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>breadcrumbs</position> <position>left</position> <position>right</position> <position>top</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>footer</position> <position>debug</position> <position>syndicate</position> </positions> </install>
When read above codes, you can guess, it is like metadata for this template. Content this XML file is about our Joomla template information.
Joomla Template Tutorial - Part 2: Before write Joomla template code, we will imagine what code that we will write. I draw ‘code’ in module posible position picture. This picture may help you easy understand how to write code in next step. You will see more clear.
From picture above, I think you can catch idea… It is simple, isn’t it?
Make your own Joomla Template - Part 1: Before learn about joomla template, we must clear different of modules and components. Modules and components will be dominant topic when we talk about template in Joomla. Because content all of page is that items. For clearly, you can see this picture:
In above picture, you can see like blocks. It represent posible position at joomla template. We can draw it simple like below:
How I know about posible positions? Simple, just login as administrator. Open Extention > Module Managers. You can see list posible position at dropdown.
Ok, we will improve our first picture become like this:
Next post, we will talk detail about module position.
Browse these sites for free PSD (Photoshop) Objects and templates. These site has great resources on photoshop PSD Files which are totally free.
1. .PSD Files on deviantART
2. FreePSD.com
3. Official PSDs
4. PhotoshopCandy
5. Photoshop Cafe
6. Free Photo Clips | Background-Free Photo Objects
7. PSDTUTS
8. 20+ Free Adobe Photoshop web buttons
9. Ganato Free Icon
10. PSDSpy.com
11. PSDProtocol
12. Photoshopit (http://photoshopit.wordpress.com)
13. Free Logo Makers
14.Alterform psds (http://www.alterform.com/)
