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

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    Voici mon problème : ( nano3.cdg08.fr )


    Ma page d'accueil est un blog d'article en vedette.

    J'aimerai pouvoir personnaliser mes articles en page d'accueil, de manières à ce que la couleur de l'article dépend de la catégorie.

    Hors depuis le backend, il n'y a aucun moyen de pouvoir personnaliser les articles selon la catégorie.

    J'ai donc chercher dans le html une class ou un id qui pourrait permettre de différencier tel ou tel article, mais il n'y a rien.

    D’après ce que j'ai compris, la mise en page du blog et des articles des blogs joomla sont gérés par shema.org, je ne peut donc pas modifier le document html ou php responsable des articles d'un blog.

    J'ai passé la journée à chercher des modules ou plugin pour ce problème, mais je ne trouve rien.


    Merci d'avance pour vos conseils,

    cordialement,

    P4atch

  • #2
    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....).
    Dernière édition par lefabdu51 à 24/04/2017, 10h42
    Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
    un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

    Commentaire


    • #3
      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.
      Dernière édition par p4atch à 24/04/2017, 11h10

      Commentaire


      • #4
        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
        http://cinnk.com/joomla/25/trucs-ast...charges-joomla
        http://www.st42.fr/astuce-joomla/29-surcharge-joomla-3
        https://www.web-eau.net/tutoriels-joomla?catid=0&id=212

        Pascal
        If anything can go wrong, it will...
        If I can help, I will ..https://conseilgouz.com

        Commentaire


        • #5
          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.
          Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
          un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

          Commentaire


          • #6
            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
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              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 ?
              Dernière édition par p4atch à 24/04/2017, 12h47

              Commentaire


              • #8
                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 :
                https://forum.joomla.fr/showthread.p...-la-catégorie

                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.
                Dernière édition par Eddy.vh à 24/04/2017, 13h10
                Cordialement.
                __
                Eddy !!!
                Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                Commentaire


                • #9
                  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>
                  Dernière édition par p4atch à 24/04/2017, 14h52

                  Commentaire


                  • #10
                    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.
                    Dernière édition par p4atch à 25/04/2017, 07h31

                    Commentaire


                    • #11
                      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 :
                      <body class="com_content view-featured no-layout no-task itemid-101 ltr">
                      sur la page d'accueil http://nano3.cdg08.fr/index.php

                      <body class="com_content view-article no-layout no-task itemid-269 ltr">
                      sur la page http://nano3.cdg08.fr/index.php/accueil

                      etc ...
                      tu as donc bien des classes css différentes pour chaque page.
                      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                      http://www.template-creator.com Outil de création de templates
                      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                      Commentaire


                      • #12
                        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.
                        Dernière édition par lefabdu51 à 24/04/2017, 15h37
                        Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
                        un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

                        Commentaire


                        • #13
                          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;}
                          .........
                          Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
                          un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

                          Commentaire


                          • #14
                            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 !

                            Commentaire


                            • #15
                              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">
                              Dernière édition par p4atch à 25/04/2017, 08h57

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X