web-dev-qa-db-fra.com

Ajouter une classe différente à chaque élément

J'ai un problème avec les titres d'articles longs sur ma page d'accueil. https://imgur.com/NhtkJh

J'ai essayé de le condenser en une ligne en insérant le code HTML/CSS dans des plugins tels que sourcerer ou rokcandy, mais cela pose un problème: le code HTML est également envoyé pour les balises head> title <et> meta <.

J'ai un modèle "jm-lifestyle" qui montre 9 articles sur la page d'accueil. Malheureusement, chaque élément a la même classe, alors j'essaie d'ajouter différentes classes pour chacun d'entre eux.

J'ai trouvé le chemin du fichier php qui montre le titre

composants\com_content\views\sélectionnée\tmpl\default_item.php

<?php if ($params->get('show_title')) : ?>
<h2 class="item-title" itemprop="name">

J'essaie donc d'ajouter une classe différente de h2 de la manière suivante:

<?php
foreach (range('a', 'i') as $letter);
?>
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">

Cependant cela rend item-title_i partout. Je ne connais pas vraiment php, pourriez-vous m'aider à obtenir une autre lettre en neuf paragraphes? Il est important de ne pas être aléatoire. Je voudrais qu'ils restent en ordre alphabétique (ou juste la même chose à chaque fois), afin de pouvoir créer différentes classes CSS pour eux. Sauf si vous avez peut-être un moyen plus simple de le résoudre.

1
jampjamp

Votre sortie doit être dans la boucle foreach:

<?php
foreach (range('a', 'i') as $letter) {
?>
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">
<?php
}
?>

Si vous mettez à jour default_item.php, assurez-vous de le remplacer dans votre modèle. Ne remplacez jamais les fichiers de base ou les modifications risquent d'être perdues lorsque vous corrigez le site.

Je pense que la solution la plus simple consisterait à utiliser le sélecteur nth-child en CSS. Je ne pense pas que vous ayez besoin de mettre à jour le code HTML pour obtenir ce que vous essayez de faire.

Cela dit, votre question semble suggérer une erreur de conception fondamentale, et essayer de résoudre le problème avec du code pourrait vous faire perdre l’esprit. Un CMS doit être dynamique et gérer différentes tailles de contenu. Si vous écrivez un nouveau code chaque fois que vous ajoutez un article, il ne fonctionne pas comme un CMS. Toute décision de conception esthétique qui nuit à la convivialité n'est pas un bon choix de conception. Le fait que les titres ne soient pas alignés ne gênera aucun utilisateur tant que tout le texte est lisible et clair. Si le manque d'alignement vertical vous dérange vraiment, placez-les dans une seule colonne plutôt que dans deux colonnes.

Essayer de trop aligner verticalement à l’époque des conceptions réactives semble une perte de temps.

1
Richard B