joomla avec div et sans tableaux

17/09/10

Comme nous l'avons vu lors d'un précédent article concernant les bases de la création de template joomla , les articles sont affichés grâce à l'utilisation de la balise . Par défaut, cette balise renvoie du code qui utilise les tableaux pour la mise en forme.

Si vous cherchez à changer cet état de fait, vous allez devoir vous confronter à ce que l'on appelle l'"override". Pour l'instant, je ne sais pas bien ce que c'est mais j'ai cru comprendre que cela voulait dire que l'on pouvait ré-écrire certains fichiers.

Concernant les articles, le fichier qui met en page en utilisant les tableaux se trouve ici : components/com_content/views/article/tmpl/default.php

Il vous suffit donc de remplacer les chères table tr td par des div

  • apprenez le html
  • contentez vous de la mise en page avec des tableaux par défaut
  • utilisez des templates qui ne renvoient pas de tableaux (beez par exemple)

Il y a une façon de faire en sorte que ce fichier(default.php) soit ré-écrit au sein de chaque template :

  1. ajoutez au même niveau qu'index.php un fichier component.php du type que celui utilisé pour le template "beez" :

    <?php
    /**
    * @copyright    Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
    * @license        GNU/GPL, see LICENSE.php
    * Joomla! is free software. This version may have been modified pursuant
    * to the GNU General Public License, and as distributed it includes or
    * is derivative of works licensed under the GNU General Public License or
    * other free or open source software licenses.
    * See COPYRIGHT.php for copyright notices and details.
    */

    // no direct access
    defined( '_JEXEC' ) or die( 'Restricted access' );
    ?>
    <!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="" lang="" dir="">
    <head>
    <jdoc:include type="head" />

    </head>
    <body class="contentpane">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </body>
    </html>

  2. ajoutez un fichier /www/joomla1.5/templates/temah_1/html/com_content/article/default.php du même type que celui du template beez :

    <?php // no direct access
    defined('_JEXEC') or die('Restricted access');

    $canEdit    = ($this->user->authorize('com_content', 'edit', 'content', 'all') || $this->user->authorize('com_content', 'edit', 'content', 'own'));
    ?>
    <?php if ($this->params->get('show_page_title', 1) && $this->params->get('page_title') != $this->article->title) : ?>
    <div class="componentheading">

    <table class="contentpaneopen">
    <tr>

    <td class="contentheading" width="100%">

    <a href="/" class="contentpagetitle">
    <td align="right" width="100%" class="buttonheading">
    <td align="right" width="100%" class="buttonheading">
    <td align="right" width="100%" class="buttonheading">
    <td align="right" width="100%" class="buttonheading">
    <td align="right" width="100%" class="buttonheading">
    <div class="contentpaneopen">
    <?php echo '<a href="'.JRoute::_(ContentHelperRoute::getSectionRoute($this->article->sectionid)).'">'; ?>


    <?php echo '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->article->catslug, $this->article->sectionid)).'">'; ?>

    <?php if (($this->params->get('show_author')) && ($this->article->author != "")) : ?>

    <div>
    <span class="small">

    <div class="createdate">
    <div >
    <a href="http://" target="_blank">
    <div class="modifydate">
    <span class="article_separator"> </span>
    <?php echo $this->article->event->afterDisplayContent; ?>

  3. Ajoutez dans votre fichier templateDetails.xml les lignes suivantes :

    <files>
    <filename>templateDetails.xml</filename>
    <filename>html/com_content/article/default.php</filename>
    <filename>component.php</filename>
    </files>

Partager sur mes réseaux