How to convert an XHTML layout in a Joomla template?

In this article we can be, starting from an existing layout, XHTML, create a template for Joomla in a few easy steps.

We will use the layout corporate / business created by Sara and resumed later also by Justin in an article that explains how to cut and export the layout, Justin always has subsequently transformed the home page in XHTML and CSS layout.

If you want to see the final result, abbaimo already put on-line live preview with an area reserved for customers (user: demo password: demo).

Some considerations before starting

Not having had experience with the use of framework 960 Grid System i created the same layout implemented in a traditional manner.

In this article you’ll find available for download, in addition to Joomla template complete a form (we will see later what it is), and layout XHTML / CSS I used.

If you wish to follow this article in practice, I suggest you download it right away.

download
Versione: 1.0
Pubblicato: 30 June 2010
Dimensione: 432.22 kB
Download: YourCorporateJoomlaTemplate

I assume that you have read the previous articles How to make a Joomla template” first and second part.

If the layout is well done, it takes very little. That is why I decided to add a little ‘pepper in this article have to get ready to redefine the structure layout of a module. In this way they also consider this particular procedure.

But first things first.

Creating the template folder

First, create the folder of your template. Our template will be called “yiwcorporate.

Inside, create folders:

struttra dell cartelle

The installation file

Now preparing the file templateDetails.xml necessary to properly install the template. I established three locations:

  • top navigation clear navigation;
  • login module as we also see how to make a panel of authentication to access a restricted area;

user1 will use to enter the module for managing the particular content of the main page (we will see later what it is).

<?xml  version="1.0" encoding="utf-8"?>

    <install version="1.5"  type="template">
    <name>yiwcorporate</name>
    <version>1.0.0</version>
    <creationDate>Apr  2010</creationDate>
    <author>Sara Presenti, Giustino Borzachiello, Maurizio Tarchini</author>
    <authorEmail>info@yourinspirationweb.com</authorEmail>
    <authorUrl>http://www.yourinspirationweb.com</authorUrl>
    <copyright>2010 Your Inspiration Web</copyright>
    <license>GNU/GPL version 2</license>
    <description>Template powered by Your Inspiration Web</description>

    <positions>
        <position>top_navigation</position>
        <position>login_module</position>
        <position>user1</position>
    </positions>

</install>

Note: If we want our template is installed by the administrative panel (directly uploading the zip file), we also show the exact location of all files that make it up this way:

<files>
    <filename>index.php</filename>
    <filename>images/logo.png</filename>
    <eccetera></eccetera>
</files>

Copy the images

We copy images (which are in the folder img XHTML layout we are using) in the folder images in our templates.

cartella immagini

Copy the style sheet

Now copy the original style sheet “base.css” folder css of our templates and rinominiamolo in template.css. Apriamolo and change the paths.

The original layout we are starting to use the folder img, while we use the folder images. You must always assess the change routes when performing such an operation.

The template file

Begin to set the template file. We create the file index.php in the root folder of the template and begin to set the header as we have seen:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo  $this->language; ?>" lang="<?php echo $this->language;  ?>">
<head>
    <jdoc:include type="head" />
    <link  href="templates/system/css/general.css" rel="stylesheet" type="text/css"  />
    <link href="templates/<?php echo  $this->template ?>/css/template.css" rel="stylesheet"  type="text/css" />
</head>

</html>

Now copy the body of our layout image in the template file and then change the paths of pictures from “img / “ to “templates / yiwcorporate / images / “.

Also set the correct link on the logo, using the property baseurl, which returns the url of the site and therefore the home page.

At this point the file index.php is as follows:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo  $this->language; ?>" lang="<?php echo $this->language;  ?>">
<head>
    <jdoc:include type="head" />
    <link  href="templates/system/css/general.css" rel="stylesheet" type="text/css"  />
    <link href="templates/<?php echo  $this->template ?>/css/template.css" rel="stylesheet"  type="text/css" />
</head>

