CSS différent selon catégorie de l'article

**lefabdu51** · 24/04/2017, 10h38

Re : CSS différent selon catégorie de l'article

1ere question, combien avez vous de catégories ?

LA technique va consister à créer une surchage de la vue blog, pour adapter les classes css en fonction de la catégorie de l'article. Cela va créer une classe css nommée cat[id de la catégorie] que vous pourrez ensuite personnaliser via css (si l'id de la categorie est 4, alors la cclasse crée sera cat4....).

**p4atch** · 24/04/2017, 10h53

Re : CSS différent selon catégorie de l'article

Je ne les ai pas compté, mais au moins une vingtaine.

C'est la 3e ou 4e fois que j'entends parler de surcharge depuis que j'utilise Joomla, je vais aller me renseigner sur ce sujet.

EDIT : Donc si j'ai compris, la surcharge, c'est uniquement le fait que les dernieres lignes CSS sont prioritaire sur les premieres lignes ?
Je ne savais pas que cela s'apellait ainsi, mais je l'utilisais déjà.

Si la surcharge, c'est uniquement rajouter du CSS en bas de mon fichier, je ne vois pas comment faire pour faire apparaitre des class en fonction de la catégorie.

**pmleconte** · 24/04/2017, 11h15

Re : CSS différent selon catégorie de l'article

Bonjour,

Pour faire des surcharges ou override, cela se passe, en général, au niveau du template.

Quelques articles intéressants sur le sujet

Apprendre Joomla! avec nos tutoriels, livres et formations vidéos

http://cinnk.com/joomla/25/trucs-astuces/petit-guide-pour-debuter-avec-les-surcharges-joomla

Joomla! c'est quoi ? Joomla! est un CMS open source libre et gratuit qui permet de construire, et de maintenir, des sites web sans...

surcharge joomla 3 (Overrides)

http://www.st42.fr/astuce-joomla/29-surcharge-joomla-3

Studio 42 web création: Site internet Joomla 2.5. & 3. Addons, modules,composant, développement & design.

Pitchbox

https://www.web-eau.net/tutoriels-joomla?catid=0&id=212

Apprenez et maîtrisez le CMS Joomla grâce à cette base de connaissance Joomla 3 et Joomla 4 contenant une centaine de tutoriels gratuits et en français

Pascal

**lefabdu51** · 24/04/2017, 11h21

Re : CSS différent selon catégorie de l'article

Envoyé par p4atch Voir le message

Je ne les ai pas compté, mais au moins une vingtaine.
EDIT : Donc si j'ai compris, la surcharge, c'est uniquement le fait que les dernieres lignes CSS sont prioritaire sur les premieres lignes ?
Je ne savais pas que cela s'apellait ainsi, mais je l'utilisais déjà.

non, c est une modification du fichier blog.php que joomla va utiliser à la place du fichier standard pour l'affichage en mode blog dans votre cas. Ceci va créer les classes manquantes. Ce sont ces classes qui seront a utiliser dans votre fichier css.

Je vais tester la modif et je vous la fait parvenir directement.

**ced1870** · 24/04/2017, 11h45

Re : CSS différent selon catégorie de l'article

