Difference between revisions of "More advanced Joomla! templates"

From Joomla! Documentation

m (update transclusion call)
m (hmm, php essentials in a template article? removing)
Line 11: Line 11:
 
==Horizontal centering==
 
==Horizontal centering==
 
{{:Horizontal centering}}
 
{{:Horizontal centering}}
 
==PHP essentials==
 
{{:PHP essentials}}
 
  
 
==Adding images==
 
==Adding images==

Revision as of 17:17, 29 September 2013

DocType header to use[edit]

<translate> Current thinking is that HTML5 should be used for Joomla! templates.
Set your template to html5 output: </translate>

	$doc = JFactory::getDocument();
	$doc->setHtml5(true);

<translate>===Recommended DocTypes=== </translate> {{:Recommended DocTypes/<translate> en</translate>}} <translate>===References about DocTypes=== </translate> {{:References about DocTypes/<translate> en</translate>}}


Setting up page width[edit]

Some templates provide the opportunity to select the type of page width, through its parameter settings. In case this does not meet the requirements, the template manager also allows the modification of the cascading style sheets. It is in those files, usually with the extension .css, that most, if not all, of the style (graphical) attributes are defined.

What is CSS?[edit]

CSS stands for Cascading Style Sheet. HTML tags specify the graphical flow of the elements, be it text, images or flash animations, on a web page. CSS allows us to define the appearances of those HTML tags with their content, so that other pages may adhere to. This brings consistency throughout a website. The cascading effect stipulates that the style of a tag (parent) are inherited by other tags (children) inside it.

CSS Statements[edit]

The definition of an HTML tag is:

tagname { attribute: value; attribute: value; }

Tagname may be any HTML tag but for the sake of setting up page width what is of interest to us is an HTML tag that gives structure to a web page. Some web pages are constructed from div tags while others are constructed on table tags. Usually, the tag has a width attribute. You set up a page width by varying the value of the width attribute.

Sometimes, HTML tags are not defined directly. They are given an id or a class name and CSS refers to those specific tags by their ids or their class names.

The definition of an id in CSS is:

#idname { attribute: value; attribute: value; }

while the definition of a class in CSS is:

.classname { attribute: value; attribute: value; }

Specifying a page width means modifying the value of the width attribute of any of these definitions.

For example, the syntax could be by not including the parenthesis,

div {width:50%;}

This will make the width of the element 50% of its initial value.

Value of the width attribute[edit]

The value of the width attribute may be in pixels or percentage. Pixels are fixed values; hence in this case, the width does not vary according to window resizing or changing screen resolutions. Percentage usually means that the width is a fraction of the width of its container. If we have a screen resolution of 1024 pixels by 768 pixels and our page width is set to 80% of the browser window container, our page would be approximately 820 pixels (80% of 1024) provided that the window browser is open at its fullest.

About CSS page layouts[edit]

About CSS page layouts

Horizontal centering[edit]

Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

For the first example, let's say you have a horizontal menu at the top of your page that you want centered in your layout. You would do it with a block of code in the linked CSS file:

#horz_menu {
   margin: auto;
   width: 800px;
   height: 25px;
}

The auto value in the margin attribute centers the item, so this would create a menu area that is 800 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in.

If you need to add some margin space above and below the menu and still keep it centered you would adjust the code:

#horz_menu {
   margin: 20px auto 20px auto;
   width: 800px;
   height: 25px;
}

This would add 20 pixels of space on the top and bottom of the menu while keeping the left and right margin in a centered mode.

The second example is when you simply want to center text, in which case you just add the text-align code.

#horz_menu a {
   padding: .75em 0 .52em 0;
   font-size: 0.8em;
   font-weight: bold;
   color: #0033CC;
   background-color: transparent;
   text-align: center;
}

This would cause any links within the horz_menu div tag of the HTML code to be centered in the horizontal menu. They would also have .75em of padding above and .52em of padding below them.

