[RÉGLÉ] Protostar et affichage de position 8 sur téléphone

[Frisco75]

Bonjour,
Je teste le template Protostar, inclus dans Joomla. Il est pas mal du tout, un seul truc est embetant.
Lorsque l'on met un module en position 8 (colonne à gauche), sur un écran de téléphone le module s'affiche sytematiquement en haut de la page. Sur la plupart des templates commerciaux, il s'affiche en bas, ce qui est très bien lorsque l'on utilise Virtuemart et que l'on veut que ce soient les produits qui s'affichent d'abord et ensuite en dessous le menu dans le module.
Y a t"il un moyen de faire que le module s'affiche toujours en bas de la page ?
Je suis sous Joomla 3.0.6.4
Merci.
François

[Rajoz]

Re : Protostar et affichage de position 8 sur téléphone

Bonjour Frisco75,

Il y a deux méthodes pour que le module en position-8 s'affiche en bas de page sur smartphone.

Les deux méthodes utilisent les classes CSS de Bootstrap. La première méthode est plus simple et sera plus intéressante s'il n'y a qu'un ou deux modules en position-8, la deuxième est un peu plus compliquée et sera plus intéressante s'il y a davantage de modules.

Les classes CSS utilisées sont :

• hidden-phone : pas visible sur smartphone, visible sur tablette et grand écran
• visible-phone : visible sur smartphone, pas visible sur tablette et grand écran

1) Configuration des modules

• dupliquer le module
• modifier les paramètres du 1er module
  • position : position-8
  • paramètres avancés, suffixe de classe CSS : hidden-phone (avec un espace devant)
  
  
• modifier les paramètres du 2ème module
  • position : position-7
  • paramètres avancés, suffixe de classe CSS : visible-phone (avec un espace devant)
  
  
• le même module est visible sur smartphone en position-7 (sous le contenu) et sur grand écran en position-8 (à gauche)

2) Modification du PHP du template

• la modification revient à reproduire dans le template ce qui a été fait dans la 1ère méthode. Les modules en position-8 n'auront pas à être dupliqués/paramétrés.
• le fichier à modifier est templates/protostar/index.php (lignes 155-180)
• ajouter ce qui est en rouge :

<div class="row-fluid">
    <?php if ($this->countModules('position-8')) : ?>
        <!-- Begin Sidebar -->
        <div id="sidebar" class="span3 [COLOR=#ff0000]hidden-phone[/COLOR]">
            <div class="sidebar-nav">
                <jdoc:include type="modules" name="position-8" style="xhtml" />
            </div>
        </div>
        <!-- End Sidebar -->
    <?php endif; ?>
    <main id="content" role="main" class="<?php echo $span; ?>">
        <!-- Begin Content -->
        <jdoc:include type="modules" name="position-3" style="xhtml" />
        <jdoc:include type="message" />
        <jdoc:include type="component" />
        <jdoc:include type="modules" name="position-2" style="none" />
        <!-- End Content -->
    </main>
[COLOR=#ff0000]    <?php if ($this->countModules('position-8')) : ?>
        <!-- Begin Sidebar -->
        <div id="sidebar" class="span3 visible-phone">
            <div class="sidebar-nav">
                <jdoc:include type="modules" name="position-8" style="xhtml" />
            </div>
        </div>
        <!-- End Sidebar -->
    <?php endif; ?>
[/COLOR]    <?php if ($this->countModules('position-7')) : ?>
        <div id="aside" class="span3">
            <!-- Begin Right Sidebar -->
            <jdoc:include type="modules" name="position-7" style="well" />
            <!-- End Right Sidebar -->
        </div>
    <?php endif; ?>
</div>

Note : comme il s'agit d'un fichier natif de Joomla!, il vaut mieux faire une copie du template et travailler sur la copie.

Amicalement,
Rajoz

[Frisco75]

Re : Protostar et affichage de position 8 sur téléphone

Un grand merci, Rajoz, ça marche parfaitement