salut
pas forcément besoin de surcharge, si tu as déjà des classes css spécifiques sur le <body> (c'est le cas par exemple dans Protostar), alors en CSS tu peux simplement utiliser ces classes comme préselecteur

CEd

**p4atch** · 24/04/2017, 12h36

Re : CSS différent selon catégorie de l'article

Envoyé par ced1870 Voir le message

salut
pas forcément besoin de surcharge, si tu as déjà des classes css spécifiques sur le <body> (c'est le cas par exemple dans Protostar), alors en CSS tu peux simplement utiliser ces classes comme préselecteur

CEd

C'est ça le problème justement, il n'y a aucun id ou class qui me permet de différencier tel ou tel article sur la page d'accueil.

Envoyé par lefabdu51 Voir le message

non, c est une modification du fichier blog.php

Il me semble que j'ai déjà lu cette solution quelquepart.
Si vous parlez du fichier 'blog.php' qui se trouve à cet endroit : /templates/mon_template/html/com_content/category/blog.php
Et bien je n'y ai pas accès avec le template que j'utilise.
Avec le template 'beez3', et en suivant le chemin que je viens de marquer, je peux trouver 'blog.php' et le surcharger. Mais avec mon template créer avec 'TemplateCreatorCK', si je suis le même chemin, je ne peux pas aller plus loin que le dossier 'html' (il n'y a pas com_content ...)

EDIT : je viens de m'apercevoir qu'il n'y a que avec le template 'beez3' que je trouve ce blog.php.
Est-ce celui la qu'il faut que je modifie ? ou est ce que blog.php est ailleurs pour tous les autres templates ?

**Eddy.vh** · 24/04/2017, 13h07

Re : CSS différent selon catégorie de l'article

Bonjour.

J'avais eu la même idée et je l'utilise avec satisfaction sur deux sites dont l'un sous 3.6.5 et l'autre toujours sous 2.5.28 (en lent cours de migration).
La solution que j'avais mise en œuvre fonctionne sur les deux versions.

Voici le lien de la discussion :

CSS dynamique selon la catégorie - Forums Joomla.fr

https://forum.joomla.fr/showthread.php?168023-CSS-dynamique-selon-la-catégorie

questions concernant la personnalisation graphique de Joomla 2.5.x

Le résultat peut être vu sur www.scriptopedia.org, soit en ouvrant, depuis le blog des articles en vedette, soit en passant en revue les différentes catégories depuis le menu imagé en haut à droite.

En espérant que ça puisse t'aider à avancer dans ton idée.

**p4atch** · 24/04/2017, 13h11

Re : CSS différent selon catégorie de l'article

Plus haut j'avais dit que j'avais lu cette solution quelquepart, bah justement c'était sur ton topic !

De plus je viens de trouver le dossier "components" a la racine de joomla pour avoir ce chemin :
joomla/components/com_contents/...
mais je ne trouve toujours pas 'blog.php'

EDIT :

j'ai relu l'intégralité du topic, il me semble que j'avais déjà essayer votre solution vendredi, mais ça ne marchait pas, j'ai donc réessayer, et cela ne marche toujours pas
Voici ce que j'ai fait, comme écrit dans votre 2e post :
-dans le index.php de mon template :
-j'ai c/c ceci juste au dessus de la balise <Doctype> : <?php $categoryid = JRequest::getCmd('catid'); ?>
-j'ai c/c ceci juste en dessous de la balise <body> : <div id="<?php echo $categoryid; ?>">
-j'ai fermer cet div juste au dessus de la balise </body>

**p4atch** · 24/04/2017, 14h52

Re : CSS différent selon catégorie de l'article

Ok je viens de comprendre que ta solution n'est pas exactement ce que je souhaite.
Tu modifies l'apparence générale de ta page en fonction de la catégorie des articles.

Moi ce que je souhaite, c'est modifier l'apparence d'un seul article.
Il ne faut donc pas que je place cet div juste sous le <body>, mais juste sous la première balise du code qui s'occupe de générer les articles dans un affichage blog.

**ced1870** · 24/04/2017, 15h26

Re : CSS différent selon catégorie de l'article

C'est ça le problème justement, il n'y a aucun id ou class qui me permet de différencier tel ou tel article sur la page d'accueil.

Ah bon ? parce que moi je vois bien ça :

sur la page d'accueil http://nano3.cdg08.fr/index.php

sur la page http://nano3.cdg08.fr/index.php/accueil

etc ...
tu as donc bien des classes css différentes pour chaque page.

**lefabdu51** · 24/04/2017, 15h33

Re : CSS différent selon catégorie de l'article

Envoyé par p4atch Voir le message

Je vois maintenant la nouvel div que l'on viens de créer, mais malheureusement l'id est vide :

Code HTML:

<body>
   <div id="">
   </div>
</body>

Pourquoi la catégorie est-elle vide ?

Ensuite, positionner cet div juste sous le body pourrait me permettre de faire un css par page, mais ce n'est pas ce que je voudrais.
Je voudrais qu'il y ai cet div autour de CHAQUE article de mon accueil. Il faudrait donc que j'ai accès au php qui génère les articles, afin de récupérer la catégorie de chacun des articles, et de modifier le background de chacun des articles en fonction de la catégorie.

C'est bien ce que je dit.
Je poste la solution.
Si tu est sur un template standard, la vue contiens des lignes item-leading pour chaque élément. La classe que je crées apparait en fin de ce selecteur.

extensions > templates > clic sur [nom du template] la colonne de droite.
creer une substitution composants -> com_content ->featured

Ensuite il faut editer le fichier crée.
Deplacez vous dans le dossier /html/com_content/featured
Editez le fichier default.php qui est a l'interieur du dossier en cliquant dessus.

Recherchez la ligne ci dessous (ligne 32 d'un fichier standard peut varier en fonction des modifs deja faite dans ce fichier):

Code:

		<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> clearfix" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

La remplacer par celle ci:

Code:

		<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> cat<?php echo $this->item->catslug[0];?> clearfix " itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

La ligne ci dessous (ligne 84 d'un fichier standard) est à modifier aussi

Code:

			<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="https://schema.org/BlogPosting">

La remplacer par celle ci :

Code:

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

Cette instruction (echo $this->item->catslug[0]

permet d'afficher l'id de la catégorie de chaque article.

Ce qui vous permettras d'affecter des regles pour chaque catégorie, indépendament de la position de l'article ds la page d'acceuil.

vous devriez voir des classes cat9 ou catn avec n l'id de chaque catégorie dans le selecteur item-leading-0 ou 1 ou 2.
Si vous publiez un article d'une autre catégorie en premier l'id suivras et les regles seront affactées au second bloc d affichage au lieu du premier.

Si vous osuhaitez faire une mise en page sur 4 colonnes, il n y a que les paramètres a changer, vous ne touchez pas à cette modif. Elle s appliqueras quelquesoit le nombre d 'article et le nombre de colonnes de la vue blog.

**lefabdu51** · 24/04/2017, 15h41

Re : CSS différent selon catégorie de l'article

pour avoir la liste des id correspondant à chaque catégorie, il faut regarder dans contenu > catégories et c est la dernière colonne.
Dans votre fichier css :
.cat4 {background:red;}
.cat5 {background:blue;}
.........

**p4atch** · 25/04/2017, 07h52

Re : CSS différent selon catégorie de l'article

Envoyé par ced1870 Voir le message

Ah bon ? parce que moi je vois bien ça :

sur la page d'accueil http://nano3.cdg08.fr/index.php

Excusez moi je me suis peut-être mal exprimé.
Effectivement, il y a une class pour le body. Mais pour le body uniquement. Je ne cherche pas à différencier les pages de mon site entre elles, mais à différencier les articles de ma page accueil entre eux.

Merci tout le monde pour toute vos réponses, je vais essayer tout ça !

**p4atch** · 25/04/2017, 08h53

Re : CSS différent selon catégorie de l'article

Merci pour cette solution, je suis sur la bonne voie, je pense qu'il y a un dernier petit soucis.
Néanmoins, un grand merci pour cette solution, je ne savais même pas que l'on pouvait avoir accès aux fichiers de joomla depuis le backend dans template ..

Nouveau soucis :
Je vois bien le "cat" dans le html maintenant, mais le numéro a coté ne correspond pas à l'id de la catégorie.

1er article : Fonctionnaires Momentanément ...
id de la catégorie : 12
html : cat

2e article : LES FORMATIONS
id de la catégorie : 32
html : cat2

3e article : nomination ...
id de la catégorie : 21
html : cat3

4e article : reglementation
id de la categorie : 12
html : cat2

5e article : correction
id de la categorie : 26
html : cat1

avez-vous une idée de ce qui pourrais poser problème ?
J'ai bien c/c ceci a la ligne 32 :

Code:

<div class="leading-<?php echo $leadingcount; ?><?php echo $item->state == 0 ? ' system-unpublished' : null; ?> cat<?php echo $this->item->catslug[0];?> clearfix " itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">

ligne 60 pour moi :

Code:

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

CSS différent selon catégorie de l'article

CSS différent selon catégorie de l'article

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association