These same techniques work for the overall page layout as well. Let's say you want the shell content area of your page to be 900 pixels wide and to be centered on the page and that you want the headline to be centered within it. Your CSS code would look like this:

#page_container {
   margin: auto;
   width: 900px;
   background-color: #FFFFFF;
   border: 1pt solid #660000;
}
#page_container h1 {
   margin: 50px 0 20px 0 ;
   font-size: 1.25em;
   font-weight: bold;
   color: #0033CC;
   background-color: transparent;
   text-align: center;
}

This would create a page that has a main content box centered in the browser window with a white background and a brown border.

Any text inside a h1 tag that is inside the page_container div tag in the HTML code of the page would also be centered inside that main content box.

Of course the example above is simplified for demonstration and you would have more structure involved (left column, right column, etc).

So as you can see, horizontal centering for structural items is achieved with the margin attribute whereas horizontal centering for text items is achieved using the text-align attribute.

Adding images[edit]

Joomla! 
2.5

<translate> These are the methods available for uploading images to your Joomla! website.

Upload Using Media Manager[edit]

</translate> <translate> The simplest way to add images is to upload them from your computer using the Media Manager. First, of course, you have to download the image onto your computer and be able to find it. Then, from the Control Panel (back-end administrative interface) navigate to Content  Media Manager.

On the left is a directory tree, with the root directory "Media". This corresponds to the default "images" directory, yoursite/joomla/images. Pick a subdirectory where you want the image located, or else do nothing to upload the image to the default images directory.

At the top left of the page click on "Upload". Then, you'll see Upload box. Click "Browse" to locate the image on your computer, then "Start Upload" to upload the file to the server. </translate>

<translate>=== FTP ===

Of course, you can upload images to a server using any standard FTP client. You might find this handier for adding images to template directories; however, if you have FTP set up, you probably don't need an explanation of how to add an image. Also, many server administration panels such as Cpanel and Plesk have upload capabilities.</translate>

<translate>=== Extensions ===

There are several extensions available from the Joomla Extensions Directory which can upload images.</translate>


Declaring module positions[edit]

<translate> The templateDetails.xml file contains all the installation and core information for a template. In order for module positions to be available for selection in the Module Manager, the positions must be declared in the templateDetails.xml file of the template.

Module Elements in templateDetails.xml[edit]

In the file, the sub-element <positions> along with its sub-elements <position> define the locations available for each module position supported by the template. Here is a brief list of the commonly used names for the various module positions and how they are declared.</translate>

<positions>
  <position>top</position>
  <position>left</position>
  <position>right</position>
  <position>bottom</position>
  <position>banner</position>
  <position>syndicate</position>
  <position>footer</position>
  <position>user1</position>
  <position>user2</position>
  <position>user3</position>
  <position>user4</position>
  <position>debug</position>
</positions>

<translate> Although these are commonly used, it is up to the template developer to choose both a module position name and the accompanying display layout.</translate>

<translate> The addition of module positions as displayed above, is implemented in between the <positions> and </positions> tags. In between those tags in the templateDetails.xml file, add the name of the module position in between a set of <position> and </position> tags.</translate>

<translate> You can add and define new module positions and give them any name you like, but it is recommended that you support at least those shown in the example above. This is so that some level of consistency is maintained when switching templates or using multiple templates on a single site.

Use and Implementation[edit]

A Joomla! template displays a set of modules added to a specific position using the <jdoc:include /> statement shown below:</translate>

<translate><!--T:16-->
<jdoc:include type="modules" name="name of module position" style="xhtml" /></translate>

<translate> For further information about <jdoc:include /> code and how to use it, see jdoc statements.

See also[edit]

</translate>

Customising the way modules are displayed</translate>

Counting modules in a given module position</translate>

Counting modules in multiple module positions</translate>

Applying custom module chrome</translate>

<translate></translate>

Finding module positions on any given page[edit]

<translate> To get a visual indication of all module positions used on a page you can follow this procedure:</translate>

