img-edito-cinnk-magazine-octobre-2015

Octobre

Six interviews, un dossier sur le monitoring, des professionnels et des membres de communautés venant de différents pays...

C'est parti !

Tirer parti du template Joomla! par défaut, Protostar

Nous allons explorer Protostar, le template de site distribué dans le package joomla!. C'est un terrain d'exploration très intéressant car il est équipé de toutes les fonctionnalités de base d'un template joomla, y compris son interface adaptée à tous les formats (mobile, tablette, etc ...). En effet, il a été conçu pour que l'utilisateur débutant du CMS puisse publier un site correct sans trop de compétences PHP, CSS, JavaScript tout en offrant au débutant "confirmé" des pistes sur le développement de templates.

Template Protostar Joomla! 3

Je vais m'adresser ici à un débutant confirmé avec quelques connaissances CSS.

La distribution que nous allons utiliser est celle disponible en français sur joomla.fr

Préliminaires

On va d'abord régler ce qui est possible par l'interface d'administration.

Extensions ->Templates : Styles, puis dans le menu de gauche, cliquer sur Templates.

En cherchant Protostar Détails et fichiers, on arrive sur Templates : Personnaliser, cliquer sur Copier le template, on lui donne un nom, proto2.

En retournant sur Styles dans le gestionnaire de template, on vérifie que le 2e template a bien été créé.

C'est à partir de celui-ci que nous allons travailler. 

Comme Protostar se trouve dans la distribution de base de Joomla, il est écrasé à chaque mise à jour. Cette manip évite de voir disparaitre les modifications apportées.

Premiers réglages

On retourne sur Template : Styles -> proto2

Dans Templates : Modifier le style -> Paramètres avancés, on choisit Fluid Layout, Google Font for Headings, Oui

Astuce n°1, ajouter une feuille CSS

Extensions ->Templates : Styles, puis dans le menu de gauche, cliquer sur Templates.

Chercher proto2 Détails et fichiers, on arrive sur Templates : Personnaliser, cliquer sur index.php.

A partir de là, on peut faire quelques modifications sur la poutre maitresse d'un template Joomla que représente son index.php

±ligne 43, en dessous de la ligne

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');

ajouter la ligne

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');

Enregistrer.

Puis cliquer sur Nouveau Fichier, une fenêtre modale apparait, cliquer sur css,

dans Type de fichier, sélectionner css, 

Nom du fichier, custom

Créer.

Astuce n°2, utiliser correctement les polices Google

On retourne sur index.php par la méthode décrite plus haut.

±ligne 87, remplacer

<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />

par

<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>:300,400,600,700,900' rel='stylesheet' type='text/css' />

Enregistrer.

seblod banner

Astuce n°3, utiliser la règle d'or de l'affichage en 2/3 -1/3

Le template Protostar n'a visiblement pas été créé par des graphistes, dont la première préoccupation est d'assurer l'équilibre d'un visuel, ou le déséquilibre d'ailleurs, mais calculé.

La règle des 2/3-1/3 permet de présenter un affichage équilibré, à la fois du point de vue de l'ordinateur de bureau et de ceux des mobiles/tablettes.

Les développeurs de Bootstrap respectent cette règle en divisant l'espace en 12 parties.

Nous allons donc rééquilibrer Protostar en accordant moins d'espace à la colonne de gauche, celle des articles, et un peu plus d'espace à celle de droite, la colonne des modules.

Dans index.php, ± ligne 49, remplacer :

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span9";
}
else
{
	$span = "span12";
}

par :

// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span7";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
	$span = "span8";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
	$span = "span8";
}
else
{
	$span = "span12";
}

Puis, ± ligne 177, remplacer :

      <?php if ($this->countModules('position-7')) : ?>
        <div id="aside" class="span3">

par :

<?php if ($this->countModules('position-7')) : ?>
                    <div id="aside" class="span4">

Astuce n°4, créer un menu alternatif à celui de Bootstrap avec UIKit

Folcomedia a proposé un tuto sur la possibilité de construire un menu différent du menu d'origine en s'aidant du framework UIKit, développé par Yootheme.

Son intérêt réside dans l'implémentation, en mode responsive, d'un menu en sidebar, sur la gauche, uniquement sur tablettes et mobiles.

Je me base sur ce tuto pour cette astuce n°4.

Télécharger le fichier uikit.php ou copier le fichier à partir du site de Folcomedia.

Conserver ce fichier.

1 - préparer index.php

Depuis l'avant-dernière version de Joomla, la modification apportée à l'emplacement du menu ne convient pas à cette méthode.

On va donc adapter index.php.

± ligne 144, remplacer :

<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
  <div class="navbar pull-left">
   <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </a>
  </div>
<div class="nav-collapse">
  <jdoc:include type="modules" name="position-1" style="none" />
