Joomla! Documentation - User contributions [en]

PHP essentials

2012-01-03T23:05:56Z

Timj: /* PHP Round-trip */

{{review}}
Many web designers and casual website owners are not conversant with the
PHP language in which Joomla! is written and since Joomla! templates
usually contain PHP statements it is necessary to understand at least a
little of the language in order to be able to create or customize
templates. This chunk will describe, in simple terms, how to use each aspect of PHP in the
context of a Joomla! template. For example, a simple explanation of the PHP
if-then-else syntax using extracts from a template for illustration.

The best resource to learn PHP is probably hands on experience and Joomla can provide that to you thanks to it's native PHP code. This can be overwhelming for people who have not programmed before. Though Joomla is easy enough to [[Installation|install]] with the help of the community and a little of your time you'll have people asking you to do their websites.

One place that has a nice short list if functions and examples is http://en.wikiversity.org/wiki/25_Essential_PHP_Functions which is good to get familiar with PHP. Though for an extensive function list, explanations, and examples go to http://www.php.net.

Once you have the basics of PHP you'll need to get the basics of the Joomla PHP syntax. Start by looking at some existing {{jsite|ext|extensions}} and check out the code and also take a look at some these Tutorials about Joomla:

* [[Developing a Model-View-Controller Component - Part 1]]
* [[Creating a Plugin for Joomla 1.5]]
* [[Creating a simple module]]

That will help you get familiar with some of the functions available within Joomla's system and what they do (using the API). Take particular care to understand the MVC (model view control) setup.

If however, you are absolutely new to PHP, following may help as very brief introduction to PHP.

==== PHP Introduction ====
PHP is a scripting language designed primarily for producing dynamic web pages. It is embedded into an HTML page with tags like <?php...?>. When a page is sent to the PHP engine, the PHP tags are translated into HTML, which can then be rendered by a browser. A database is needed during translation since the script may need to pull data from the database. So to create PHP pages, we require the PHP engine, a database (typically MySQL) and the webserver, which will coordinate these actions and forward the final HTML to the browser. These three components can be installed separately; however, we have packages like WAMP (for Windows), MAMP (for Mac) and LAMP (for Linux), for your convenience.

