Joomla Template Design
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Joomla Template Design as PDF for free.
More details
- Words: 2,806
- Pages: 17
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
How to Create Your First Joomla Template Feb 17th in Other by Tarek Farage In this tutorial , you will learn about the basics of a Joomla template, and create one from scratch. We will quickly go through installing a local server and Joomla itself, and then create a basic functioning template.
Preparation Before we get started on our template, there are a few things you need to prepare. Just like most CMSs, Joomla requires a server with PHP and MySQL installed. Installing the above manually can be quite annoying and, to be honest, a waste of time (unless you want to get into how it’s done exactly). What we will be doing is downloading a single installer for all the above that will stick a local server on your system and give you a really nifty control panel too. So head on over to WAMP and download the latest version.( MAMP for Mac)
Once the installer is downloaded, execute it and install WAMP in a place easy to remember. If all goes to plan you should be looking at a folder named : wamp
1 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
You should now also have an icon in your notification bar (where the clock is) that gives you access to WAMP's control panel. You can use this for a number of things, including restarting the server.
Downloading and installing Joomla Now that we have a server installed, we can get Joomla and set it up. Go to Joomla and download the latest release.
Before we continue, let's take a look at our wamp folder again. Inside you will find a bunch of folders, but the one we are interested in is the www folder. This is the root of your server setup and this is where we will be installing Joomla. (note: you can install as many copies of Joomla in here as you want, or anything else for that matter)
2 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
So, unpack your Joomla download into the www folder. I usually rename it at this point to the name of my site or just shorten it to joomla. Joomla is now on our server. However there is one last thing we need to do before installing, and that's to create a database. Open up your browser and go to http://localhost . Here you will find the your server admin area, this is where we create our database.
To create the database, click on phpmyadmin under the Your Aliases section.
For this tutorial's sake we will be calling our database joomla. You will not be creating a user with password here, instead using the root user details. It is strongly recommended that you create a user with a strong password in live situations.
Now that we have a database, we can start installing Joomla. Fire up your browser and go to http://localhost/joomla (or whatever you called your site when unpacking it.)
3 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
The first screen pretty much speaks for itself. Choose a language and press next. The next screen you see is the Pre-Install checklist. This is a list of the required items and settings Joomla needs to successfully install. Make sure you have the necessary configuration and click next.
On the next page, read the license carefully, and, when ready click next and enter the required details(Host Name: localhost , Username: root , no password and joomla as Database name), and press next.
Skip the FTP Configuration screen by clicking next and on the next page, enter your site name, an email address and choose a password. This will be the password you will use to log into the admin area of joomla along with the username: admin. We will not install any sample data right now, as we want to add the modules one by one to see how our template is coming along later on in the tut. Click next.
Congrats! Joomla is up and running, but before we can go in and mess around we have to delete the installation folder. So go to your www folder inside wamp, and then into the joomla folder and delete the installation folder
4 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
A closer look at Joomla It’s pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping. Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while, at the same time, being packed with features that keep thousands of developers busy rolling applications and modules. If necessary, get familiar with the back end ( I recommend this quick Joomla 101 article on the Themeforest blog to get a quick feel.) To visit your site , click on preview in the upper right corner of the admin area. What you will get is the default template with no content and the most basic of modules loaded.
The template In order to begin understanding the template structure, let's take a look at the default one. Go to your www folder, then inside the joomla folder you should see a templates folder. (wamp/www/joomla/templates). This is where all the different templates go. You can switch between templates in the admin panel.
5 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Inside the templates folder, you will see a folder for every template installed. Joomla comes with three templates: beez, rhuk_milkyway and ja_purity. Remember this location as this is where you will be installing your new templates in the future.
Although most templates are made up of quite a few files, only two are needed to make a working template. These are: index.php templateDetails.xml The first one - index.php - is where all the markup goes in which you stick the Joomla includes. These can be seen as little hooks where joomla hangs up information on, like modules for example The second file is templateDetails.xml. You can see this as a list of instructions to Joomla. This list must include the name of the template, the names of the files used in the template(images etc..) and the positions you want to use (the includes mentioned above.) view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
6 of 17
template _tut 31-01-2009 Nettut Fan [email protected] http://www.siteurl.com You 2009 GNU/GPL 1.0.0 <description>Template Tut index.php templateDetails.xml css/template.css
<positions> <position>breadcrumb <position>left <position>right <position>top <position>user1 <position>user2 <position>user3
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
29. <position>user4 30. <position>footer 31. 32. The above is an example of a templateDetails.xml file. As you can see, this is a specific list that tells Joomla about the template, like the name, the author, date created etc... Notice the positions section in the code above. These are the positions we spoke of earlier, the includes. Some are self explanatory, like footer. If you put the joomla footer include in the footer area of your design, you will be able to control some aspects of the footer using the Joomla back end. Lets try and throw together a simple template.
Beginning the template Lets do some preparation so we have something to work with. Go to your templates folder , and create a new folder. Lets call it template_tut.
Inside your new folder, create a file called index.php, and another called templateDetails.xml (copy/paste the code in the example above inside it).
Open up your index.php file in notepad or anything else you use to edit code, and copy/paste the following in: view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5.
7 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
We have a DOCTYPE, a PHP code for the language, and in the head section our first Joomla include. This is not in the xml list because it is not a position. view plaincopy to clipboardprint? 1. <jdoc:include type="head" /> What this does is include the joomla header code (which includes the page title), and a bunch of other stuff that can probably fill half a tutorial on its own. Finish up the markup on the page by adding the body tags and closing the html tag.
Using the template Now that we have the basic files in place, let's add another include, this time to display the main content of any given page being viewed. view plaincopy to clipboardprint? 1. <jdoc:include type="component" /> You should now have this in your index.php view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. 11. 12. 13. Before we test our template, let's add an article so we have some content. Make sure WAMP is running and go to your admin area in Joomla with http://localhost/joomla/administrator
Now enter your login details
8 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Go to Content on the menu and then to Article Manager in the drop down
Click on New to add an article
Give your article a title, fill in an alias, make sure its published to front page and hit save
9 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Let's see what our article looks like on the front page. Click on preview in the upper right corner after saving. You should see the front page of your site with your text.
Now that we have published content, let's see if the template we made actually works. Go back to your admin area and click on Extensions and then Template Manager
You should see template_tut in the list, so go ahead and choose it, and set it as default.
10 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla template. YAY!
Adding some meat to our template We got our template working, it's retrieving the header info including the title and displaying content we created in the joomla back end .Before we add more includes, let's take a closer look at the module position includes; the ones we named in our xml file. view plaincopy to clipboardprint? 1. <positions> 2. <position>breadcrumb 3. <position>left 4. <position>right 5. <position>top 6. <position>user1 7. <position>user2
11 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
8. <position>user3 9. <position>user4 10. <position>footer 11. They are included in the following way: view plaincopy to clipboardprint? 1. <jdoc:include type="modules" name="position_name" /> So in order to add , for example, the left position, our index.php will look like this: view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. 12. While we are at it, let's add the footer position view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. <jdoc:include type="modules" name="footer" /> 12. 13. If you go back to your admin area, and go to the Module Manager you will notice a module already there, the Main Menu module. This module gets installed even if we choose to install the simple version of Joomla.
12 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
The menu is already hooked on to the left position (which we just included in our template), so let's see what it looks like. Hit preview
As you can see, we now have a menu with a link to Home. You can add more menu items and link to different content through the Menu Manager. Lets get a footer working. Go to the Module Manager, click new and select Footer. Then press next.
13 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
On the following page, give the new module the title: Footer, and in the Position dropdown, select Footer.
Click save and then preview the page. You should now also see footer information on your template.
Adding more positions and modules Lets style our page a bit so we can see what we are doing. In your template_tut folder create a new folder and call it "CSS" , and create a file inside it called 'template.css"
14 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Stick the includes in index.php in some divs and wrap it all in a container div and then link your style sheet like the example. Feel free to copy my messy layout if you are not already using one of your own. I did mine real quick for this tutorial. view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9.
15 of 17
*{ padding: 0; margin:0; } ul { list-style:none; } .float { float: left; } .clear { clear: both; }
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+ 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.
http://net.tutsplus.com/tutorials/other/creating-your...
#container { width:960px; margin: auto; } #header { background-color:#999999; height: 150px; } #content { width: 660px; text-align: center; } #sidebar_left { text-align: center; background-color:#CCCCCC; width: 150px; } #sidebar_right { background-color:#CCCCCC; width: 90px; } #footer { background-color:#999999; text-align:center; }
Lets hook our right sidebar and header up with positions. Add the top position to the header and right position to the right side bar. view plaincopy to clipboardprint? 1.
16 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Preview your page, you should now have a search bar in your header and a login form in your right sidebar. These are pretty much the basics of a Joomla template. You create positions in your design, like little hooks for Joomla to send info to, which in most cases you create in the back end. You can apply this to almost any design using the many positions that Joomla offers. I hope this has been useful to you guys, keep in mind that these are the very basics, Joomla templates can be made as complex and powerful as you want. Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
7 diggs digg it
17 of 17
09/15/2009 08:25 PM
http://net.tutsplus.com/tutorials/other/creating-your...
How to Create Your First Joomla Template Feb 17th in Other by Tarek Farage In this tutorial , you will learn about the basics of a Joomla template, and create one from scratch. We will quickly go through installing a local server and Joomla itself, and then create a basic functioning template.
Preparation Before we get started on our template, there are a few things you need to prepare. Just like most CMSs, Joomla requires a server with PHP and MySQL installed. Installing the above manually can be quite annoying and, to be honest, a waste of time (unless you want to get into how it’s done exactly). What we will be doing is downloading a single installer for all the above that will stick a local server on your system and give you a really nifty control panel too. So head on over to WAMP and download the latest version.( MAMP for Mac)
Once the installer is downloaded, execute it and install WAMP in a place easy to remember. If all goes to plan you should be looking at a folder named : wamp
1 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
You should now also have an icon in your notification bar (where the clock is) that gives you access to WAMP's control panel. You can use this for a number of things, including restarting the server.
Downloading and installing Joomla Now that we have a server installed, we can get Joomla and set it up. Go to Joomla and download the latest release.
Before we continue, let's take a look at our wamp folder again. Inside you will find a bunch of folders, but the one we are interested in is the www folder. This is the root of your server setup and this is where we will be installing Joomla. (note: you can install as many copies of Joomla in here as you want, or anything else for that matter)
2 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
So, unpack your Joomla download into the www folder. I usually rename it at this point to the name of my site or just shorten it to joomla. Joomla is now on our server. However there is one last thing we need to do before installing, and that's to create a database. Open up your browser and go to http://localhost . Here you will find the your server admin area, this is where we create our database.
To create the database, click on phpmyadmin under the Your Aliases section.
For this tutorial's sake we will be calling our database joomla. You will not be creating a user with password here, instead using the root user details. It is strongly recommended that you create a user with a strong password in live situations.
Now that we have a database, we can start installing Joomla. Fire up your browser and go to http://localhost/joomla (or whatever you called your site when unpacking it.)
3 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
The first screen pretty much speaks for itself. Choose a language and press next. The next screen you see is the Pre-Install checklist. This is a list of the required items and settings Joomla needs to successfully install. Make sure you have the necessary configuration and click next.
On the next page, read the license carefully, and, when ready click next and enter the required details(Host Name: localhost , Username: root , no password and joomla as Database name), and press next.
Skip the FTP Configuration screen by clicking next and on the next page, enter your site name, an email address and choose a password. This will be the password you will use to log into the admin area of joomla along with the username: admin. We will not install any sample data right now, as we want to add the modules one by one to see how our template is coming along later on in the tut. Click next.
Congrats! Joomla is up and running, but before we can go in and mess around we have to delete the installation folder. So go to your www folder inside wamp, and then into the joomla folder and delete the installation folder
4 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
A closer look at Joomla It’s pretty hard these days to get into any Open Source CMS discussion without the name of Joomla dropping. Its installation along with intuitive admin panel makes it very popular with users who are after an easy CMS while, at the same time, being packed with features that keep thousands of developers busy rolling applications and modules. If necessary, get familiar with the back end ( I recommend this quick Joomla 101 article on the Themeforest blog to get a quick feel.) To visit your site , click on preview in the upper right corner of the admin area. What you will get is the default template with no content and the most basic of modules loaded.
The template In order to begin understanding the template structure, let's take a look at the default one. Go to your www folder, then inside the joomla folder you should see a templates folder. (wamp/www/joomla/templates). This is where all the different templates go. You can switch between templates in the admin panel.
5 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Inside the templates folder, you will see a folder for every template installed. Joomla comes with three templates: beez, rhuk_milkyway and ja_purity. Remember this location as this is where you will be installing your new templates in the future.
Although most templates are made up of quite a few files, only two are needed to make a working template. These are: index.php templateDetails.xml The first one - index.php - is where all the markup goes in which you stick the Joomla includes. These can be seen as little hooks where joomla hangs up information on, like modules for example The second file is templateDetails.xml. You can see this as a list of instructions to Joomla. This list must include the name of the template, the names of the files used in the template(images etc..) and the positions you want to use (the includes mentioned above.) view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.
6 of 17
<positions> <position>breadcrumb <position>left <position>right <position>top <position>user1 <position>user2 <position>user3
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
29. <position>user4 30. <position>footer 31. 32.
Beginning the template Lets do some preparation so we have something to work with. Go to your templates folder , and create a new folder. Lets call it template_tut.
Inside your new folder, create a file called index.php, and another called templateDetails.xml (copy/paste the code in the example above inside it).
Open up your index.php file in notepad or anything else you use to edit code, and copy/paste the following in: view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5.
7 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
We have a DOCTYPE, a PHP code for the language, and in the head section our first Joomla include. This is not in the xml list because it is not a position. view plaincopy to clipboardprint? 1. <jdoc:include type="head" /> What this does is include the joomla header code (which includes the page title), and a bunch of other stuff that can probably fill half a tutorial on its own. Finish up the markup on the page by adding the body tags and closing the html tag.
Using the template Now that we have the basic files in place, let's add another include, this time to display the main content of any given page being viewed. view plaincopy to clipboardprint? 1. <jdoc:include type="component" /> You should now have this in your index.php view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. 11. 12. 13. Before we test our template, let's add an article so we have some content. Make sure WAMP is running and go to your admin area in Joomla with http://localhost/joomla/administrator
Now enter your login details
8 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Go to Content on the menu and then to Article Manager in the drop down
Click on New to add an article
Give your article a title, fill in an alias, make sure its published to front page and hit save
9 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Let's see what our article looks like on the front page. Click on preview in the upper right corner after saving. You should see the front page of your site with your text.
Now that we have published content, let's see if the template we made actually works. Go back to your admin area and click on Extensions and then Template Manager
You should see template_tut in the list, so go ahead and choose it, and set it as default.
10 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Hit preview and check out your glorious new template. Well maybe not so glorious but your first joomla template. YAY!
Adding some meat to our template We got our template working, it's retrieving the header info including the title and displaying content we created in the joomla back end .Before we add more includes, let's take a closer look at the module position includes; the ones we named in our xml file. view plaincopy to clipboardprint? 1. <positions> 2. <position>breadcrumb 3. <position>left 4. <position>right 5. <position>top 6. <position>user1 7. <position>user2
11 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
8. <position>user3 9. <position>user4 10. <position>footer 11. They are included in the following way: view plaincopy to clipboardprint? 1. <jdoc:include type="modules" name="position_name" /> So in order to add , for example, the left position, our index.php will look like this: view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. 12. While we are at it, let's add the footer position view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9. <jdoc:include type="component" /> 10. <jdoc:include type="modules" name="left" /> 11. <jdoc:include type="modules" name="footer" /> 12. 13. If you go back to your admin area, and go to the Module Manager you will notice a module already there, the Main Menu module. This module gets installed even if we choose to install the simple version of Joomla.
12 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
The menu is already hooked on to the left position (which we just included in our template), so let's see what it looks like. Hit preview
As you can see, we now have a menu with a link to Home. You can add more menu items and link to different content through the Menu Manager. Lets get a footer working. Go to the Module Manager, click new and select Footer. Then press next.
13 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
On the following page, give the new module the title: Footer, and in the Position dropdown, select Footer.
Click save and then preview the page. You should now also see footer information on your template.
Adding more positions and modules Lets style our page a bit so we can see what we are doing. In your template_tut folder create a new folder and call it "CSS" , and create a file inside it called 'template.css"
14 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Stick the includes in index.php in some divs and wrap it all in a container div and then link your style sheet like the example. Feel free to copy my messy layout if you are not already using one of your own. I did mine real quick for this tutorial. view plaincopy to clipboardprint? 1. 2. 3. 4. <jdoc:include type="head" /> 5. 6. 7. 8. 9.
10.
18. 19. and the CSS view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. Header and stuff
11. 12. 13. <jdoc:include type="component" /> 14.
15. 16. 17. 15 of 17
*{ padding: 0; margin:0; } ul { list-style:none; } .float { float: left; } .clear { clear: both; }
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+ 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.
http://net.tutsplus.com/tutorials/other/creating-your...
#container { width:960px; margin: auto; } #header { background-color:#999999; height: 150px; } #content { width: 660px; text-align: center; } #sidebar_left { text-align: center; background-color:#CCCCCC; width: 150px; } #sidebar_right { background-color:#CCCCCC; width: 90px; } #footer { background-color:#999999; text-align:center; }
Lets hook our right sidebar and header up with positions. Add the top position to the header and right position to the right side bar. view plaincopy to clipboardprint? 1.
<jdoc:include type="modules" name="top" />
2. 3. and 4. 5. Now let's create the modules for those two positions. Go to the admin area of Joomla, login if necessary, and go to the Module Manager under the Extensions drop down menu. You should see Main Menu and the Footer we created earlier. Follow the same steps to create two more modules. A Search module that you will place in the top position, and a Login module that you will place in the right position.16 of 17
09/15/2009 08:25 PM
How to Create Your First Joomla Template - Nettuts+
http://net.tutsplus.com/tutorials/other/creating-your...
Preview your page, you should now have a search bar in your header and a login form in your right sidebar. These are pretty much the basics of a Joomla template. You create positions in your design, like little hooks for Joomla to send info to, which in most cases you create in the back end. You can apply this to almost any design using the many positions that Joomla offers. I hope this has been useful to you guys, keep in mind that these are the very basics, Joomla templates can be made as complex and powerful as you want. Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
7 diggs digg it
17 of 17
09/15/2009 08:25 PM
Related Documents
Joomla Template Design
June 2020 4
Joomla Template Tutorial Traduzido
July 2020 2
Joomla Template Tutorial
August 2019 13
Membuat-template-joomla
June 2020 14
Joomla
May 2020 24