</div>
</nav>
<?php endif; ?>

par :

<?php if ($this->countModules('position-1')) : ?>
    <nav class="navigation" role="navigation">
        <jdoc:include type="modules" name="position-1" style="none" />
    </nav>
<?php endif; ?>

Deux modifications supplémentaires à index.php

1er modif - Lors de mises à jour vers les versions 3.4.x, des styles CSS ont été ajoutés dans index.php. Comme nous voulons avoir la maitrise de l'affichage, je conseille de supprimer aussi ces styles.

± ligne 109 à 121

/*
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: params->get('templateColor'); ?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
*/

2e modif - Pour simplifier la démo, je rajoute un appel à la font Font-Awesome, en dessous de l'appel à la police Google :

<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>:300,400,600,700,900' rel='stylesheet' type='text/css' />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

2 - préparer mod_menu pour une substitution

Extensions ->Templates : Styles, puis dans le menu de gauche, cliquer sur Templates.

Chercher proto2 Détails et fichiers,

on arrive sur Templates : Personnaliser,

cliquer sur Créer des substitutions,

chercher mod_menu dans la liste, cliquer,

le message suivant s'affiche :

Message

Substitution créée dans /templates/proto2/html/mod_menu

Substitution créée avec succès.

La création des fichiers et dossiers nécessaires au processus de substitution de mod_menu étant réalisé, nous retournons dans l'onglet Editeur.

Etape suivante - Attention de respecter l'enchainement de la méthode :

cliquer sur Nouveau fichier

--> Créer ou transférer un nouveau fichier

--> Type de fichier : Sélectionner un type de fichier : PHP

--> Nom du fichier : uikit

--> IMPORTANT - cliquer sur le dossier mod_menu à gauche

--> Créer

Ouvrir le fichier uikit.php présent dans le dossier /mod_menu/.

Copier le contenu du fichier uikit.php précédemment téléchargé. Le coller dans uikit.php.

3 - ajouter les fichiers du framework UIKit JS et CSS nécessaires

Télécharger les fichiers UIKit. Dézipper.

Placer le dossier /uikit/ dans le dossier /media/.

Retourner sur le fichier uikit.php - Extensions->Templates->Templates (au-dessous de Styles)->proto2->html->mod_menu->uikit.php

± ligne 16, ajouter les appels aux fichiers JS et CSS:

defined('_JEXEC') or die;
JHtml::_('stylesheet', 'uikit/uikit.almost-flat.min.css', false, true);
JHtml::_('script', 'uikit/uikit.min.js', false, true);

C'est presque fini, juste un petit ajustement à faire sur les CSS, à placer à la fin de custom.css :

.uk-nav .uk-nav-sub {padding: 5px 0 5px 45px;}
/* MEDIA QUERIES */
@media (max-width: 768px) {
    .uk-navbar-toggle-link{display: inline-block;padding-top: 3%}
}

Tester.

Si tout va bien, le site affiche un menu en sidebar sur tablettes et mobiles.

Astuce n°5, créer un affichage alternatif aux Articles, Catégorie en mode blog, Articles en vedette

Il existe plusieurs solutions pour afficher des articles, une catégorie, des articles en vedette, avec un layout différent de celui imposé par le template.

Ma proposition est assez simple à appliquer mais un peu délicate à mettre en place.

Deux points importants sont à prendre en considération.

Comme la méthode joue sur une manipulation du lien de menu, le module Fil de navigation (mod_breadcrumb) ne retrouve pas ses petits, donc exit le Fil de navigation.

J'ai préparé les fichiers nécessaires à ce tuto, à télécharger ci-dessous :

Ces fichiers ont été prélevés dans le dossier /com_content/ et renommés.

Dézipper.

Placer les fichiers du dossier /article/  dans le dossier /templates/proto2/html/com_content/article

Placer les fichiers du dossier /category/  dans le dossier /templates/proto2/html/com_content/category

Placer les fichiers du dossier /featured/  dans le dossier /templates/proto2/html/com_content/featured

1 - on modifie les fichiers .xml.

Cette action va permettre de repérer l'offre alternative dans le menu déroulant.

* fichier monarticle.xml
dans /templates/proto2/html/com_content/article

± ligne 3, remplacer :

<layout title="com_content_article_view_default_title" option="com_content_article_view_default_option">

par :

<layout title="Mon article" option="Mon article">

* fichier macat.xml
dans /templates/proto2/html/com_content/category

± ligne 3, remplacer :

<layout title="COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">

par :

<layout title="Ma catégorie" option="Ma catégorie">

* fichier envedette.xml
dans /templates/proto-2/html/com_content/featured/envedette.xml

± ligne 3, remplacer :