<body>
    <div id="top">
        <div id="logo">
            <a href="<?php echo $this->baseurl; ?>"><img  src="templates/yiwcorporate/images/logo.png" border="0"  alt="Logo" /></a>
        </div>
    </div>
    <div  id="navigation">
        <div id="top_navigation">
            <ul id="top_nav">
                <li><a href="#" id="home">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Services</a></li>
                <li><a  href="#">Partner</a></li>
                <li><a href="#">Customer</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Affiliate</a></li>
            </ul>
        </div>
    </div>
    <div id="featured">
        <div id="header">
            <div id="slogan">
                <div id="slogan-inner">
                    <p>We are a <em>young</em> financial agency. <br  />Ti offriamo qualit&agrave; fiducia e garanzie per un business  innovativo e moderno. <br /><em>Your Inspiration  Corporate</em>, tutto intorno a te.</p>
                </div>
            </div>
        </div>
    </div>
    <div  id="content">
        <div  id="col1">
            <img src="templates/yiwcorporate/images/contoYIW.jpg" width="300"  height="116" alt="Il conto bancoYourInspiration" />
            <h2>Conto <span>YourInspiration</span></h2>
            <p>Il conto bancoYourInspiration ti permette di risparmiare il  <strong>10% sul canone annuo</strong> e di fruttare subito  lo <strong>0,5%</strong> del deposito. Flessibile,  conveniente e stabile: scopri le nostre condizioni.</p>
        </div>
        <div id="col2">
            <img src="templates/yiwcorporate/images/prestitoYIW.jpg" width="300"  height="116" alt="Il conto bancoYourInspiration" />
            <h2>Prestiti <span>YourInspiration</span></h2>
            <p>Pensionati, dipendenti statali ma anche disoccupati, studenti e  casalinghe. I prestiti Your Inspiration ti regalano indipendenza  economica e libert&agrave; finanziaria con <strong>rate a  partire da soli 45 euro</strong>.</p>
        </div>
        <div id="col3">
            <img src="templates/yiwcorporate/images/mutuoYIW.jpg" width="300"  height="116" alt="Il conto bancoYourInspiration" />
            <h2>Mutui <span>YourInspiration</span></h2>
            <p>Il mutuo Your Inspiration a tasso agevolato offre numerosi  <strong>incentivi per le giovani coppie</strong> e per chi  ha finalmente scelto di investire su un immobile. <a  href="#">Richiedi ora un consulto gratuito</a> e senza  impegno.</p>
        </div>
    </div>
    <div  id="footer-outer">
        <div  id="footer">
            <p><a href="#">Your Inspiration Corporate</a> -  Banking & Financial solution - P.iva 012345678</p>
            <p>Terms and conditions - Privacy policy - Contact us</p>
        </div>
    </div>
</body>
</html>

All right. Now we can set yiwcorporate as a template by default administrative panel and check for proper output.

screenshot template

The result is correct. Obviously this is useless, but it is good imported from static layout so you can see and verify everything in its place.

Now we can begin to incorporate the dynamic components in the template.

Insert navigation

Completely remove the listing that contains the navigation. In its place we place the module we defined as “top_navigation“in this way (the positioning of modules in the template is explained in detail in”How to make a Joomla template (first part)“)

<div id="navigation">
    <div  id="top_navigation">
        <jdoc:include type="modules"  name="top_navigation" style="" />
    </div>
</div>

Now, in the administrative panel, go to modules-> New and choose the module menu. Give it a name and put it in top_navigation.

Bind the parameters to an existing menu.

I use menus and content that we used for previous articles. And now watch the result:

navigazione sbagliata

It is wrong. Are all aligned on the left navigation, written in yellow and vertically.

As we have seen, Joomla has its way of representing the navigation, then view the code for how to intervene.

<div id="navigation">
    <div  id="top_navigation">
        <ul class="menu">
            <li id="current" class="active item11"><a  href="http://localhost/cms/"><span>HOME</span></a></li>
            <li class="item12"><a  href="/cms/index.php/pagina-1"><span>Page  1</span></a></li>
            <li class="item13"><a  href="/cms/index.php/pagina-2"><span>Page  2</span></a></li>
            <li class="item14"><a  href="/cms/index.php/pagina-3"><span>Page  3</span></a></li>
        </ul>
    </div>
</div>

We can deduce that the result is not ‘correct in that the tag ul layout of our home had an id ‘top_nav, but now in the code generated dynamically by Joomla has a class called “Menu“.

We then modify the style sheet by replacing # top_nav with . menu.

Now let us make the current page is displayed with the background image due to the class “active“.

.menu  li.active a:link span, .menu li.active a:visited span{
    display:inline-block;
    height:27px;
    line-height:27px;
    width:69px;
    background:  url("../images/bg_nav_item.jpg") 0 0 no-repeat;
}

Delete this line and now no longer needed: indicate current page in the layout of origin, which we have already set in the previous step.

#top_nav #home {
    background: #A9BAC1 url("../images/bg_nav_item.jpg") 0 0 no-repeat;
}

Insert content

The three columns represent the content of our layouts are part of the main page, so the best thing is to insert a form “custom html” to display only the home page and then enter the location of the content.

The management modules go on again and then choose “Custom HTML“. We give a name to the module and put it in user1. Show it only on the home page and then cut from the template file the section on three columns, cut it and content it in the form (in HTML mode!).

And now add the user1 module position (in which we included in the form “custom html”) and contained in the spreadsheet template:

<div id="content">
    <jdoc:include type="modules" name="user1" style="" />
    <div></div>
    <jdoc:include type="component"  />
</div>

In this way, the three columns will be present only the main page. This is because in the assignment menu we decided to show only the HOME.

The three columns will be followed dal’eventuale page content (in the live preview I have reversed the sequence.) Note that between form and content div I inserted a blank, to prevent possible coaching content columns.

Or you could create an ad hoc module for the chance to address some data that may vary over time. As in the following:

