Please note: this article is a personal notepad and not a walkthrough. Although I’m linking what I feel is worth readingregarding Joomla template design, the article is not a walkthrough. A TON OF HOW I’M MAKING THE TEMPLATE is left unsaid. I am primarily tossing breadcrumbs so I can find my way through. You will be able to view the finished product at http://www.wigital.net by June of 2009. Thanks
also… I like the sites at att.com and apple.com/server . I may borrow from them
The first step in creating a site template is to simplify what I see in the Joomla installation. When I initially installed Joomla, I installed the default content into our site. This means there are lots of articles, menu items and components active, not all of which we’ll need. Let’s disable and unpublish EVERYTHING
In the Admin Panel
- GO TO Content | scroll to the bottom of the page | look for the Display drop down menu at the bottom of the table | select All
this will display ALL of the articles
- scroll back to the top of the Articles table | check the box above the columns that selects ALL of the articles | click Unpublish | in the headers at the top of the table, click on the FrontPage header (this will sort the FrontPage articles to the top) | select as many FrontPage articles as you want and click Publish (this will put a few articles on the Front Page)
I don’t need to see anything but the FrontPage for a while.
Using my web editor (you can download Nyu or Amaya for free).
- Navigate to the Templates folder
- create a new Folder inside the templates folder (and name it for your template)
- MyTemplateFolder
- create four subfolders inside your “newly named” MyTemplateFolder
- css (styles)
- html (template overrides)
- images (images for the template)
- javascript (scripts)
- more
Build a Template based on XHTML and CSS. Borrow from the free template tutorial made available by Barrie North as well as the Joomla 1.5 Template Tutorials, Articles and HowTo’s here
JOOMLA TEMPLATE ARTICLES AND TEMPLATE TUTORIALS
http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project
http://docs.joomla.org/New_features_introduced_in_Joomla!_1.5_templates
Since I’m trying to get a basic sketch up today, I will skip the Template Overrides feature. However, I will bookmark it for later and get back to transitioning components/com_content_views/ defaults for Article and Frontpage content to tableless CSS when I have time.
Template Overrides of Tables in Joomla (for future reference)
http://developer.joomla.org/tutorials/165-understanding-output-overrides-in-joomla.html
http://www.m65.net/article-chapter-pages-joomla!-joomla-template-kits-tutorials-layout-76-205.html
http://www.scribd.com/doc/2300107/Joomla-v-1-5-Getting-Started-with-Template-Overrides
OK.. So I’ve laid out the following “basic” index.php file according to the guides above
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo $this->language; ?>" xml:lang="<?php echo $this->language ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/print.css" type="text/css" />
<script type="text/javascript" src="media/system/js/mootools.js"></script>
<script type="text/javascript" src="media/system/js/caption.js"></script>
</head>
<body
<div id="wrapper">
<?php echo $mainframe->getCfg('sitename'); ?>
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</body>
</html>
NOTE: The jdoc:include type=”component” is the TABLE based component. This is acceptable for now and will be “hopefully” gotten to later.
Now… next comes the layout as I intend to achieve it.
LOGON (inactive on most pages/menus)
TOP NAV (3 tabs only of key links)
SITE NAME & SEARCH
TOP NAV MAIN (main top navigation)
LEFT NAV MAIN & COMPONENT (contained in same div)
RIGHT NAV
BOTTOM (MODULE-User11 | MODULE-User12 | MODULE-User13 | MODULE-User14)
a little breathing space
BOTTOM INDEX NAV (MODULE -a form of NAV indexing the site contents – “will figure this out“)
FOOTER
Now the big deal at this point is figuring out what modules go into where ??? and What Includes and <div> containers to make.
Joomla Modules
Joomla start with User1, User2, User3, User4 modules loaded as defaults. Adding additional modules gives me a launch pad to customize my content in Modules a bit more (as well as what I am able to do functionally with the modules given the broad array of Joomla extensions). Here is my initial idea for modules:
- User1 = Latest News
- User2 = Popular
- User3 = Top Menu
- User4 = Search
- User11 = Module? (TBD)
- User12 = Module? (TBD)
- User13 = Module? (TBD)
- User14 = Module? (TBD)
- User20 = Logon (mod_login styled to display horizontally)
- User21 = TopNav
- User22 = TopNavMain
- User23 = BannerNav
- User24 = BottomIndexNav
Now this alters our BODY
<body> <div id="wrapper">
<jdoc:include type="modules" name="user20" style="xhtml" />
<jdoc:include type="modules" name="user21" style="xhtml" />
<?php echo $mainframe->getCfg('sitename'); ?>
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="user22" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="user11" style="xhtml" />
<jdoc:include type="modules" name="user12" style="xhtml" />
<jdoc:include type="modules" name="user13" style="xhtml" />
<jdoc:include type="modules" name="user14" style="xhtml" />
<jdoc:include type="modules" name="bottom" style="xhtml" />
<jdoc:include type="modules" name="user24" style="xhtml" />
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</body>
Now I can move on to adding <div> tags and IDs and using CSS to position these modules and componets where I want to in my Template.
OK… now all of thos modules have been created in the Index.php file and they’ve been contained in <div> tags and ID. The next thing is to actually create the User11 through User24 modules and then assign the actual Joomla MODULES (or copy existing ones) to them. This is achieved using Modules in the Admin Panel .
Navigation
The mod_mainmenu module is the NAVIGATION of Joomla. ”By default” it is assigned to Main Menu (left nav in default template RhukMilkyway) and Top Menu (top pillbox nav in default template RhukMilkyway) . To make multiples of a Top Navigation (nav designed to display horizontally) we are going to copy the Top Menu mod_mainmenu module 3 times and the Main Menu mod_mainmenu once.
The fastest way to do this is to go to the Menu Manager and copy the Top Menu OR Main Menu there. Copying in the Menu Manager automatically creates a copy of the mod_mainmenu mode in the Modules . This method saves a couple of steps.
Now prior to setting these up, we still need to create Positions for each of the copied Navigation modules.
This article explains how to create Positions (they need to be added to your templateDetails.xml file)
http://www.dart-creations.com/joomla/joomla-tutorials/joomla-1.5-template-positions.html
As soon as these <position>userValue</position> are added as children of the <positions> element, we are ready to assign our copied modules to the new positions we’ve created.
Once the menus have been copied in the Menus | Menu Manager, then go to Extension | Modules Manager and confirm your Module Parameters, Advanced Parameters, and Other Paramters are set according to your planning:
- User21 = TopNav mod_mainmenu module
- User22 = TopNavMain mod_mainmenu module
- User23 = BannerNav mod_mainmenu module
- User24 = BottomIndexNav mod_mainmenu module
AGAIN!!! REPEATING !!! – -In the Extension | Modules Manager , review the Module Parameters, Advanced Parameters, and Other Paramters for settings related to controlling the look and feel of the navigation modules.
Our First Parameter is Menu Style:
Module Parameters | Menu Style | Legacy – Flat List
* Vertical – The Vertical Menu Style Child Menu Items will be displayed in an extended form when the Parent Item is clicked upon. These will be presented with an indented offset Title that will distinguish them from the Parent. This is the type of Menu Style adopted for the Main Menu in the standard Template installed with Joomla!. However, alternative Templates may treat this differently.
* Horizontal – The Horizontal Menu displays the Menu Items one above the other in a tabular layout. Child Menu Items are not displayed. The appearance is similar to the Vertical Menu Style.
* Flat List – The Flat List Menu displays Menu Items in list format (<li> tags). Depending on the CSS settings of the active template, the Menu may display horizontally or vertically. This option does not display Child Menu Items. This is the Style used for the Menu Bar at the top of the standard Template installed with Joomla!. However, alternative Templates may treat this differently.
We use the Flat List here because it gives us a very high degree of control of the <li> elements using CSS. The only mod_mainmenu that we will define as something else is the Main Menu which we define as vertical in order to use the automated indentation and the extension of the Menu using Joomla’s code.
Joomla Modules and Module Types
Joomla has more than a few accolades as a Content Management System. This is in large part due to the success Joomla has had in establishing an outstanding Open Source Community. It is also due to the flexibility of Joomla to be customized and the power of the components and modules that are available.
The modules aspect of Joomla is very cool because you can just grap something, plug it in somewhere and whalla !!! a new cool feature in your site. Even by default, Joomla has a flexible array of functionality in it’s Modules. To learn about Modules and Module Types, please read:
http://docs.joomla.org/Modules_Administrator
For now… we are going to create for mod_custom modules. mod_custom allows us to type in some custom HTML into the module and publish it like a article or web page. This gives us the ability to type HTML directly (with CSS ID’s, selectors, classes) into the module for the purposes of playing around with and fine tuning our CSS design. As soon as the design is ”stylin”, we’ll be able to substitute other module types when the time comes to have a more focused approach based on the “purpose” those module positions will eventually play in our layout.
Remember earlier we wanted to create the following:
We’re now going to crate Four mod_custom modules and assign them to those User positions. We’ll name them and assign them to the appropriate position.
4x User11 > User11 = Module? (TBD)
4x User12 > User12 = Module? (TBD)
4x User13 > User13 = Module? (TBD)
4x User14 > User14 = Module? (TBD)
more…
text
#1 by Stroiev on 2009/03/21 - 04:55
Ну а что еще писать шоб не потерли?
#2 by Me on 2010/01/08 - 19:08
I am trying to get my top menu that came with a template to do drop list, showing child menus. Any suggestions ?
#3 by Mark Raborn on 2010/01/10 - 07:13
Drop down menus in Joomla generally come in JavaScript flavors. This means that if you’ve downloaded a template from a template provider, you will want to check with them as to which JavaScript library (or Script) they use.
Some examples are MooTools (which is built into Joomla), JQuery, etc… So you can add JavaScript to a Joomla template OR you can add a JavaScript framework to a Joomla installation.
Read these links:
http://docs.joomla.org/Adding_JavaScript
http://www.demo2.ari-soft.com/addingjsframeworks.html
Also, in the back end Administrator of Joomla, you will need to use the Extensions | Modules | Menu | “parameters” to control the aspects of your menus that the template provider will want set. These settings can be very specific and require the entry of specific data such as ( Class Suffix and Other Parameters ) to be set “before” a template will actually work according to it’s design.
Ultimately, your template provider can tell you if they’ve used a single JavaScript and how you invoke that JavaScript within your template OR “if” you need to install a JavaScript library and which library the template uese. Check with the provider of your template for details as well as how to set the Joomla Menu Modules in the Joomla Administrator.
Hope this helps
Mark