Bien souvent les titres des articles sont trop long, ce qui rend leur affichage imposant dans un blog multi-colonnes. Sans compter la césure qui n'est jamais à l'endroit adéquat.

Pour illustrer mon propos, voici un exemple avec un titre de ce site :

Exemple de titre sur 2 lignes

En bonus, je vous montrerais 2 autres astuces que j'utilise pour le titre des articles :

  • signaler un nouvel article par une petite image (l'étoile jaune sur le triangle rouge)
  • mettre un lien sur le titre, uniquement si le lien "Lire la suite" existe. Cela permet de faire une courte news en interdisant l'affichage pleine page. Une autre utilisation est de faire une news pour annoncer la mise à jour d'un ancien article avec un lien vers celui-ci et non l'introtext de la la news.

Pour obtenir ce résultat, il va falloir surcharger plusieurs fichiers.

Mais auparavant, il faut trouver un moyen d'indiquer comment et où scinder le titre en 2 parties.
Même si l'on surcharge tous les fichiers impliqués dans l'affichage du titre, il n'est pas dit qu'un composant tiers l'utilise.
Il faut donc un caractère :

  • peu utilisé
  • simple à saisir au clavier
  • accepté dans le champ titre
  • substitué lors de la création de l'alias
  • qui ne choque pas s'il est visible

Le symbole title (~) répond à ces critères, mais vous êtes libre d'en choisir un autre.

Donc le titre de mon exemple est saisi de la façon suivante : "LM-Filter ~ Contenu sous conditions"

Les surcharges

Maintenant que l'on a défini le moyen d'indiquer la position du passage à la ligne, il va falloir s'attaquer à la modification du code

Le titre pour blog est \layouts\joomla\content\blog_style_default_item_title.php
et pour blog en vedette : \components\com_content\views\featured\tmpl\default_item.php

Ajustement CSS

h2.item-title {
    line-height: 0.9;
    padding: 10px 5px !important;
}

Téléchargement

J'ai préparé un zip pour les utilisateurs de Cassiopeia.
Il suffit de copier son contenu dans votre dossier cassiopeia

Print Friendly and PDF