J1.5

Difference between revisions of "Template FAQs"

From Joomla! Documentation

Line 565: Line 565:
  
 
===How do I add a position to a template?===
 
===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
 +
 +
In your template add
 +
 +
  <?php mosLoadModules ( 'position_name'); ?>
 +
 +
 +
 +
You will want to surround it with approprate html so that it appears where you want it to and with the formatting you want.
 +
 
===How do I change the image(s) in my template?===
 
===How do I change the image(s) in my template?===
 
===How do I collapse an empty position in a template?===
 
===How do I collapse an empty position in a template?===

Revision as of 11:40, 19 January 2008

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

What is a template?[edit]

A template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for your site. Both the front end and the backend 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 make your own template.

Templates are managed with the template manager, which is located on the site menu on the backed (administrator) 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?[edit]

1.0

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

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

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.


1.5

In the backend (admin) of the site, go to Extensions>>Install/Uninstall.

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

Alternatively, you can install from a directory.

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?[edit]

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.


1.0

In the administration interface (backend), select Site>>Template Manager>>Site Templates.

Select the template you wish to modify.


1.5

In the administration interface (backend), select Site>>Extensions>>Templates. Select the template you wish to modify. Click the edit icon.


both 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 largely depends on the approach of the tempate designer.

One common change is to use your own graphic/image. Graphics are linked 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?[edit]

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.

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.

1.5

  • Go to Extension>>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?[edit]

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)[edit]

(needs to be fixed so that html does not render)

This is how you apply the switches:


switch: -1

Strips all surrounding code from the module.

Code:

<?php mosLoadModules ( 'user1', -1 ); ?>


The outputted html code looks like this:



Code:

switch: -2 Puts the module's title in a h3, and wraps the entire thing in a

Code:

<?php mosLoadModules ( 'user1', -2 ); ?>

The outputted html code looks like this:

Code:

Latest News

switch: -3 Puts the module's title in a h3, and ads several layers of divs that can be used to apply CSS techniques with rounded corners

Code:

<?php mosLoadModules ( 'user1', -3 ); ?>

The outputted code looks like this:

Code:

If there is no switch at all:

Code:

<?php mosLoadModules ( 'user1'); ?>

The outputted code looks like this:

Code:

<tbody> </tbody>
     Latest News


How do I add a position to a template?[edit]

To create a "new" position chose one of the names from the list of positions shown in site>template manager>module positions

In your template add

 <?php mosLoadModules ( 'position_name'); ?>


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

How do I change the image(s) in my template?[edit]

How do I collapse an empty position in a template?[edit]

CSS Text/Font Resizing (A+ A-) on Joomla Template[edit]

Can I remove the "Powered by Joomla!" message?[edit]