<translate>

  • In the Backend, go to Administrator  Extensions  Templates. Then select Options. Set Preview Module Positions to Enabled. Finish with Save and Close.</translate>

<translate>

  • Navigate to the Website page you wish to see the module positions for in your browser.</translate>
  • <translate>

Click into the URL field in your browser.</translate> <translate>

  • Look for any "parameters" at the end of the URL. These are separated from the main part of the URL by a question mark. For example, in the URL https://mydomain.com/index.php?id=17, the id=17 is a parameter.</translate>

<translate>

  • If there are no parameters, append ?tp=1 to the URL and press Return. For example, https://mydomain.com/index.php?tp=1.</translate>

<translate>

  • If there are already parameters in the URL, append &tp=1 to the URL and press Return. For example, https://mydomain.com/index.php?id=17&tp=1.</translate>

<translate>

  • The module positions will be outlined in red.</translate>

<translate> Note that in some circumstances there may be module positions available that are not outlined in red. This can happen when a template defines those module positions as conditional on there being modules enabled in that position. If there are no modules enabled in that position, the template may adapt and the position will not be visible.</translate>


Changing the site favicon[edit]

[[Image:Favicon-<translate> en</translate>.png|450px|right]]

<translate> Changing your website's favicon is a relatively easy task. </translate>

<translate>

  1. Create a 16x16 pixel image. You may use graphic software such as Photoshop, Gimp, Paint.net or Windows Paint. Alternatively, you can also use an online tool such as http://antifavicon.com/

</translate> <translate>

  1. Convert to ico format using free online sites such as:

</translate> <translate>

  1. The file you created in this way will have the extension .ico. Copy the file to the /joomla/templates/<your template> directory and name it favicon.ico.

</translate> <translate>

  1. Open a browser. Do you see your new icon? If so, congratulations. If not, that doesn't necessarily mean you did anything wrong. Browsers are designed to minimize data traffic, so they don't refresh the favicon every time they show a page. Even refreshing the page (F5) won't help. So you need to refresh more thoroughly:
    • Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
    • IE: hold Ctrl while clicking Refresh, or press Ctrl-F5;
    • Konqueror: simply click the Reload button, or press F5;
    • Opera users may need to completely clear their cache in Tools→Preferences.
    • Chrome: Shift-F5
    • If this doesn't work you will need to delete the temporary internet files and the history and then open your page again. Or delete your favicon, refresh the browser with F5, then upload the favicon

</translate>

<translate>

My favicon is in another location[edit]

</translate> <translate> Some templates contain code that redirects the browser to another directory or another icon file. To determine where your new favicon should be, examine http://yoursite.com/templates/your_template/index.php and look for code that contains the text <link rel="shortcut icon". There you will find the directory and the name of the icon file. Copy your icon to that place and give it the the name that link is pointing to (you might want to backup the old file). Make sure you set the security correctly such that you webserver has access to that file. Look at the example below. </translate>

<translate><!--T:9-->
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/favicon.ico" /></translate>

<translate> If you don't want to just change the favicon.ico file in its respective template directory you can find the reference to the favicon.ico file in the html.php document. The path is "........\libraries\joomla\document\html\html.php". This should prevent the icon from toggling if you use </translate>

<translate><!--T:11-->
<link rel="shortcut icon" href="http://yoursite.com/templates/your_template/icon/youricon.ico" /></translate>

<translate> in the template html and you don't remove the favicon.ico file. (why call the icon twice?)

From the html.php </translate>

// Try to find a favicon by checking the template and root folder
		$path = $directory . DS;
		$dirs = array( $path, JPATH_BASE . DS );
		foreach ($dirs as $dir )
		{
			$icon =   $dir . 'favicon.ico';
			if (file_exists( $icon ))
			{
				$path = str_replace( JPATH_BASE . DS, '', $dir );
				$path = str_replace( '\\', '/', $path );
				$this->addFavicon( JURI::base(true).'/'.$path . 'favicon.ico' );
				break;''