<layout title="COM_CONTENT_FEATURED_VIEW_DEFAULT_TITLE" option="COM_CONTENT_FEATURED_VIEW_DEFAULT_OPTION">

par :

<layout title="En vedette" option="En vedette">

2 - création d'un lien de menu vers un affichage alternatif

* Après ces petites opérations, rien de plus facile que de créer un lien de menu vers l'affichage alternatif.

Dans le gestionnaire de menu, Nouveau, puis, en cliquant sur Sélection dans Type de lien de Menu, on voit apparaitre cette fenêtre en modal,
avec les liens vers "En vedette", "Ma catégorie", "Mon article" :

Ensuite, si l'on a choisi "En vedette", la sélection s'affiche correctement :

Notez la structure particulière de l'URL :

index.php?option=com_content&view=featured&layout=proto2:envedette

comparée à celle d'un lien de menu principal (vers Accueil) :

index.php?option=com_content&view=featured

Pour sélectionner d'autres catégories, aller sur Affichage, puis sélectionner les catégories :

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Même opération pour les affichages alternatifs d'articles ou de catégorie.

A partir de là, votre imagination vous permettra de jouer sur les CSS, éventuellement le JavaScript ou le PHP, avec une bonne connaissance de l'API Joomla.

Cadeau

Sur envedette.php
dans /templates/proto2/html/com_content/featured/envedette.php,

± ligne 61, remplacer :            

<div class="item column-<?php echo $rowcount;?>
     <?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round((12 / $this->columns));?>"
itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

par :

<div class="item column-<?php echo $rowcount ." cat-$item->category_alias"; ?>
    <?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round((12 / $this->columns));?>"
itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

ou par :

<div class="item column-<?php echo $rowcount ." cat-$item->catid"; ?>
     <?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round((12 / $this->columns));?>"
      itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">

Dans le premier cas, on récupère l'alias de la catégorie à laquelle appartient l'article.

Dans le second, on récupère l'ID de la catégorie à laquelle appartient l'article.

Dans les deux cas, l'information est insérée dans la class CSS  .item de chacun des articles en affichage En vedette. Ce qui permet un "styling" affiné de chacun des articles en affichage En vedette, plus précisément l'introduction.

Voila, c'est fini.

Enjoy.

Notez cet article:
5
Interview de Saurabh Shah Co-organisateur de la pr...
Interview de Helvecio da Silva membre de l'équipe ...

Articles en relation

Commentaires 5

 
Yann Gomiero le jeudi 1 octobre 2015 13:52

Bonjour, pour l'astuce 2, on peut également profiter de ces modifications des polices en ajoutant le dns-prefetch aux google fonts pour le préchargement des polices. Cela apporte un peu de performance, suffisamment significatif pour des outils comme GTMetrix. (Perso je cherche le double A 100% ! http://prntscr.com/8mjfqa )

Bonjour, pour l'astuce 2, on peut également profiter de ces modifications des polices en ajoutant le dns-prefetch aux google fonts pour le préchargement des polices. Cela apporte un peu de performance, suffisamment significatif pour des outils comme GTMetrix. (Perso je cherche le double A 100% ! http://prntscr.com/8mjfqa )
PieceOfCake le jeudi 1 octobre 2015 14:29

Très intéressant, j'ai hâte d'essayer ça en local. Bravo pour le zip, je deviens de plus en plus fainéant : toujours ça de gagné !

Très intéressant, j'ai hâte d'essayer ça en local. Bravo pour le zip, je deviens de plus en plus fainéant : toujours ça de gagné !
ghazal le lundi 5 octobre 2015 12:33

@daneel,
tu parles de cet appel ?
link rel="dns-prefetch" href="//ajax.googleapis.com"
Effectivement, c'est une très bonne idée.
J'aurais dû y penser.

@daneel, tu parles de cet appel ? link rel="dns-prefetch" href="//ajax.googleapis.com" Effectivement, c'est une très bonne idée. J'aurais dû y penser.
micker le jeudi 15 octobre 2015 07:55

hello alors je viens de tester la partie menu side bar
il manque a mon avis : selectionner l'affichage uikit dans le module
par contre j'ai pas l'effet d'ouverture .. et pas d'erreur js ...
tu aurais une idée ?

hello alors je viens de tester la partie menu side bar il manque a mon avis : selectionner l'affichage uikit dans le module par contre j'ai pas l'effet d'ouverture .. et pas d'erreur js ... tu aurais une idée ?
ghazal le mercredi 21 octobre 2015 08:23

Bonjour,
merci de la suggestion.
Est-ce que les scripts JS et les CSS UIKit sont bien chargés ?

Bonjour, merci de la suggestion. Est-ce que les scripts JS et les CSS UIKit sont bien chargés ?
Déjà inscrit ? Connectez-vous ici
Guest
samedi 25 mai 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.