==== PHP Installation ====
The packages can be downloaded from [http://www.wampserver.com/en/download.php WAMP]. WAMP stands for Windows Apache MySQL PHP. The instructions can be followed as given in the site and is pretty straightforward. The installation can be done is any directory (say D:/wamp). Once installed, it can be started from the program->start->WampServer. This should give a small icon in the system tray using which the server can be started/stopped/restarted. It also gives links to all important files like php.ini and other configuration files. For Mac users MAMP can be found [http://www.macupdate.com/info.php/id/16197 here]. For the purpose of this tutorial [http://www.apachefriends.org/en/xampp.html XAMPP] can also be used.

==== PHP Round-trip ====
Our primary objective here is to write a small PHP page and have it rendered by the Apache web server. WAMP renders a page by looking in the www folder of the WAMP Install Directory, hereafter referred to as WAMP_HOME. Fire up your primary text editor, create a page and name it, say, first.php, and save it to the WAMP_HOME/www/x/y folder (x and y are folders created to organize the scripts) and write the following in the script:

<source lang="php">
<html>
<head>
<title>Basic PHP Page</title>
</head>
<body>
<?php
echo "My first php snippet";
?>
</body>
</html>
</source>

Save this file, point your browser to http://localhost/x/y/first.php, and you should be able to see the echo message.

The primary things to note here are: <pre>
1. It is strongly advised that all PHP codes begin with: "<?php" and end with a "?>" tag.
2. To have a semicolon [;] after each PHP statement.
3. The directory where this script resides needs to be given in the URL.
</pre>

This completes our round-trip. Now, for the sake of learning, you can either keep including new elements in this file or you can create separate scripts and load them in the browser.

==== PHP Variable Declaration and Data Types ====
We need to hold data for any programming. Following are ways you can define variables in PHP:
<ol>
<li>$variable_name = 0; </li>
'''Note''': here we did not define the type of variable, whether integer or string, that the variable should hold. This is referred to as dynamic scoping.
<li> the variable names should start with an alphabet and can contain alphanumeric characters and "_"
<li> Defining constants - <source lang="php"> define ("NAME_OF_THE_CONSTANT" , $value); </source> </li>
</ol>

==== Basic Operators ====
The general operators are explained below:
<pre>
a. + e.g. 6 + 3, addition operator, answer is 9
b. – e.g. 6 - 3, subtraction operator, answer is 3
c. / e.g. 6 / 3, division operator, answer is 2
d. * e.g. 6 * 3, multiplication operator, answer is 18
e. % e.g. 6 % 3, modulus operator, answer is 0
f. . e.g. '6'.'3', concatenation operator, gives string '63'
g. += e.g. $x += 6, adds 6
h. -= e.g. $x -= 6, subtracts 6
i. /= e.g. $x /= 6, divides by 6
j. %= e.g. $x %= 6, modulus by 6
k. .= e.g. $x .= '6', concats 6 to x
l. < e.g. $x < $y, evaluates to true if $x is < $y
m. > e.g. $x > $y, evaluates to true if $x is > $y
n. == e.g. $x == $y, evaluates to true if $x is equal by value to $y
o. != e.g. $x != $y, evaluates to true if $x is not equal to $y
p. === e.g. $x === $y, evaluates to true if $x is and $y is identical i.e both of same type both value and reference
q. >= e.g. $x >= $y, evaluates to true if $x is >= $y
r. <= e.g. $x <= $y, evaluates to true if $x is <= $y
s. && e.g. ($x == 2 && $y == 3) , evaluates to true if $x equals 2 and $y equals 3
t. || e.g. ($x == 2 || $y == 3) , evaluates to true if either $x equals 2 or $y equals 3
u. xor e.g. ($x == 2 xor $y == 3) , evaluates to true if either $x equals 2 or $y equals 3 but not both
v. ++ e.g. $x++, increments $x
w. –- e.g. $x--, decrements $x
</pre>

==== Defining Array Structures ====
'''Ways of declaring arrays'''
<br> Suppose we want many variables. We could have declared the variables as shown above; however, that is not elegant. Suppose you want 100 variables; declaring arrays come to the rescue. Note that the index in PHP starts with 0.
<source lang="php">
$my_guitar_heroes = array ("Hendrix", "Shankar", "Gilmour", "to_name_a_few!");
</source>
Or
<source lang="php">
$my_guitar_heroes [] = "Hendrix";
$my_guitar_heroes [] = "Shankar";
$my_guitar_heroes [] = "Gilmour";
$my_guitar_heroes [] = "to_name_a_few!";
</source>
Here PHP automatically assigns the index.

Or
<source lang="php">
$my_guitar_heroes [0] = "Hendrix";
$my_guitar_heroes [10000] = "Mainak";
</source>
Here, I knew the first and the 10,001st element but that's me!

Or
a combination of the above means

Or
<source lang="php">
// Set the elements at positions 1 through 9999 to the value, "to be decided".
$my_guitar_heroes = array_fill( 1, 9999, "to be decided" );
</source>

'''Accessing the Arrays'''
<source lang="php">
print $my_guitar_heroes[2]; //Access the 3rd element
</source>
Or
<source lang="php">
// Access the last element (Note that the element positions are numbered zero to
// [number of elements] minus one.)
$my_guitar_heroes[count($my_guitar_heroes)-1];
</source>
Or
<source lang="php">
// Access the last element using a function call.
end($my_guitar_heroes);
</source>

'''Iterating Over the Element of an Array'''
<source lang="php">
foreach ( $my_guitar_heroes as $temp) {
print "$temp<br />";
}
</source>

==== Control Expressions ====
To execute a statement of a collection of statements over and over, we use Control Expressions. The general syntax of the control structures are as follows:

'''if statements'''<br>
<source lang="php">
if( $x > 0) {
print("$x is positive");
} else if( $x < 0 ) {
print("$x is negative");
} else {
print("$x is 0");
}
</source>

'''for loop'''<br>
<source lang="php">
for ( $x=1; $x<= 10; $x++ ) {
print "$x<BR/>";
}
</source>

'''while loop'''<br>
<source lang="php">
$x = 1
while ( $x <= 10 ) {
print "$x<BR/>";
$x++;
}
</source>

'''do while loop'''<br>
<source lang="php">
$x = 1;
do {
print "$x<BR/>";
$x++;
}while($x <= 10);
</source>

==== Defining Functions ====
Code which is duplicated in many places is best placed in a function. The following are the ways of describing the function:
<source lang="php">
function name_of_the_function( $arguments, $size='default_values_if_any' ) {
print "here goes in the code";
return "this value is returned, return statement is optional";
}
</source>
The arguments are passed by value. If they are to be passed by reference, then an argument is prefixed by "&" as below:
<source lang="php">
function name_of_the_function( &$arguments, $size='default_values_if_any' ) {
print "here goes in the code";
return "this value is returned, return statement is optional";
}
</source>
The scope of a variable defined within a function is valid only within that function.

Calling a function
<source lang="php">$x = add(5, 3);</source>

==== Debugging ====
'''Basic printing options''' <br/>
A basic way to debug is to print the value of the variable. The following basic statements achieve that:

* <code>echo "if double quotes are used then dollar variables are resolved";</code>
* <code>echo 'if single quote are used then dollar variables are not resolved';</code>
* <code>print "another way to print";</code>
* <code>nl2br("any new line characters like \n get automatically resolved to HTML line breaks");</code>

Apart from these, the log files are very helpful and can be found in the WAMP_HOME/logs directory.

==== Handling Forms ====
{{warning|Joomla! provides [[Retrieving and Filtering GET and POST requests with JRequest::getVar|a safer and cleaner method of accessing request data]] and alternative ways for accessing the session. Using any of these arrays is not recommended.}}

PHP does not change any HTML structure, thus any syntax of HTML remains the same. The part that PHP plays is making any part dynamic for e.g., the action attribute of a form can be coded as action=<?php my_own_action(); ?> so that it is dynamically generated. The part where PHP kicks in is after the form is submitted, say to obtain the values of the form fields, set cookies, etc. For this, super global variables are used, which are always available to PHP code. Some of these are:

# <code>$_GET</code> - get the data from a GET request
# <code>$_POST</code> - get the data from a POST request
# <code>$_REQUEST</code> - get the request
# <code>$_COOKIE</code> - obtain the cookies from the browser
# <code>$_SESSION</code> - obtain the session

These are all arrays, and behave accordingly.
<noinclude>[[Category:Development]][[Category:Tutorials]]</noinclude>

J1.5:Template FAQs

2012-01-03T22:55:33Z

Timj: /* How do I change the image(s) in my template? */

{{review}}

===What is a template?===

The [[Template]] controls the overall look and layout of your site. It provides the framework that brings together common elements, [[Modules|modules]] and [[Components|components]] as well as providing the [[CSS|cascading style sheet]] for your site. Both the [[Front-end]] (Site) and the [[Back-end]] (Administrator) of your site have templates.

When Joomla! is installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also [[Joomla! 1.5 Template Tutorials Project|make your own template]].

Templates are managed with the [[Template Manager]], which is located on the site menu on the Back-end of your site.

The following may be helpful in understanding templates:
* http://help.joomla.org/content/view/474/153/

===How do I install a new template?===
{{JVer|1.0}}

In the [[Back-end]] of the site, go to Installers>>Templates-Site (or Templates-Administrator if you are installing an administrator template).

[[Image:Installing_templates.JPG]]

Browse for the template zip file and click ''Upload File'' and ''Install''.

[[Image:Uploading_templates.JPG ]]

Alternatively, you can install from a directory.

To make the new template the default template for your site, go to the [[Template Manager]] (Site>>Template Manager>>Site Templates).
You should see the name of your new template on the list of templates.

Select it and click on the default icon if you want it to be the default icon for your site.

{{JVer|1.5}}

In the [[Back-end]] of the site, go to [[Extension]]s>>[[Installing_an_extension|Install/Uninstall]].

[[Image:Extension_install_1_5.png]]

Browse for the template zip file and click Upload File and Install.

Alternatively, you can install from a directory or URL.

To make the new template the default template for your site, select it and click the default icon (star).

===How do I modify a template?===
Templates are just a series of xml, php, html and image files that are stored in the templates directory of your site.
You can edit these files or you can use the editing interface available in the [[Template Manager]].

{{JVer|1.0}}

In the [[Back-end]], select Site>>Template Manager>>Site Templates.

Select the template you wish to modify.

{{JVer|1.5}}

In the [[Back-end]], select Site>>[[Extension]]s>>Templates.
Select the template you wish to modify.
Click the edit icon.

{{JVer|1.0}} and {{JVer|1.05}}
You are given the choice of editing "html" and "css."

[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
[[HTML]] is the file that controls where positions are defined and positioned. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the tempate designer.

One common change is to use your own graphic/image. Graphics are linked to in the HTML file. Simply change the reference to the image of your choice. Keep in mind that it if it is a different size than the original image this may change the appearance of the site in unexpected ways.

===How do I assign a template to a specific page?===

In Joomla! there is a default template, but you can assign other templates to specific "pages" that are defined by menu links.

To assign a template to a page, you must first make sure that there is a direct menu link to the page.

{{JVer|1.0}}
* Go to Site>>[[Template Manager]]>>Site Templates
* Select the template you wish to assign.
* Click on the assign icon.
* On the right, there will be a list with all of the possible pages the template can be assigned to. Select one or more pages and save.

{{JVer|1.5}}

* Go to [[Extension]]s>>[[Template Manager]]
* Select the Template and click the edit icon (or click the template name)
* In the left column, change "None" to "Select from List."
* Select the links you want to apply the template to.
* Save

Note that you cannot assign the default template to individual pages.

'''Understanding'''

The templating system uses the [[ItemID]] to determine which template to show. ItemIDs are created when you create a menu link. This is why only menu items are shown in the list of pages to which you can assign templates.

===What are the base Joomla! CSS styles?===

{{JVer|1.0}}

Provided by Haaris

/**com_contact**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentpane
.contentheading
.contact_email
.inputbox
.button

/**com_content**/
.componentheading
.contentpane
.contentdescription
.inputbox
.sectiontableheader
.sectiontableentry1
.sectiontableentry2
.sectiontablefooter
.blogsection
.contentpaneopen
.article_seperator
.contentheading
.contentpagetitle
.buttonheading
.small
.createdate
.modifydate
.readon
.pagenav_prev
.pagenav_next
.adminform
.button
.text_area
.blog
.blog_more

/**com_login**/
.contentpane
.componentheading
.inputbox
.button

/**com_newsfeeds**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentheading

/**com_poll**/
.componentheading
.contentpane
.pollstableborder
.sectiontableheader
.smalldark
.button
.inputbox

/**com_registration**/
.componentheading
.contentpane
.inputbox
.button

/**com_search**/
.componentheading
.contentpaneopen
.inputbox
.button
.searchintro
.small
.highlight

/**com_user**/
.componentheading
.inputbox
.button
.row1
.row2

/**com_weblinks**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.tabclass1
.tabclass2
.small
.category
.inputbox

/**com_wrapper**/
.contentpane
.componentheading
.wrapper

/**includes/frontend**/
.moduletable
.newsfeed
.module
.message

/**includes\HTML_toolbar .php**/
.toolbar

/**includes\joomla .php**/
.profiler
.item
.small
.back_button
.buttonheading
.tab-page
.tab
.inputbox

/**includes\joomla .xml .php**/
.paramlist
.editlinktip
.text_area
.inputbox

/**includes\pageNavigation .php**/
.inputbox
.pagenav

/**includes\pathway .php**/
.pathway

/**includes\js\dtree\dtree .js**/
.dtree
.dTreeNode
.node
.clip

/**includes\patTemplate\tmpl\forms .html**/
.message
.tooltip
.tab-page
.tab
.expander

/**mambots\content\mosimage .php**/
.mosimage_caption
.mosimage

/**mambots\content\mospaging .php**/
.pagenavcounter
.pagenavbar
.contenttoc
.toclink

/**mambots\content\mosvote .php**/
.content_rating
.content_vote
.button

/**modules\mod_latestnews .php**/
.latestnews

/**modules\mod_login .php**/
.button
.inputbox

/**modules\mod_mostread .php**/
.mostread

/**modules\mod_mostread .php**/
.poll
.pollstableborder
.button

/**modules\mod_mostread .php**/
.syndicate
.syndicate_text

/**modules\mod_search .php**/
.inputbox
.button
.search

Provided by Compass:

#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1, #voteid2
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.readon:hover
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper

===What are module switches? (or -1 -2 and -3) ===
This is how you apply the switches:

; <nowiki>switch: -1</nowiki>
: Strips all surrounding code from the module.

<source lang="php">
<?php mosLoadModules ( 'user1', -1 ); ?>
</source>

The html code output looks like this:
<source lang="html4strict">
<div class="user1_inner">
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=7&Itemid=2"
class="latestnews">
Example News Item 2
</a>
</li>
</ul>
</div>
</source>

; <nowiki>switch: -2</nowiki>
: Puts the module's title in an h3, and wraps the entire thing in a

<source lang="php">
<?php mosLoadModules ( 'user1', -2 ); ?>
</source>
The html code output looks like this:
<source lang="html4strict">
<div class="moduletable">
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">Example News Item 4
</a>
</li>
</ul>
</div>
</source>

;<nowiki>switch: -3</nowiki>
:Puts the module's title in an h3, and adds several layers of divs that can be used to apply [[CSS]] techniques with [[Rounded corners|rounded corners]]

<source lang="php">
<?php mosLoadModules ( 'user1', -3 ); ?>
</source>
The code output looks like this:
<source lang="html4strict">
<div class="module">
<div>
<div>
<div>
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">
Newsflash 2 </a> </li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</source>

If there is no switch at all:
<source lang="php">
<?php mosLoadModules ( 'user1'); ?>
</source>

The code output looks like this:
<source lang="html4strict">
<table class="moduletable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th valign="top">
Latest News
</th>
</tr>
<tr>
<td>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">
Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</source>

In Joomla! 1.5 each switch has a style associated with it.

switch -3: $style = 'rounded';
switch -2: $style = 'xhtml
switch -1: $stylle = 'raw';
switch 0 :$style = 'table';

===How do I add a position to a template?===
To create a "new" position chose one of the names from the list of positions shown in
Site>[[Template Manager]]>Module Positions

{{JVer|1.0}}

In your template add
<source lang="php">
<?php mosLoadModules ('position_name'); ?>
</source>

You will want to surround it with appropriate html so that it appears where you want it to and with the formatting you want.

{{JVer|1.5}}

===How do I change the image(s) in my template?===
One common [[Template|template]] change is to use your own graphic/image. Simple graphics (not [[Banner|banners]]) are linked in the [[HTML]] file. Simply change the reference to the image of your choice in the HTML file of your template. Do this by, in the [[Back-end|administrative interface]], going to Site>>[[Template Manager]] and then selecting your template. Click the icon for html.

Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.

The images for a given template are generally located in this folder:
/templates/''templatename''/images
(where you substitute the name of the template you are using.)

===How do I collapse an empty position in a template?===
Very often the question is asked on how to collapse a position in any template. Note collapse here means "not show" if no modules are published to these columns.

{{JVer|1.0}}

Here is a method on how to do this as an example with the tremendous popular [[rhuk_solarflare]] template:

open <tt>../templates/rhuk_solarflare_ii/index.php</tt> and find and replace this:
<source lang="php">
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
</source>
with this :
<source lang="php">
<?php
if ( !(mosCountModules( 'left' )) ) {
?>
<div id="content_outer2">
<?
}
else {
?>
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
<?
}
?>
</source>
and save the file.

Then open <tt>../templates/rhuk_solarflare_ii/css/template_css.css</tt> file and add:
<source lang="css">
#content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 800px;
}
</source>

Save and your left column now will collapse when you don't publish anything to it!

This method you can multiply to any template if you try to follow the logic of the code!

{{JVer|1.5}}

===CSS Text/Font Resizing (A+ A-) on Joomla Template===

{{JVer|1.0}}

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is. So for those of you wanting it laid out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread:

*Step 1 - download joomla.org's font style switcher file ([http://demo.joomla.org/1.5/templates/beez/javascript/md_stylechanger.js md_stylechanger.js])
*Step 2 - put that file somewhere in the folder of the template you are using
*Step 3 - put A+, A-, and Reset images in your template's image folder
*Step 4 - paste the following code snippet somewhere in your template's index.php file


<source lang="php">
<?php
// shortcut of template URL used in src attributes
$template_url = $mosConfig_live_site .'/templates/'. $mainframe->getTemplate();
?>
<script type="text/javascript" language="javascript"
src="<?php echo $template_url; ?>/____1____"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $template_url; ?>/images/____2____" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $template_url; ?>/images/____3____" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $template_url; ?>/images/____4____" alt="" border="0" />
</a>
</source>

* Step 5: Do all of the following:
*# Replace ____1____ with the location in your template folder where you saved the .js file
*# Replace ____2____ with the name of your A+ image
*# Replace ____3____ with the name of your A- image
*# Replace ____4____ with the name of your Reset image

*Step 6: Do one of the following:
** Bask in the awesomeness that is session font resizing
** Start figuring out why the buttons do nothing (either because your site doesn't use style classes, or because I messed up somewhere)

===Can I remove the "Powered by Joomla!" message?===

Yes. You may remove that message, which is in <tt>footer.php</tt>. You may however '''not''' remove copyright and license information from the source code.

===How do I make it so my modules are laid out horizontally?===

See [[Administration_FAQs#How_do_I_control_whether_modules_are_vertically_or_horizontally_arranged.3F | How do I control whether modules are vertically or horizontally arranged?]]

[[Category:FAQ]]

J1.5:Template FAQs

2012-01-03T22:54:48Z

Timj: /* How do I add a position to a template? */

{{review}}

===What is a template?===

The [[Template]] controls the overall look and layout of your site. It provides the framework that brings together common elements, [[Modules|modules]] and [[Components|components]] as well as providing the [[CSS|cascading style sheet]] for your site. Both the [[Front-end]] (Site) and the [[Back-end]] (Administrator) of your site have templates.

When Joomla! is installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also [[Joomla! 1.5 Template Tutorials Project|make your own template]].

Templates are managed with the [[Template Manager]], which is located on the site menu on the Back-end of your site.

The following may be helpful in understanding templates:
* http://help.joomla.org/content/view/474/153/

===How do I install a new template?===
{{JVer|1.0}}

In the [[Back-end]] of the site, go to Installers>>Templates-Site (or Templates-Administrator if you are installing an administrator template).

[[Image:Installing_templates.JPG]]

Browse for the template zip file and click ''Upload File'' and ''Install''.

[[Image:Uploading_templates.JPG ]]

Alternatively, you can install from a directory.

To make the new template the default template for your site, go to the [[Template Manager]] (Site>>Template Manager>>Site Templates).
You should see the name of your new template on the list of templates.

Select it and click on the default icon if you want it to be the default icon for your site.

{{JVer|1.5}}

In the [[Back-end]] of the site, go to [[Extension]]s>>[[Installing_an_extension|Install/Uninstall]].

[[Image:Extension_install_1_5.png]]

Browse for the template zip file and click Upload File and Install.

Alternatively, you can install from a directory or URL.

To make the new template the default template for your site, select it and click the default icon (star).

===How do I modify a template?===
Templates are just a series of xml, php, html and image files that are stored in the templates directory of your site.
You can edit these files or you can use the editing interface available in the [[Template Manager]].

{{JVer|1.0}}

In the [[Back-end]], select Site>>Template Manager>>Site Templates.

Select the template you wish to modify.

{{JVer|1.5}}

In the [[Back-end]], select Site>>[[Extension]]s>>Templates.
Select the template you wish to modify.
Click the edit icon.

{{JVer|1.0}} and {{JVer|1.05}}
You are given the choice of editing "html" and "css."

[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
[[HTML]] is the file that controls where positions are defined and positioned. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the tempate designer.

One common change is to use your own graphic/image. Graphics are linked to in the HTML file. Simply change the reference to the image of your choice. Keep in mind that it if it is a different size than the original image this may change the appearance of the site in unexpected ways.

===How do I assign a template to a specific page?===

In Joomla! there is a default template, but you can assign other templates to specific "pages" that are defined by menu links.

To assign a template to a page, you must first make sure that there is a direct menu link to the page.

{{JVer|1.0}}
* Go to Site>>[[Template Manager]]>>Site Templates
* Select the template you wish to assign.
* Click on the assign icon.
* On the right, there will be a list with all of the possible pages the template can be assigned to. Select one or more pages and save.

{{JVer|1.5}}

* Go to [[Extension]]s>>[[Template Manager]]
* Select the Template and click the edit icon (or click the template name)
* In the left column, change "None" to "Select from List."
* Select the links you want to apply the template to.
* Save

Note that you cannot assign the default template to individual pages.

'''Understanding'''

The templating system uses the [[ItemID]] to determine which template to show. ItemIDs are created when you create a menu link. This is why only menu items are shown in the list of pages to which you can assign templates.

===What are the base Joomla! CSS styles?===

{{JVer|1.0}}

Provided by Haaris

/**com_contact**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentpane
.contentheading
.contact_email
.inputbox
.button

/**com_content**/
.componentheading
.contentpane
.contentdescription
.inputbox
.sectiontableheader
.sectiontableentry1
.sectiontableentry2
.sectiontablefooter
.blogsection
.contentpaneopen
.article_seperator
.contentheading
.contentpagetitle
.buttonheading
.small
.createdate
.modifydate
.readon
.pagenav_prev
.pagenav_next
.adminform
.button
.text_area
.blog
.blog_more

/**com_login**/
.contentpane
.componentheading
.inputbox
.button

/**com_newsfeeds**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentheading

/**com_poll**/
.componentheading
.contentpane
.pollstableborder
.sectiontableheader
.smalldark
.button
.inputbox

/**com_registration**/
.componentheading
.contentpane
.inputbox
.button

/**com_search**/
.componentheading
.contentpaneopen
.inputbox
.button
.searchintro
.small
.highlight

/**com_user**/
.componentheading
.inputbox
.button
.row1
.row2

/**com_weblinks**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.tabclass1
.tabclass2
.small
.category
.inputbox

/**com_wrapper**/
.contentpane
.componentheading
.wrapper

/**includes/frontend**/
.moduletable
.newsfeed
.module
.message

/**includes\HTML_toolbar .php**/
.toolbar

/**includes\joomla .php**/
.profiler
.item
.small
.back_button
.buttonheading
.tab-page
.tab
.inputbox

/**includes\joomla .xml .php**/
.paramlist
.editlinktip
.text_area
.inputbox

/**includes\pageNavigation .php**/
.inputbox
.pagenav

/**includes\pathway .php**/
.pathway

/**includes\js\dtree\dtree .js**/
.dtree
.dTreeNode
.node
.clip

/**includes\patTemplate\tmpl\forms .html**/
.message
.tooltip
.tab-page
.tab
.expander

/**mambots\content\mosimage .php**/
.mosimage_caption
.mosimage

/**mambots\content\mospaging .php**/
.pagenavcounter
.pagenavbar
.contenttoc
.toclink

/**mambots\content\mosvote .php**/
.content_rating
.content_vote
.button

/**modules\mod_latestnews .php**/
.latestnews

/**modules\mod_login .php**/
.button
.inputbox

/**modules\mod_mostread .php**/
.mostread

/**modules\mod_mostread .php**/
.poll
.pollstableborder
.button

/**modules\mod_mostread .php**/
.syndicate
.syndicate_text

/**modules\mod_search .php**/
.inputbox
.button
.search

Provided by Compass:

#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1, #voteid2
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.readon:hover
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper

===What are module switches? (or -1 -2 and -3) ===
This is how you apply the switches:

; <nowiki>switch: -1</nowiki>
: Strips all surrounding code from the module.

<source lang="php">
<?php mosLoadModules ( 'user1', -1 ); ?>
</source>

The html code output looks like this:
<source lang="html4strict">
<div class="user1_inner">
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=7&Itemid=2"
class="latestnews">
Example News Item 2
</a>
</li>
</ul>
</div>
</source>

; <nowiki>switch: -2</nowiki>
: Puts the module's title in an h3, and wraps the entire thing in a

<source lang="php">
<?php mosLoadModules ( 'user1', -2 ); ?>
</source>
The html code output looks like this:
<source lang="html4strict">
<div class="moduletable">
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">Example News Item 4
</a>
</li>
</ul>
</div>
</source>

;<nowiki>switch: -3</nowiki>
:Puts the module's title in an h3, and adds several layers of divs that can be used to apply [[CSS]] techniques with [[Rounded corners|rounded corners]]

<source lang="php">
<?php mosLoadModules ( 'user1', -3 ); ?>
</source>
The code output looks like this:
<source lang="html4strict">
<div class="module">
<div>
<div>
<div>
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">
Newsflash 2 </a> </li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</source>

If there is no switch at all:
<source lang="php">
<?php mosLoadModules ( 'user1'); ?>
</source>

The code output looks like this:
<source lang="html4strict">
<table class="moduletable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th valign="top">
Latest News
</th>
</tr>
<tr>
<td>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">
Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</source>

In Joomla! 1.5 each switch has a style associated with it.

switch -3: $style = 'rounded';
switch -2: $style = 'xhtml
switch -1: $stylle = 'raw';
switch 0 :$style = 'table';

===How do I add a position to a template?===
To create a "new" position chose one of the names from the list of positions shown in
Site>[[Template Manager]]>Module Positions

{{JVer|1.0}}

In your template add
<source lang="php">
<?php mosLoadModules ('position_name'); ?>
</source>

You will want to surround it with appropriate html so that it appears where you want it to and with the formatting you want.

{{JVer|1.5}}

===How do I change the image(s) in my template?===
One common [[Template|template]] change is to use your own graphic/image. Simple graphics (not [[Banner|banners]]) are linked in the [[HTML]] file. Simply change the reference to the image of your choice in the HTML file of your template. Do this by, in the [[Back-end|adminsitrative interface]], going to Site>>[[Template Manager]] and then selecting your template. Click the icon for html.

Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.

The images for a given template are generally located in this folder:
/templates/''templatename''/images
(where you substitute the name of the template you are using.)

===How do I collapse an empty position in a template?===
Very often the question is asked on how to collapse a position in any template. Note collapse here means "not show" if no modules are published to these columns.

{{JVer|1.0}}

Here is a method on how to do this as an example with the tremendous popular [[rhuk_solarflare]] template:

open <tt>../templates/rhuk_solarflare_ii/index.php</tt> and find and replace this:
<source lang="php">
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
</source>
with this :
<source lang="php">
<?php
if ( !(mosCountModules( 'left' )) ) {
?>
<div id="content_outer2">
<?
}
else {
?>
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
<?
}
?>
</source>
and save the file.

Then open <tt>../templates/rhuk_solarflare_ii/css/template_css.css</tt> file and add:
<source lang="css">
#content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 800px;
}
</source>

Save and your left column now will collapse when you don't publish anything to it!

This method you can multiply to any template if you try to follow the logic of the code!

{{JVer|1.5}}

===CSS Text/Font Resizing (A+ A-) on Joomla Template===

{{JVer|1.0}}

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is. So for those of you wanting it laid out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread:

*Step 1 - download joomla.org's font style switcher file ([http://demo.joomla.org/1.5/templates/beez/javascript/md_stylechanger.js md_stylechanger.js])
*Step 2 - put that file somewhere in the folder of the template you are using
*Step 3 - put A+, A-, and Reset images in your template's image folder
*Step 4 - paste the following code snippet somewhere in your template's index.php file


<source lang="php">
<?php
// shortcut of template URL used in src attributes
$template_url = $mosConfig_live_site .'/templates/'. $mainframe->getTemplate();
?>
<script type="text/javascript" language="javascript"
src="<?php echo $template_url; ?>/____1____"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $template_url; ?>/images/____2____" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $template_url; ?>/images/____3____" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $template_url; ?>/images/____4____" alt="" border="0" />
</a>
</source>

* Step 5: Do all of the following:
*# Replace ____1____ with the location in your template folder where you saved the .js file
*# Replace ____2____ with the name of your A+ image
*# Replace ____3____ with the name of your A- image
*# Replace ____4____ with the name of your Reset image

*Step 6: Do one of the following:
** Bask in the awesomeness that is session font resizing
** Start figuring out why the buttons do nothing (either because your site doesn't use style classes, or because I messed up somewhere)

===Can I remove the "Powered by Joomla!" message?===

Yes. You may remove that message, which is in <tt>footer.php</tt>. You may however '''not''' remove copyright and license information from the source code.

===How do I make it so my modules are laid out horizontally?===

See [[Administration_FAQs#How_do_I_control_whether_modules_are_vertically_or_horizontally_arranged.3F | How do I control whether modules are vertically or horizontally arranged?]]

[[Category:FAQ]]

J1.5:Template FAQs

2012-01-03T22:53:03Z

Timj: /* What are module switches? (or -1 -2 and -3) */

{{review}}

===What is a template?===

The [[Template]] controls the overall look and layout of your site. It provides the framework that brings together common elements, [[Modules|modules]] and [[Components|components]] as well as providing the [[CSS|cascading style sheet]] for your site. Both the [[Front-end]] (Site) and the [[Back-end]] (Administrator) of your site have templates.

When Joomla! is installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also [[Joomla! 1.5 Template Tutorials Project|make your own template]].

Templates are managed with the [[Template Manager]], which is located on the site menu on the Back-end of your site.

The following may be helpful in understanding templates:
* http://help.joomla.org/content/view/474/153/

===How do I install a new template?===
{{JVer|1.0}}

In the [[Back-end]] of the site, go to Installers>>Templates-Site (or Templates-Administrator if you are installing an administrator template).

[[Image:Installing_templates.JPG]]

Browse for the template zip file and click ''Upload File'' and ''Install''.

[[Image:Uploading_templates.JPG ]]

Alternatively, you can install from a directory.

To make the new template the default template for your site, go to the [[Template Manager]] (Site>>Template Manager>>Site Templates).
You should see the name of your new template on the list of templates.

Select it and click on the default icon if you want it to be the default icon for your site.

{{JVer|1.5}}

In the [[Back-end]] of the site, go to [[Extension]]s>>[[Installing_an_extension|Install/Uninstall]].

[[Image:Extension_install_1_5.png]]

Browse for the template zip file and click Upload File and Install.

Alternatively, you can install from a directory or URL.

To make the new template the default template for your site, select it and click the default icon (star).

===How do I modify a template?===
Templates are just a series of xml, php, html and image files that are stored in the templates directory of your site.
You can edit these files or you can use the editing interface available in the [[Template Manager]].

{{JVer|1.0}}

In the [[Back-end]], select Site>>Template Manager>>Site Templates.

Select the template you wish to modify.

{{JVer|1.5}}

In the [[Back-end]], select Site>>[[Extension]]s>>Templates.
Select the template you wish to modify.
Click the edit icon.

{{JVer|1.0}} and {{JVer|1.05}}
You are given the choice of editing "html" and "css."

[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
[[HTML]] is the file that controls where positions are defined and positioned. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the tempate designer.

One common change is to use your own graphic/image. Graphics are linked to in the HTML file. Simply change the reference to the image of your choice. Keep in mind that it if it is a different size than the original image this may change the appearance of the site in unexpected ways.

===How do I assign a template to a specific page?===

In Joomla! there is a default template, but you can assign other templates to specific "pages" that are defined by menu links.

To assign a template to a page, you must first make sure that there is a direct menu link to the page.

{{JVer|1.0}}
* Go to Site>>[[Template Manager]]>>Site Templates
* Select the template you wish to assign.
* Click on the assign icon.
* On the right, there will be a list with all of the possible pages the template can be assigned to. Select one or more pages and save.

{{JVer|1.5}}

* Go to [[Extension]]s>>[[Template Manager]]
* Select the Template and click the edit icon (or click the template name)
* In the left column, change "None" to "Select from List."
* Select the links you want to apply the template to.
* Save

Note that you cannot assign the default template to individual pages.

'''Understanding'''

The templating system uses the [[ItemID]] to determine which template to show. ItemIDs are created when you create a menu link. This is why only menu items are shown in the list of pages to which you can assign templates.

===What are the base Joomla! CSS styles?===

{{JVer|1.0}}

Provided by Haaris

/**com_contact**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentpane
.contentheading
.contact_email
.inputbox
.button

/**com_content**/
.componentheading
.contentpane
.contentdescription
.inputbox
.sectiontableheader
.sectiontableentry1
.sectiontableentry2
.sectiontablefooter
.blogsection
.contentpaneopen
.article_seperator
.contentheading
.contentpagetitle
.buttonheading
.small
.createdate
.modifydate
.readon
.pagenav_prev
.pagenav_next
.adminform
.button
.text_area
.blog
.blog_more

/**com_login**/
.contentpane
.componentheading
.inputbox
.button

/**com_newsfeeds**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentheading

/**com_poll**/
.componentheading
.contentpane
.pollstableborder
.sectiontableheader
.smalldark
.button
.inputbox

/**com_registration**/
.componentheading
.contentpane
.inputbox
.button

/**com_search**/
.componentheading
.contentpaneopen
.inputbox
.button
.searchintro
.small
.highlight

/**com_user**/
.componentheading
.inputbox
.button
.row1
.row2

/**com_weblinks**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.tabclass1
.tabclass2
.small
.category
.inputbox

/**com_wrapper**/
.contentpane
.componentheading
.wrapper

/**includes/frontend**/
.moduletable
.newsfeed
.module
.message

/**includes\HTML_toolbar .php**/
.toolbar

/**includes\joomla .php**/
.profiler
.item
.small
.back_button
.buttonheading
.tab-page
.tab
.inputbox

/**includes\joomla .xml .php**/
.paramlist
.editlinktip
.text_area
.inputbox

/**includes\pageNavigation .php**/
.inputbox
.pagenav

/**includes\pathway .php**/
.pathway

/**includes\js\dtree\dtree .js**/
.dtree
.dTreeNode
.node
.clip

/**includes\patTemplate\tmpl\forms .html**/
.message
.tooltip
.tab-page
.tab
.expander

/**mambots\content\mosimage .php**/
.mosimage_caption
.mosimage

/**mambots\content\mospaging .php**/
.pagenavcounter
.pagenavbar
.contenttoc
.toclink

/**mambots\content\mosvote .php**/
.content_rating
.content_vote
.button

/**modules\mod_latestnews .php**/
.latestnews

/**modules\mod_login .php**/
.button
.inputbox

/**modules\mod_mostread .php**/
.mostread

/**modules\mod_mostread .php**/
.poll
.pollstableborder
.button

/**modules\mod_mostread .php**/
.syndicate
.syndicate_text

/**modules\mod_search .php**/
.inputbox
.button
.search

Provided by Compass:

#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1, #voteid2
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.readon:hover
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper

===What are module switches? (or -1 -2 and -3) ===
This is how you apply the switches:

; <nowiki>switch: -1</nowiki>
: Strips all surrounding code from the module.

<source lang="php">
<?php mosLoadModules ( 'user1', -1 ); ?>
</source>

The html code output looks like this:
<source lang="html4strict">
<div class="user1_inner">
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=7&Itemid=2"
class="latestnews">
Example News Item 2
</a>
</li>
</ul>
</div>
</source>

; <nowiki>switch: -2</nowiki>
: Puts the module's title in an h3, and wraps the entire thing in a

<source lang="php">
<?php mosLoadModules ( 'user1', -2 ); ?>
</source>
The html code output looks like this:
<source lang="html4strict">
<div class="moduletable">
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">Example News Item 4
</a>
</li>
</ul>
</div>
</source>

;<nowiki>switch: -3</nowiki>
:Puts the module's title in an h3, and adds several layers of divs that can be used to apply [[CSS]] techniques with [[Rounded corners|rounded corners]]

<source lang="php">
<?php mosLoadModules ( 'user1', -3 ); ?>
</source>
The code output looks like this:
<source lang="html4strict">
<div class="module">
<div>
<div>
<div>
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">
Newsflash 2 </a> </li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</source>

If there is no switch at all:
<source lang="php">
<?php mosLoadModules ( 'user1'); ?>
</source>

The code output looks like this:
<source lang="html4strict">
<table class="moduletable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th valign="top">
Latest News
</th>
</tr>
<tr>
<td>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">
Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</source>

In Joomla! 1.5 each switch has a style associated with it.

switch -3: $style = 'rounded';
switch -2: $style = 'xhtml
switch -1: $stylle = 'raw';
switch 0 :$style = 'table';

===How do I add a position to a template?===
To create a "new" position chose one of the names from the list of positions shown in
Site>[[Template Manager]]>Module Positions

{{JVer|1.0}}

In your template add
<source lang="php">
<?php mosLoadModules ('position_name'); ?>
</source>

You will want to surround it with approprate html so that it appears where you want it to and with the formatting you want.

{{JVer|1.5}}

===How do I change the image(s) in my template?===
One common [[Template|template]] change is to use your own graphic/image. Simple graphics (not [[Banner|banners]]) are linked in the [[HTML]] file. Simply change the reference to the image of your choice in the HTML file of your template. Do this by, in the [[Back-end|adminsitrative interface]], going to Site>>[[Template Manager]] and then selecting your template. Click the icon for html.

Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.

The images for a given template are generally located in this folder:
/templates/''templatename''/images
(where you substitute the name of the template you are using.)

===How do I collapse an empty position in a template?===
Very often the question is asked on how to collapse a position in any template. Note collapse here means "not show" if no modules are published to these columns.

{{JVer|1.0}}

Here is a method on how to do this as an example with the tremendous popular [[rhuk_solarflare]] template:

open <tt>../templates/rhuk_solarflare_ii/index.php</tt> and find and replace this:
<source lang="php">
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
</source>
with this :
<source lang="php">
<?php
if ( !(mosCountModules( 'left' )) ) {
?>
<div id="content_outer2">
<?
}
else {
?>
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
<?
}
?>
</source>
and save the file.

Then open <tt>../templates/rhuk_solarflare_ii/css/template_css.css</tt> file and add:
<source lang="css">
#content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 800px;
}
</source>

Save and your left column now will collapse when you don't publish anything to it!

This method you can multiply to any template if you try to follow the logic of the code!

{{JVer|1.5}}

===CSS Text/Font Resizing (A+ A-) on Joomla Template===

{{JVer|1.0}}

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is. So for those of you wanting it laid out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread:

*Step 1 - download joomla.org's font style switcher file ([http://demo.joomla.org/1.5/templates/beez/javascript/md_stylechanger.js md_stylechanger.js])
*Step 2 - put that file somewhere in the folder of the template you are using
*Step 3 - put A+, A-, and Reset images in your template's image folder
*Step 4 - paste the following code snippet somewhere in your template's index.php file


<source lang="php">
<?php
// shortcut of template URL used in src attributes
$template_url = $mosConfig_live_site .'/templates/'. $mainframe->getTemplate();
?>
<script type="text/javascript" language="javascript"
src="<?php echo $template_url; ?>/____1____"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $template_url; ?>/images/____2____" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $template_url; ?>/images/____3____" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $template_url; ?>/images/____4____" alt="" border="0" />
</a>
</source>

* Step 5: Do all of the following:
*# Replace ____1____ with the location in your template folder where you saved the .js file
*# Replace ____2____ with the name of your A+ image
*# Replace ____3____ with the name of your A- image
*# Replace ____4____ with the name of your Reset image

*Step 6: Do one of the following:
** Bask in the awesomeness that is session font resizing
** Start figuring out why the buttons do nothing (either because your site doesn't use style classes, or because I messed up somewhere)

===Can I remove the "Powered by Joomla!" message?===

Yes. You may remove that message, which is in <tt>footer.php</tt>. You may however '''not''' remove copyright and license information from the source code.

===How do I make it so my modules are laid out horizontally?===

See [[Administration_FAQs#How_do_I_control_whether_modules_are_vertically_or_horizontally_arranged.3F | How do I control whether modules are vertically or horizontally arranged?]]

[[Category:FAQ]]

J1.5:Template FAQs

2012-01-03T22:51:37Z

Timj: /* What are module switches? (or -1 -2 and -3) */

{{review}}

===What is a template?===

The [[Template]] controls the overall look and layout of your site. It provides the framework that brings together common elements, [[Modules|modules]] and [[Components|components]] as well as providing the [[CSS|cascading style sheet]] for your site. Both the [[Front-end]] (Site) and the [[Back-end]] (Administrator) of your site have templates.

When Joomla! is installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also [[Joomla! 1.5 Template Tutorials Project|make your own template]].

Templates are managed with the [[Template Manager]], which is located on the site menu on the Back-end of your site.

The following may be helpful in understanding templates:
* http://help.joomla.org/content/view/474/153/

===How do I install a new template?===
{{JVer|1.0}}

In the [[Back-end]] of the site, go to Installers>>Templates-Site (or Templates-Administrator if you are installing an administrator template).

[[Image:Installing_templates.JPG]]

Browse for the template zip file and click ''Upload File'' and ''Install''.

[[Image:Uploading_templates.JPG ]]

Alternatively, you can install from a directory.

To make the new template the default template for your site, go to the [[Template Manager]] (Site>>Template Manager>>Site Templates).
You should see the name of your new template on the list of templates.

Select it and click on the default icon if you want it to be the default icon for your site.

{{JVer|1.5}}

In the [[Back-end]] of the site, go to [[Extension]]s>>[[Installing_an_extension|Install/Uninstall]].

[[Image:Extension_install_1_5.png]]

Browse for the template zip file and click Upload File and Install.

Alternatively, you can install from a directory or URL.

To make the new template the default template for your site, select it and click the default icon (star).

===How do I modify a template?===
Templates are just a series of xml, php, html and image files that are stored in the templates directory of your site.
You can edit these files or you can use the editing interface available in the [[Template Manager]].

{{JVer|1.0}}

In the [[Back-end]], select Site>>Template Manager>>Site Templates.

Select the template you wish to modify.

{{JVer|1.5}}

In the [[Back-end]], select Site>>[[Extension]]s>>Templates.
Select the template you wish to modify.
Click the edit icon.

{{JVer|1.0}} and {{JVer|1.05}}
You are given the choice of editing "html" and "css."

[[CSS]] stands for cascading style sheets. This controls many elements of the look and feel of your site.
[[HTML]] is the file that controls where positions are defined and positioned. Other than that, it should be noted that, with a few exceptions, what is in the .css and what is in the HTML files largely depends on the approach of the tempate designer.

One common change is to use your own graphic/image. Graphics are linked to in the HTML file. Simply change the reference to the image of your choice. Keep in mind that it if it is a different size than the original image this may change the appearance of the site in unexpected ways.

===How do I assign a template to a specific page?===

In Joomla! there is a default template, but you can assign other templates to specific "pages" that are defined by menu links.

To assign a template to a page, you must first make sure that there is a direct menu link to the page.

{{JVer|1.0}}
* Go to Site>>[[Template Manager]]>>Site Templates
* Select the template you wish to assign.
* Click on the assign icon.
* On the right, there will be a list with all of the possible pages the template can be assigned to. Select one or more pages and save.

{{JVer|1.5}}

* Go to [[Extension]]s>>[[Template Manager]]
* Select the Template and click the edit icon (or click the template name)
* In the left column, change "None" to "Select from List."
* Select the links you want to apply the template to.
* Save

Note that you cannot assign the default template to individual pages.

'''Understanding'''

The templating system uses the [[ItemID]] to determine which template to show. ItemIDs are created when you create a menu link. This is why only menu items are shown in the list of pages to which you can assign templates.

===What are the base Joomla! CSS styles?===

{{JVer|1.0}}

Provided by Haaris

/**com_contact**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentpane
.contentheading
.contact_email
.inputbox
.button

/**com_content**/
.componentheading
.contentpane
.contentdescription
.inputbox
.sectiontableheader
.sectiontableentry1
.sectiontableentry2
.sectiontablefooter
.blogsection
.contentpaneopen
.article_seperator
.contentheading
.contentpagetitle
.buttonheading
.small
.createdate
.modifydate
.readon
.pagenav_prev
.pagenav_next
.adminform
.button
.text_area
.blog
.blog_more

/**com_login**/
.contentpane
.componentheading
.inputbox
.button

/**com_newsfeeds**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.category
.small
.contentheading

/**com_poll**/
.componentheading
.contentpane
.pollstableborder
.sectiontableheader
.smalldark
.button
.inputbox

/**com_registration**/
.componentheading
.contentpane
.inputbox
.button

/**com_search**/
.componentheading
.contentpaneopen
.inputbox
.button
.searchintro
.small
.highlight

/**com_user**/
.componentheading
.inputbox
.button
.row1
.row2

/**com_weblinks**/
.componentheading
.contentpane
.contentdescription
.sectiontableheader
.tabclass1
.tabclass2
.small
.category
.inputbox

/**com_wrapper**/
.contentpane
.componentheading
.wrapper

/**includes/frontend**/
.moduletable
.newsfeed
.module
.message

/**includes\HTML_toolbar .php**/
.toolbar

/**includes\joomla .php**/
.profiler
.item
.small
.back_button
.buttonheading
.tab-page
.tab
.inputbox

/**includes\joomla .xml .php**/
.paramlist
.editlinktip
.text_area
.inputbox

/**includes\pageNavigation .php**/
.inputbox
.pagenav

/**includes\pathway .php**/
.pathway

/**includes\js\dtree\dtree .js**/
.dtree
.dTreeNode
.node
.clip

/**includes\patTemplate\tmpl\forms .html**/
.message
.tooltip
.tab-page
.tab
.expander

/**mambots\content\mosimage .php**/
.mosimage_caption
.mosimage

/**mambots\content\mospaging .php**/
.pagenavcounter
.pagenavbar
.contenttoc
.toclink

/**mambots\content\mosvote .php**/
.content_rating
.content_vote
.button

/**modules\mod_latestnews .php**/
.latestnews

/**modules\mod_login .php**/
.button
.inputbox

/**modules\mod_mostread .php**/
.mostread

/**modules\mod_mostread .php**/
.poll
.pollstableborder
.button

/**modules\mod_mostread .php**/
.syndicate
.syndicate_text

/**modules\mod_search .php**/
.inputbox
.button
.search

Provided by Compass:

#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1, #voteid2
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.readon:hover
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper

===What are module switches? (or -1 -2 and -3) ===
This is how you apply the switches:

; <nowiki>switch: -1</nowiki>
: Strips all surrounding code from the module.

<source lang="php">
<?php mosLoadModules ( 'user1', -1 ); ?>
</source>

The html code output looks like this:
<source lang="html4strict">
<div class="user1_inner">
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=7&Itemid=2"
class="latestnews">
Example News Item 2
</a>
</li>
</ul>
</div>
</source>

; <nowiki>switch: -2</nowiki>
: Puts the module's title in an h3, and wraps the entire thing in a

<source lang="php">
<?php mosLoadModules ( 'user1', -2 ); ?>
</source>
The outputted html code looks like this:
<source lang="html4strict">
<div class="moduletable">
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">Example News Item 4
</a>
</li>
</ul>
</div>
</source>

;<nowiki>switch: -3</nowiki>
:Puts the module's title in an h3, and adds several layers of divs that can be used to apply [[CSS]] techniques with [[Rounded corners|rounded corners]]

<source lang="php">
<?php mosLoadModules ( 'user1', -3 ); ?>
</source>
The code output looks like this:
<source lang="html4strict">
<div class="module">
<div>
<div>
<div>
<h3>Latest News</h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">
Newsflash 2 </a> </li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</source>

If there is no switch at all:
<source lang="php">
<?php mosLoadModules ( 'user1'); ?>
</source>

The code output looks like this:
<source lang="html4strict">
<table class="moduletable" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th valign="top">
Latest News
</th>
</tr>
<tr>
<td>
<ul class="latestnews">
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=4&Itemid=9"
class="latestnews">Newsflash 3
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=2&Itemid=9"
class="latestnews">
Newsflash 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=3&Itemid=9"
class="latestnews">Newsflash 2
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=6&Itemid=2"
class="latestnews">
Example News Item 1
</a>
</li>
<li class="latestnews">
<a href="http://localhost/projects/1112rc2/index.php?option=com_content&task=view&id=9&Itemid=2"
class="latestnews">
Example News Item 4
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</source>

In Joomla! 1.5 each switch has a style associated with it.

switch -3: $style = 'rounded';
switch -2: $style = 'xhtml
switch -1: $stylle = 'raw';
switch 0 :$style = 'table';

===How do I add a position to a template?===
To create a "new" position chose one of the names from the list of positions shown in
Site>[[Template Manager]]>Module Positions

{{JVer|1.0}}

In your template add
<source lang="php">
<?php mosLoadModules ('position_name'); ?>
</source>

You will want to surround it with approprate html so that it appears where you want it to and with the formatting you want.

{{JVer|1.5}}

===How do I change the image(s) in my template?===
One common [[Template|template]] change is to use your own graphic/image. Simple graphics (not [[Banner|banners]]) are linked in the [[HTML]] file. Simply change the reference to the image of your choice in the HTML file of your template. Do this by, in the [[Back-end|adminsitrative interface]], going to Site>>[[Template Manager]] and then selecting your template. Click the icon for html.

Keep in mind that if it is a different size than the original image this may change the appearance of the site in unexpected ways.

The images for a given template are generally located in this folder:
/templates/''templatename''/images
(where you substitute the name of the template you are using.)

===How do I collapse an empty position in a template?===
Very often the question is asked on how to collapse a position in any template. Note collapse here means "not show" if no modules are published to these columns.

{{JVer|1.0}}

Here is a method on how to do this as an example with the tremendous popular [[rhuk_solarflare]] template:

open <tt>../templates/rhuk_solarflare_ii/index.php</tt> and find and replace this:
<source lang="php">
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
</source>
with this :
<source lang="php">
<?php
if ( !(mosCountModules( 'left' )) ) {
?>
<div id="content_outer2">
<?
}
else {
?>
<div id="left_outer">
<div id="left_inner">
<?php mosLoadModules ( 'left', -2 ); ?>
</div>
</div>
<div id="content_outer">
<?
}
?>
</source>
and save the file.

Then open <tt>../templates/rhuk_solarflare_ii/css/template_css.css</tt> file and add:
<source lang="css">
#content_outer2 {
padding: 0px;
margin-top: 0px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 800px;
}
</source>

Save and your left column now will collapse when you don't publish anything to it!

This method you can multiply to any template if you try to follow the logic of the code!

{{JVer|1.5}}

===CSS Text/Font Resizing (A+ A-) on Joomla Template===

{{JVer|1.0}}

I recognize that there are some of you who are sort of scratching your heads wondering how to get from where your site is now to where joomla.org's is. So for those of you wanting it laid out all the way, here's a more detailed instruction set that summarizes and extends what has already been said through the course of this thread:

*Step 1 - download joomla.org's font style switcher file ([http://demo.joomla.org/1.5/templates/beez/javascript/md_stylechanger.js md_stylechanger.js])
*Step 2 - put that file somewhere in the folder of the template you are using
*Step 3 - put A+, A-, and Reset images in your template's image folder
*Step 4 - paste the following code snippet somewhere in your template's index.php file


<source lang="php">
<?php
// shortcut of template URL used in src attributes
$template_url = $mosConfig_live_site .'/templates/'. $mainframe->getTemplate();
?>
<script type="text/javascript" language="javascript"
src="<?php echo $template_url; ?>/____1____"></script>
<a href="index.php" title="Increase size" onclick="changeFontSize(1);return false;">
<img src="<?php echo $template_url; ?>/images/____2____" alt="" border="0" />
</a>
<a href="index.php" title="Decrease size" onclick="changeFontSize(-1);return false;">
<img src="<?php echo $template_url; ?>/images/____3____" alt="" border="0" />
</a>
<a href="index.php" title="Revert styles to default" onclick="revertStyles(); return false;">
<img src="<?php echo $template_url; ?>/images/____4____" alt="" border="0" />
</a>
</source>

* Step 5: Do all of the following:
*# Replace ____1____ with the location in your template folder where you saved the .js file
*# Replace ____2____ with the name of your A+ image
*# Replace ____3____ with the name of your A- image
*# Replace ____4____ with the name of your Reset image

*Step 6: Do one of the following:
** Bask in the awesomeness that is session font resizing
** Start figuring out why the buttons do nothing (either because your site doesn't use style classes, or because I messed up somewhere)

===Can I remove the "Powered by Joomla!" message?===

Yes. You may remove that message, which is in <tt>footer.php</tt>. You may however '''not''' remove copyright and license information from the source code.

===How do I make it so my modules are laid out horizontally?===

See [[Administration_FAQs#How_do_I_control_whether_modules_are_vertically_or_horizontally_arranged.3F | How do I control whether modules are vertically or horizontally arranged?]]

[[Category:FAQ]]