This module (mod_corporate) you find in the download is ready for installation. The module already contains all the layout of three columns. You can simply replace it in the user1 module “custom html“we have seen before.

I want an area reserved for customers. How do I?

Suppose that our corporate YIW should make available to its customers a secure area where you can see such documents. Let’s see how to implement the login form to obtain such a result.

First, add the module position in the template:

<div id="top">
    <div id="logo">
        <a href="<?php echo $this->baseurl;  ?>"><img src="templates/YIWcorporate/images/logo.png"  border="0" alt="Logo"></a>
        <div  id="login">
            <jdoc:include type="modules" name="login_module"  style="" />
        </div>
    </div>
</div>

As you can see we have added the position for “login_module. In the style sheet put it on the right, on the navigation:

#login{
    width: 410px;
    left: 520px;
    top:  -50px;
    position: relative;
}

Now, the administrative panel, go to management module-> new and choose the form login. Give it a name and give the right position at “login_module.

Look at the result:

modulo login sbagliato

A disaster!

If we analyze the product code we realize that we can hardly get what we want just working on the stylesheet. Should change the structure of the layout module. In this respect, now I’ll let the secret.

How to change the layout structure of a module or component?

From the root folder of Joomla go into modules and then in mod_login and finally in tmpl. In this folder we will find a file called default.php. Apriamolo.

We ignore the parts in PHP (although it is often easy to guess their function).As you can see this is the template that determines how the login form is structured.

We could modify this file directly but would be a mistake for three reasons:

  1. The amendment would cover all templates and this could have unpredictable effects.
  2. The first characteristic of a template is the portability, then all you need to be kept in the same folder as the template.
  3. An update of Joomla may overwrite our changes.

So we see the correct procedure.

In our template folder (yiwcorporate) create the folder html. This is a standard name that indicates to Joomla that we intend to redefine the layout of one or more modules or components.

Inside the folder html create the folder mod_login. As you may have guessed, we use exactly the same name of the folder module which we redefine the layout.

Inside this folder, copy the file default.php we’ve seen before.

From now Joomla uses this file to define the layout of the login form, and this allows us to work very quiet.

Now we need to modify it as removing the “remember me“, “password forgotten” and so on. Remove the label field. As for the form fields so that we are contained within tags span tag instead of the p (that will not break).Finally we write the title directly before the form.

Modify the class of the logout button from button to button logout.

Now if we try to refresh the page, we see that the result is much closer to expectations.

modulo login modificato

Now we can finally work on the style sheet to get the desired result.

Define fields in general:

#login  input{
    width: 150px;
    height: 18px;
    border: 1px solid #D4D4D4;
    color: gray;
}

So specifically what username’s and password:

input#modlgn_username{
    background: #E9E9E9 url("../images/user1.png") 0px 0 no-repeat;
    padding-bottom: 1px;
    padding-left: 22px;
}

input#modlgn_passwd{
    background: #E9E9E9 url("../images/lock.png") 0px 0 no-repeat;
    padding-bottom: 1px;
    padding-left: 22px;
}

Now the button to login and logout:

#login  input.button{
    width: 45px;
    height: 23px;
    cursor: pointer;
}

#login  input.button_logout{
    width: 55px;
    height: 23px;
    margin-top: 20px;
    margin-left: 320px;
    cursor: pointer;
}

And finally the title:

p#login_name{
    font-size: 80%;
    color: gray;
    top: -8px;
    position: relative;
}

And the authentication module to access the customer is done.

Now just create a user-level “registered” for each client that will access the section reserved.

In the configuration of the module, we can enter as parameter the page where the user will be redirected after successful login.

In this case we chose the page that customers access level set as “registered” in the article parameters. In doing so you can access this page only if authenticated. We choose the level “registered “because it requires authentication but does not allow changes in content.

Conclusions

In this series of three articles we saw how to create from scratch a simple template for Joomla, and later as importing any XHTML template on this platform. At the end of this article we have also seen the procedures of “override” necessary to redefine the layout of a component or module. We now have the basic tools to build a site with this CMS.

If you were to reveal a substantial interest in this subject in the future it will certainly investigate further. Maybe you want to know how to create a module or component?

Finally, I was also interested in demonstrating what was stated at the beginning of the first article in this series, or that may be created by Joomla qualiasi type of template. The layout Corporate / Business it was definitely not born to become a template Joomla but few passages that made him abbaimo with all its benefits. For example how long it would take to add and manage a secure area with a traditional site?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Maurizio is married to the triad PHP - MySql - Apache and, not enough, he has a lover called jQuery. He has a blog where he tries to describe in detail all of "his lovers". His real specialty is the realization of large business application, altough he never refuses the commitment of a website.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

9 comments

  1. Carlos
  2. er1c
  3. Ciselec
  4. Ciselec

Trackback e pingback

  1. Tweets that mention How to convert an XHTML layout in a Joomla template? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Web RSS News and Tom Bangham, V. Tavares (E-Goi). V. Tavares (E-Goi) …

Leave a Reply

Current day month ye@r *