Table of Contents
Joomla 1.5 Template Tutorial
| Project Information | |
|---|---|
| Name | Creating Joomla Templates |
| URL | http://www.joomla.org |
| Docs | http://joomlacode.org/gf/project/joomla/docman |
| Download | http://joomlacode.org/gf/project/joomla/frs |
| Source Book | |
|---|---|
| Name | Building Websites with Joomla! 1.5 |
| Image | 184719530X.jpg |
| ISBN | 978-1-847195-30-2 |
| Publisher | Packt Publishing |
| URL | http://www.packtpub.com/joomla-version-1-5/book |
| Author | Hagen Graf |
Introduction
In order to customize the appearance of your website to that of your company's image, you have to modify an existing template or create a new one. In this tutorial you will learn the basics of building your own Joomla! templates.
Corporate Identity
Corporate Identity (CI) refers to the self-image and the appearance of an enterprise. This appearance, the identity, either arises from the enterprise's tradition or it is completely invented in a newly created establishment. This identity is important to give the customer a feel for the enterprise and to enable recognition.
Corporate Identity includes:
- Corporate Image (price, product, and advertising strategy)
- Corporate Design (visual appearance)
- Corporate Communication
- Corporate Behavior (behavior of employees towards each other and the outside world)
All of the above areas have to be considered when developing a website. In this tutorial, we will examine Corporate Design. At a minimum, it consists of a logo, a character font, and the house colors that the enterprise uses.
The visitors to your website should recognize your enterprise on the first visit.
HTML/XHTML, CSS, and XML
The abbreviations HTML/XHTML, CSS, and XML stand for Internet technologies that Joomla! works with. The World Wide Web Consortium standardizes these technologies.
HTML/XHTML
The World Wide Web is based on HTML. HTML is not a programming language, but a text-description language.
Each piece of text consists of structures like headings, lists, bold and italic areas, tables, and much more. HTML works with so-called tags. A tag has an opening portion and a closing portion. For example, a first-level heading looks as follows:
<h1>This is a heading</h1>
The tags are interpreted in the browser and the text is displayed according to their significance.
HTML is very easy to learn and many online tutorials can be found. HTML is not being developed any further; the successor to HTML is XHTML version 1.0.
CSS
Cascading Style Sheets (CSS) are an extension to HTML. CSS is not a programming language either, but a vocabulary for defining the format properties of individual HTML elements.
With the help of CSS commands, you can, for example, specify that the first-level headings should have a character size of 18 points in the character font Arial, are not bold, and have a spacing of 1.9 cm to the next paragraph. Such options are not possible with pure HTML and were not necessary when HTML was first developed.
With the progressive commercialization of the Internet, additional formatting possibilities do, however, become more and more important.
CSS data can be integrated into HTML in the following three ways:
- In the Central HTML File: The CSS commands are defined in the head section of the HTML file like this:
<head> <title>title of the file</title> <style type="text/css"> <!-- /* ... this is where the CSS commands are defined ... */ --> </style> </head>
- In a Separate CSS File: If the CSS commands apply to several HTML files, they can be stored in a separate file and the path to this file can be specified in the HTML header. This is the version that Joomla! uses.
<head> <title>title of the file</title> <link rel="stylesheet" type="text/css" href="formats.css"> </head>
- Within an HTML Tag: CSS commands can also be inserted within an HTML tag:
<body> <h1 style=" CSS commands ...">...</h1> </body>
Combinations
These three methods can be combined without any problem in an HTML file. It is, for instance, possible to subsequently overwrite CSS commands that were defined in a central file in the additional source code of an HTML page. This practice, however, quickly leads to confusing structures; it is better to customize the central file.
XML
The Extended Markup Language (XML) is a universe in itself. It represents a meta-language and is derived from the much more complex SGML (Standardized Generalized Markup Language) that was developed in the sixties. XML is often used for configuration files and as an interchange format. For our purposes, you need XML as the description language for the metadata of the templates that you want to create. These metadata are primarily relevant for the Template Installer and the display in the Template Manager.
In principle, these data also consist of opening and closing tags. For example:
<name>Joomla! Book</name>
The difference between HTML and XML is that no tags are predefined in XML.
Because of that, you are completely unrestricted in the organization of the structures and the naming of the tags.
Creating Your Own Templates
Now we want to create our own template. There are several things to consider before we have a finished template packages. Let's take it one step at a time.
Concept
Before you start working, you have to create a concept. The work starts with a sketch or a diagram, especially when producing templates. It is up to you whether you want to create this sketch with an image editing program like Adobe PhotoShop, Microsoft Paint that comes with Windows, the open-source program GIMP, or even with a piece of paper and crayons.
Fixed Size or Variable (Fluid) or Both
You can create two kinds of templates. Templates that adapt their structure to the size of the browser window and templates that have a fixed size. An example for the flexible layout: if you have 2048 pixels across your screen and the browser window is maximized, then your page is stretched accordingly. That can look strange if you use graphical, non-scalable elements like logos and signatures in your template. You have no control of what it is going to look like.
Your other choice is to decide on a certain resolution and to position all the elements exactly on the pixels in the template. This has the advantage that your web page always looks the way you want. Unfortunately, you do not know the resolution of the monitor that is viewing your page. If that monitor has a resolution of 800 x 600 pixels, then your page fills the screen. On a large screen with a resolution of 1400 x 1050 pixels, it occupies about a quarter of the screen surface and looks a little lost.
You will have to weigh the pros and cons and make a decision on one or the other, or you can consider barrier freedom and offer both versions. You must have seen websites where you can even change the font size. In addition to the font size buttons there is also often a button to select different layouts.
If you prefer the fixed size, you should select a size that looks presentable on most screens, in other words 800 x 600 pixels. Since the browser has a scroll bar on the right side and the browser window is framed, the available width is even smaller, meaning that you have a maximum of 780 pixels to work with.
Structure
You are dealing with structured data and first have to determine a general allocation. Joomla! normally uses a structure as shown in the following figure:
Section 1:
- Part 1: This is where your logo or a picture and the name of the website goes.
- Part 2: This is where the search field is.
- Part 3: This is where the linked navigation path goes (Breadcrumbs).
Section 2:
- Part 4: The most important menus are shown in the left column.
- Part 5: The actual page content goes here.
- Part 6: The right column is a place for additional menus.
Section 3:
- Part 7: The footer.
HTML Conversion
Now you have to convert the concept into HTML and CSS. Depending on the graphics editing program that you have used to create it, there is a possibility that the picture can be automatically exported to HTML code. You can also do the conversion manually in a text editor, in an HTML editor like Dreamweaver (http://www.adobe.com/products/dreamweaver), or in one of the numerous free HTML editors (http://www.thefreecountry.com/webmaster/htmleditors.shtml).
Using
vs. <table>
The
tag is a replacement and a supplement for the <table> tag in HTML. You can enclose several HTML elements, such as text and graphics in one common area with it. This general area does nothing for the time being but start in a new line of the continuing text. The
tag does not have any other properties. There are big benefits, however, in using a combination of
tags with CSS commands.
was specifically developed for the purpose of being formatted with CSS commands. Until 2004, it was common practice to define website structures with generous employment of HTML tables. With CSS and the
HTML element becoming more and more popular and with browsers being able to interpret these, more and more templates are being structured without HTML tables. However, rarely do we see websites that contain only semantically correct HTML and that have layouts that are built 100% without tables. The first step in structuring your website in that direction is the use of the
tags. Joomla! 1.5 is also gradually straying from the 'table path' and is starting to deliver semantically correct HTML. Nonetheless, it continues to be possible to structure your site layout with HTML tables. There are no table tags in the included rhuk_milkyway template; the entire table-like structure is created with
tags. Take a look at the original source code of this template to familiarize yourself with this technology. You can get more information about
tags at http://www.selfhtml.org SelfHTML.org (in German). Dreamweaver also supports this technology.
Example
The source code of the HTML conversion looks somewhat like the following listing. The code is kept simple on purpose and is not consistent with the XHTML standard in the header. The file name of this layout file has to be index.php since Joomla! searches it for embedded commands per PHP. HTML file /index.php: <code html> <html> <head> <link href=“/joomla150/templates/joomla150buch/css/template.css” rel=“stylesheet” type=“text/css” /> </head>
<body>
Header / Header<br /><br />
<div id="Part1">Part1</div> <div id="Part2">Part2</div>
Main display area / Main<br /><br />
<div id="Part3">breadcrumbs</div> <div id="Part6">right side</div> <div id="Part4">left side</div> <div id="Part5">content</div>
Footer / Footer<br /><br />
<div id="Part7">Part7</div>
</body> </html> </code>
The subsequent CSS file from the individual template is integrated into the header area of the code. At the moment this CSS file contains only one command that defines the typeface.
===CSS file /css/template.css:=== <code css> body { font-size: 12px; font-family: Helvetica,Arial,sans-serif; }
#Section1 { /*header*/ float: left; border: 2px dotted green; }
#Section2 { /*main*/ float: left; border: 2px dotted yellow; }
#Section3 { /*footer*/ clear:all; border: 2px dotted red; }
#Part1 { /*top right*/ float: left; width: 18em; margin: 0 0 1.2em; border: 1px dashed silver; background-color: #eee; }
#Part2 { /*top left*/ float: right; width: 12em; margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; }
#Part3 { /*breadcrumbs*/ border: 1px dashed silver; background-color: #eee; }
#Part4 { /*left side*/ float: left; width: 15em; margin: 0 0 1.2em; border: 1px dashed silver; }
#Part5 { /*content*/ margin: 0 12em 1em 16em; padding: 0 1em; border: 1px dashed silver; }
#Part6 { /*right side*/ float: right; width: 12em; margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; }
#Part7 { /*footer*/ margin: 0 0 1.1em; background-color: #eee; border: 1px dashed silver; } </code>
You will create this first template manually in the Joomla! directory. When the template is ready, you can turn it into a compressed installation package that it can then be installed by a third party (or by you yourself) using the Joomla! installer. Save the HTML layout file by the name of index.php in the also newly created [PathToJoomla]/templates/joomla150book/ directory. Save the template.css file in the [PathToJoomla]/templates/joomla150book/css/ directory.
The basic structure of your template is done. Now you have to define the template more exactly for Joomla! with the help of an XML file so that it will be displayed in the template administration section.
===Directory Structures of the Template===
Now it's time to take care of certain conventions. As previously discussed, the template has to be stored in a specific directory structure. <code> [PathToJoomla]/templates/[name of the template]/ [PathToJoomla]/templates/[name of the template]/CSS/ [PathToJoomla]/templates/[name of the template]/images/ </code> The name of the template cannot contain blanks and other special characters. When this template is later installed as a package, the Template Installer has to create a directory from this name. Depending on the operating system, exotic combinations of characters can cause problems. In addition, the name should be meaningful. Here we will use joomla150book as the name of the template.
Various files with predefined names have to be present in the template directories. * Layout File: This is the HTML file that we created earlier: /templates/joomla150book/index.php. It should have the .php ending, since the dynamic Joomla! module elements that we will insert later have to be interpreted by PHP. * Preview Picture: The /templates/joomla150book/template_thumbnail.png file contains a preview image of your template for preview selection in Joomla! administration in the Extensions | Template Manager menu. Preview pictures have a format of 200 by approximately 150 pixels. You can create this file later when you can see your template. * Metadata of the Template: The /templates/joomla150_book/templateDetails.xml file represents the construction manual for the template installer and contains the installations for the template selection in the template manager. Here you specify the location where the files are to be copied, who the author is, and additional metadata about the template.
During subsequent installation of this file by the Joomla! installer, PHP reads this file and copies the files to the place specified by the XML file. For the example template, you can use the file from the following listing (templateDetails.xml) and populate it with your own data. For every file that you use in the template, a respective XML container has to be populated with the file name and the correct path. <code xml> <files> <filename> … enter the filename of a file in the TemplateRoot directory …</filename> <filename> … for every file a filename-Container</filename> </files> </code> The other containers of the XML file are there for the description of the template. Here is the complete functional listing of the XML file:
templateDetails.xml:
<code xml> <install version=“1.5” type=“template”> <name>joomla150book</name> <version>1.0</version> <creationDate>11.11.2007</creationDate> <author>Hagen Graf</author> <copyright>GNU/GPL</copyright> <authorEmail>hagen@cocoate.com</authorEmail> <authorUrl>http://www.cocoate.com</authorUrl> <description>… description</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_thumbnail.png</filename> <filename>css/template.css</filename> <filename>images/logo.jpg</filename> </files> </install> </code> Create the templateDetails.xml file in the [PathToJoomla]/templates/joomla150book/ directory as well.
* CSS File: You can use several CSS files for your template. What name you give the CSS file and how you create it is up to you. There are, however, standard descriptions for various CSS elements. For your first attempt, you need a CSS file with the name [PathToJoomla]/templates/joomla150_book/css/template.css.
* Graphics, Images: Here you can enter user-defined image files that you need in your template. The installer then copies the files into the images folder. The file name appears as [PathToJoomla]/templates/joomla150_book/images/[user-defined image files].
===First Trial Run===
Once you have reproduced all the structures in the [PathToJoomla]/templates/ subdirectory, you can already see your new template in the Extensions | Template Manager menu of your Joomla! administration and you can make it default: When you call up your website, you will see your new template. Unfortunately, there is no content shown yet. Since this content is produced dynamically, you have to integrate it piece by piece into your new template.
===Integration of the Joomla! Module===
The integration of the Joomla! module takes place by means of commands embedded into the HTML code. Joomla! uses the namespace jdoc to integrate various elements into the template. If you insert the following highlighted line into the header of the layout file: <code html> <head> <jdoc:include type=“head” /> …
</head> </code> the title of the site and the news feed symbol are already correctly displayed.
If you call up the source code of this site, you will notice that Joomla! has copied the entire metadata that you had entered in administration into the HTML code. In addition, the RSS feeds have been integrated by means of link tags and these will be displayed as feed symbols in browsers like Firefox that support this technology.
Joomla! Metadata: <code html> <html> <head> <base href=“http://localhost/joomla150/” /> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <meta name=“robots” content=“index, follow” /> <meta name=“keywords” content=“joomla, joomla!, Joomla,Joomla!, J!” /> <meta name=“description” content=“Joomla! - dynamic portal-engine and Content-Management-System” /> <meta name=“generator” content=“Joomla! 1.5 - Open Source ContentManagement” /> <title>Welcome to the Frontpage</title> <link href=“/joomla150/index.php?format=feed&type=rss” rel=“alternate” type=“application/rss+xml” title=“RSS 2.0” /> <link href=“/joomla150/index.php?format=feed&type=atom” rel=“alternate” type=“application/atom+xml” title=“Atom 1.0” /> <script type=“text/javascript” src=“/joomla150/media/system/js/mootools.js”></script> <script type=“text/javascript” src=“/joomla150/media/system/js/caption.js”></script> </head> … </html> </code>
Since this has worked so well, we will waste no time and get to the other relevant jdoc tag insertions. The command: <jdoc:include type=“modules” name=“top” style=“none” /> for example, expects the type of insertion as type parameter, in our case modules. The name parameter marks the position of the module (top, right, left, user1, …) on the website. You can assign this position to your module from the Extensions | Module menu in the Module Section. The style parameter, finally, contains a value that pertains to the type of HTML code that is being delivered by the module. For example, none delivers pure HTML output without the surrounding
tags. The following table describes the module parameters:
^ Parameter ^ Output ^ | table | The module is displayed in a table. | | horz | The module is displayed horizontally in a cell of a surrounding table. | | xhtml | The module is output in an XTML-compliant div element. | | rounded | The output is in a format in which round corners can be displayed. The class of the element is changed from moduletable to module. | | beezDivision | Special switch for the Beez template. The size of the header can be changed with this. This switch is not available outside of the Beez-template. | | none | The module is output without any formatting. |
You can get a description of the jdoc insertions in the index.php file in the following listing.
index.php with jdoc insertions:
<code php> <?php some useful variables $cur_template = JRequest::getVar( 'template', $mainframe→getTemplate(), 'default', 'string' ); $cur_baseurl = JURI::base(); ?> <html> <head> <jdoc:include type=“head” /> <link href=“<?php echo $cur_baseurl; ?>/templates/<?php echo $cur_template; ?>/css/template.css” rel=“stylesheet” type=“text/css” /> </head> <body>
header / header
<div id="Part1">Part1
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div id="Part2">Part2
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<div id="Section2">main display area / main
<div id="Part3">breadcrumbs <jdoc:include type="modules" name="breadcrumb" style="xhtml" /></div>
<div id="Part6">right side <jdoc:include type="modules" name="right" style="xhtml" /></div>
<div id="Part4">left side
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<div id="Part5">content <jdoc:include type="component" style="xhtml" /></div>
</div>
<div id="Section3">Footer /footer
<div id="Part7">Part7<jdoc:include type="modules" name="footer" style="xhtml" /> </div>
</div>
</body> </html> </code> If you call up the website with the modified HTML code on the local server, you can already see the dynamic content. Your new template has already been filled with all of the data. The visual aspect of the result could still use some improvements, but nonetheless the concept works.
Now we still have to pack the template into an installation package.
Creating a Template Package
To give your template to others, you have to compress it into a ZIP archive. Before you do that, create a current preview image of your template (template_thumbnail.png) with a size of 227 x 162 pixels. This thumbnail should now be displayed if you pass your mouse pointer across the name link in the template section.
Now pack all of the joomla150book files and all of its subdirectories into a ZIP archive. In addition, select of all of the files and folders in the [PathToJoomla]/templates/joomla150book/ folder and pack them all into the joomla150book.zip file. Make a backup of this file and the ZIP file.
Uninstallation of the Template
You can now pass this package to others or you can install it yourself. If you want to try the installation, you have to remove the newly created template again from your Joomla! system.
To remove it, you first have to designate a different template as the default template.
Click on the Extensions | Template Manager menu, select the desired template, and click on the Default icon.
Now you can uninstall your template. Go to the Extensions | Install/Uninstall menu and click on the Templates tab. Select the newly created joomla150book template and click on the Uninstall icon.
Installation with the Joomla! Template Installer
After you have eliminated all traces of your development and have backed up your work, go to the Extensions | Install/Uninstall menu.
You can install your ZIP package from here. Select the joomla150book.zip file and install it by clicking on the Upload File & Install button. The installer will report that the installation was successful and this success message will also display the description from the XML file.
What Source Code Comes from Joomla?
After we have jumped the most difficult hurdles by creating the template, let's take a look into the HTML code that Joomla! delivers to us.
Joomla!, naturally, creates code that is inserted into the container we have created. This code consists of HTML with sprinkled in CSS classes and CSS IDs. Among other things, Joomla! incorporates two CSS files that describe particular classes and IDs and that are inserted into each and every template.
These are the /templates/system/css/system.css and the /templates/system/css/general.css files.
These are inserted in the <head> area with the following commands:
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/system/css/general.css" type="text/css" />
The Left Module Position in Detail
Let's take a closer look at the left module bar.
This is the HTML code in the index.php layout file:
<div id="Part4">left side <jdoc:include type="modules" name="left" style="xhtml" />
The
tag for this section is formatted by a CSS ID with the name of Section4.
If you take a look at the delivered HTML code in a browser (right-click on Website, Display Source Code), you will, of course, see a lot more code that was created by the jdocs request.
Excerpt from the delivered HTML source code: <code html> … additional HTML commands
left side
<div class="moduletable_menu">
<h3>main menu</h3>
<ul class="menu">
<li id="current" class="active item1">
<a href="http://localhost/joomla150/">front page</a>
</li>
<li class="item2">
<a href="/joomla150/joomla-license">Joomla! License</a>
</li>
</ul>
</div>
… additional HTML commands </code>
The CSS classes menu, active item1, and active item2 are noticeable in this code.
You will find additional CSS suffixes right away in one of the CSS files of the default rhuk_milkyway template: <code css> div.module_menu h3 { font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #eee; margin: -23px -4px 5px -5px; padding-left: 10px; padding-bottom: 2px; } div.module_menu { margin: 0; padding: 0; margin-bottom: 15px; } div.module_menu div div div { padding: 10px; padding-top: 30px; padding-bottom: 15px; width: auto; } div.module_menu div div div div { background: none; padding: 0; } div.module_menu ul { margin: 10px 0; padding-left: 20px; } div.module_menu ul li a:link, div.module_menu ul li a:visited { font-weight: bold; } </code> In this case the CSS blocks take care of the rounded corners in the menu. There are additional items in the CSS file that format the third-order heading (<h3><h3>) and a non-sorted list (the menu links) for this case.
So far, so good. This type of formatting is deliberate and the output of the necessary <div> tags can also be changed with the style attribute. We used the style xhtml parameter in our example template; in this template, the style rounded parameter is used. It delivers the respective four-part <div> tag.
This type of code creation is really suitable for CSS formatting. If you continue reading through the source code, you will also run across tables again. The Content Component still works with tables! This is where the problems start if you want to format the content (the part in the middle) separately without tables. However, Joomla! has a solution for this as well.
===Template Overrides (Customize HTML Output without Changing the Core Files)===
In order to get grip on the problem of table display, you would normally have to change the Joomla! core files. Your content would then be free of tables, but the file could possibly be overwritten with the next update.
From Joomla! 1.5.0 on there are now the so-called views that present a solution for this problem; you will find a number of different views for the display of logic components. With the com_content component, these are, for example, archive, article, category, frontpage, and section. These five folders contain files that make different content views available. I hope you remember the table and the blog view. Each of these five folders also contains a tmpl folder, which in turn contains various files that are responsible for the display.
In order to travel down that route you need an additional directory in your template directory. If we are staying with this example, this directory must be called 'com_content/article', since you want to change the layout of the content component in display type article.
In other words, you have to copy the files from: <code> [PathToJoomla]/components/com_content/view/article/tmpl/*.* </code> into your new template directory and then you can do the customizations that you need. <code> [PathToJoomla]/templates/[yourtemplate]/html/com_content/article </code> This can easily be duplicated in the Beez template. The aforementioned files are here in: <code> [PathToJoomla]/templates/beez/html/com_content/article </code> and thus overwrite (override) the core files without changing them.
Joomla! looks for these files in the template directory. If they are there, they are used. If they are not there, the core files from the components are used.
===Additional References=== * Instructions on Installing Joomla! 1.5
===References=== * Graf, Hagen. 'Chapter 13: Writing Your Own Joomla! Templates', Building Websites with Joomla! 1.5, Packt Publishing, 2008. * Sejal, Creating Joomla 1.5 Templates.
== Guest-Only Modules == === Hide modules from registered users in Joomla 1.5 ===
While Joomla 1.5 allows hiding modules from guests (and just show them to registered users), it lacks the ability to do the opposite, namely hiding modules from registered users. Of course such thing can be very useful when there are modules inviting users to register (how pointless to show them to already registered users!), or modules showing advertisements to guests.
As said, the backend does not allow you to set a module to show to guests only, but this can be very easily done in a couple of minutes and minimal effort with a simple hack to the template code. NO need to install plugins or add-ons! It is a simple yet very useful trick.
After making a quick backup of the files which are to be modified, follow the steps:
==== 1. Creating a new module position ====
What is shown or hidden to users, using this system, is not a single module but a position (and all the modules displayed in it). Examples of default Joomla 1.5 positions are banner, breadcrumb, left, footer, etc. and your Joomla might have further of them depending on the template you are using. We will now create a new position, where we will display the modules which we want to show to guests only; so we’ll call it guestsonly or any other name you like.
# Open the directory where the active template files are stored; it should be in your Joomla directory, in the templates folder. # Open the file templateDetails.xml. In it you will find a number of lines preceded by the <position> prefix; These positions are shown in the dropdown menu of the backend; so while it is not necessary to perform the next step for the trick to work, it will allow you to easily include new modules to that position, directly from the backend. # Add one more line with the name you chose for your new position, so it should look like:<code><position>guestsonly</position></code> # Save and close the file.
==== 2. Placing the position and PHP code in the layout ====
# Now, in the same template directory, open the file index.php. This contains the layout of the template. # Add the following lines (replacing the name of the position if appropriate) wherever you want that position to be in the layout: <code php> <?php $user =& JFactory::getUser(); if($user→guest){ ?>
<jdoc:include type=“modules” name=“guestsonly” style=“xhtml” /> <?php } ?> </code> # Save and close the file.
==== 3. Final steps ====
Once you’ve successfully completed the steps above, you already have your ‘guests only’ position! Now all you need to do is add new or place existing modules to it, editing the module settings from the backend and selecting the new position as theirs. Test if it works by logging in and out from the frontend (just in case).
Note: the access level of those modules, in their settings, should be kept to “Public”. Don’t worry; the code we applied overrides that setting and will only show it to unregistered users!
=== References === * Hiding Modules from Registered Users in Joomla 1.5
=== Joomla 1.7 - 2.5 ===
==== Create a New User Group in User Manager ==== * Create user group Guest (parent Public).
==== Create a New Access Group in User Manager ==== * Create ACL Guest. * Select group Guest.
==== Edit the Public Access Group in User Manager ==== * Edit ACL Public. * Select group Public and Guest.
==== Change Access Levels in Articles, Menus, and Modules in Module Manager ==== * Select Access = Guest'' for those articles or modules that need viewing only by guest users (not Registered).