personnaliser le css d'une rubrique ?

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

  • personnaliser le css d'une rubrique ?

    Bonjour tout le monde,

    je travaille avec un site joomla 3 (k2) et je cherche à personnaliser le css de certains catégories k2. alors quand j'intègre le code css dans le fichier override.css de la template, la modification s'applique à toutes les catégories k2 ! comment dois-je faire pour garder la modification juste pour les catégories souhaités et merci

  • #2
    Re : personnaliser le css d'une rubrique ?

    Bonjour, en dehors de l'override de template, je ne connais pas de solutions.
    Il est assez simple d'ajouter la variable de la catégorie en classe css dans le fichier d'override.
    De cette manière, vous pourrez vous appuyer sur les classes pour arriver a vos fins.
    I love overrides
    -------
    UX/UI Designer - Grenoble - greendog.fr

    Commentaire


    • #3
      Re : personnaliser le css d'une rubrique ?

      Bonjour,


      Envoyé par zoohayr Voir le message
      je cherche à personnaliser le css de certains catégories k2. [...]
      Vous devriez y parvenir avec le plugin 'Unique Pages', à télécharger ici : https://code.google.com/archive/p/pl...ages/downloads. Attention : à tester avec votre template car n'est peut-être pas compatible avec tous les templates.

      Plus de détails à propos de l'usage de ce (très petit) plugin : http://forum.joomla.fr/showthread.ph...=1#post1053411.

      En cas d'incompatibilité avec votre template, vous pourriez aussi essayer 'CSS2Switch' : http://extensions.joomla.org/extensi...s2switch-basic.

      Sinon, il faut modifier votre template « en dur »...



      Cordialement,
      Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

      Commentaire


      • #4
        Re : personnaliser le css d'une rubrique ?

        Bonjour et merci pour vos réponses,

        Merci Philj pour vos conseils, je vais essayé la première solution (wabaw) d'abord et si ça marche pas, j'installe

        En fait j'ai eu l'idée de copier le fichier defaut du template de "com_K2" et de le renommer tablelist par exemple. Alors comme ça j'aurais le choix de faire afficher le modèle par défaut ou le template "tablelist" depuis les paramètres de la catégorie ! mais je sais pas toujours comment lié le fichier override.css à cet template "tablelist" ?

        Voici le code que j'ai overrider :

        .itemContainer {
        display: block;
        }
        .catItemView {
        width: 30%;
        }
        Fichiers joints
        Dernière édition par zoohayr à 03/07/2016, 04h20

        Commentaire


        • #5
          Re : personnaliser le css d'une rubrique ?

          Bonjour,


          Envoyé par zoohayr Voir le message
          [...] j'ai eu l'idée de copier le fichier defaut du template de "com_K2" et de le renommer tablelist par exemple. Alors comme ça j'aurais le choix de faire afficher le modèle par défaut ou le template "tablelist" depuis les paramètres de la catégorie ! mais je sais pas toujours comment lié le fichier override.css à cet template "tablelist".
          Si compatible avec le template GK News2, l'extension 'Unique Pages' vous permettra facilement de cibler les classes CSS de vos catégories — pour autant qu'elles sont reprises dans l'arborescence de votre menu.

          Par exemple, vous pourriez avoir, sans effort, '<body class="allergologie"> pour les pages consacrées à l'allergologie, ceci vous permettant de cibler de façon personnalisée n'importe quelle classe de la catégorie 'Allergologie' dans votre fichier de surcharge override.css.



          Cordialement,
          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

          Commentaire


          • #6
            Re : personnaliser le css d'une rubrique ?

            Bonjour PhilJ,

            J'ai installer le plugin mais je sais plus me servir ! pas de documentation aussi.

            En fait j'ai besoin d'un coup de main pour le faire

            Autrement dit, comment faire la différence entre les articles du site et les médicaments ? sachant que les médicaments sont regroupés sous une catégorie.

            et voilà le code qui s'applique sur toute les catégories su site

            .itemContainer {
            display: block;
            }
            .catItemView {
            width: 30%;
            }

            Commentaire


            • #7
              Re : personnaliser le css d'une rubrique ?

              Envoyé par zoohayr Voir le message
              J'ai installer le plugin mais je sais plus me servir ! pas de documentation aussi.
              On ne voit pas que le plugin 'Unique Pages' soit actif sur votre site. => Ou bien (1°) vous ne l'avez pas installé, ou bien (1°) vous l'avez installé mais pas activé, ou bien (2°) vous l'avez installé et activé mais le template le rejette.


              comment faire la différence entre les articles du site et les médicaments ? sachant que les médicaments sont regroupés sous une catégorie.
              C'est vraiment vague : c'est à vous de préciser comment vous entendez différencier les articles du site et les médicaments : couleurs (lesquelles ?) ? disposition ?...
              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

              Commentaire


              • #8
                Re : personnaliser le css d'une rubrique ?

                mais je sais pas toujours comment lié le fichier override.css à cet template "tablelist" ?
                Vu que tu as crée une mise en page alternative, tu peut editer le contenu du fichier correspondant et changer les classes css. Par exemple itemheader deviens itemheader2.
                Tu ecrit ta nouvelle classe en bas du fichier css du template.
                Ne modifies que les classes utiles.
                ou ajoutes une classe supplementaire telle que
                "itemheader medicaments"
                Mais le mieux est de copier ton fichier dans le dossier html/com_k2/default de ton template.
                Si un dev de k2 prends le besoin de créer une vue du meme nom, ton taf saute direct.
                Dernière édition par lefabdu51 à 03/07/2016, 21h01

                Commentaire


                • #9
                  Re : personnaliser le css d'une rubrique ?

                  En y regardant de plus près, 'Unique Pages' ne peut pas fonctionner avec votre template ('GK News2') sans une petite modification dans un fichier de votre template. La voici :

                  Téléchargez le fichier /templates/gk_news2/layout/default.php dans un dossier de votre ordinateur, puis faites-en une copie de sauvegarde, au cas où.

                  Ouvrez ce fichier, puis recherchez la ligne commençant par <body. Sur un template Gavick dont le code est probablement très proche, la ligne entière est la suivante :
                  <body<?php echo $tpl_page_suffix; ?><?php if($this->browser->get("tablet") == true) echo ' data-tablet="true"'; ?><?php if($this->browser->get("mobile") == true) echo ' data-mobile="true"'; ?><?php $this->layout->generateLayoutWidths(); ?> data-zoom-size="<?php echo $this->API->get('gk_zoom_size', '150'); ?>">

                  A la toute fin de cette ligne, juste avant la fermeture (>), ajoutez une espace, puis class="", ce qui devrait donner :
                  <body<?php echo $tpl_page_suffix; ?><?php if($this->browser->get("tablet") == true) echo ' data-tablet="true"'; ?><?php if($this->browser->get("mobile") == true) echo ' data-mobile="true"'; ?><?php $this->layout->generateLayoutWidths(); ?> data-zoom-size="<?php echo $this->API->get('gk_zoom_size', '150'); ?>" class="">

                  Transférez le fichier ainsi modifié sur votre serveur, toujours dans le dossier /templates/gk_news2/layout/.

                  Rafraîchissez l'une quelconque des pages de votre site internet (touche F5), puis regardez le nouveau code de votre page (combinaison de touches CTRL+U). Ce devrait être quelque chose comme :
                  <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class="">

                  Maintenant, depuis l'administration de Joomla, installez le plugin 'Unique Pages'. Ouvrez-le et sélectionnez les deux options suivantes (ces deux-là seulement suffiront) :

                  • Add Menu Alias
                  • Add Parent Menu Alias



                  Enregistrez le plugin, sans oublier bien sûr de l'activer.

                  Rafraîchissez la page de votre site internet (F5) et regardez son code source. Vous devriez voir que la classe de body a été automatiquement « peuplée » à l'aide des alias de vos pages.

                  Par exemple, la ligne body de la page 'Médicaments' doit ressembler à quelque chose comme :
                  <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class="medicamenta">

                  Autre exemple, la ligne body de la page /allergologie/adrenaline doit ressembler à quelque chose comme :
                  <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class="allergologie adrenaline">

                  A partir de là, il est facile d'intervenir dans votre fichier de surcharge (override.css) pour styler vos différentes pages ou catégories de pages à votre convenance.

                  Voilà par exemple comment faire en sorte que les titres des articles introduits sur la page 'Médicaments' soient bleues :
                  .medicamenta #k2Container article header h2 a {
                  color: blue;
                  }



                  Cordialement,
                  Dernière édition par PhilJ à 04/07/2016, 02h01
                  Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                  Commentaire


                  • #10
                    Re : personnaliser le css d'une rubrique ?

                    Merci infiniment PhilJ !

                    Vu que le plugin n'a pas marché dans la première installation, je me suis penché sur la solution de lefabdu51 et ça marché ! mais après la lecture de votre deuxième courrier, j'ai ré-installer le plugin en suivant à la lettre les modifications que vous m'avez cité......mais il 'y a toujours quelque chose qui cloche !!!

                    Sachant que pour afficher les titres des médicaments en mode "block" j'ai utiliser "itemContainer" aulieu de "k2Container" ! Alors même en changeant la 2 class par la première, le titre n'est tjr pas en bleu. Et je cherche encore....

                    merci aussi a lefabdu51....

                    Commentaire


                    • #11
                      Re : personnaliser le css d'une rubrique ?

                      Bonjour,


                      Pouvez-vous copier / coller ici le code de la ligne <body...> du fichier /templates/gk_news2/layout/default.php ? Actuellement, cette ligne génère le code <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1"> pour votre page 'Médicaments', au lieu de ce qui est attendu : <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class='medicamenta">.

                      => Le plus probable : soit le plugin n'est pas activé, soit le code de la ligne <body...> du fichier /templates/gk_news2/layout/default.php n'a pas été changé...
                      Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                      Commentaire


                      • #12
                        Re : personnaliser le css d'une rubrique ?

                        Bonjour PhilJ


                        Voici le code générer depuis la page source "médicament" : <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class=" medicamenta">

                        Commentaire


                        • #13
                          Re : personnaliser le css d'une rubrique ?

                          Envoyé par zoohayr Voir le message
                          Voici le code générer depuis la page source "médicament" : <body data-tablet-width="1100" data-tablet-small-width="840" data-mobile-width="640" data-smoothscroll="1" class=" medicamenta">
                          C'est parfait maintenant, et cette mise en place va vous permettre de cibler vos articles un à un ou bien par catégorie.

                          Par exemple, vous pouvez cibler spécifiquement les classes CSS des pages contenant l'alias medicamenta en considérant qu'elles commencent toujours par .medicamenta.

                          NB : vous pouvez tout aussi facilement cibler les classes de la page d'accueil, en l'occurrence avec la classe .accueil .
                          Dernière édition par PhilJ à 04/07/2016, 17h16
                          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                          Commentaire


                          • #14
                            Re : personnaliser le css d'une rubrique ?

                            merci énormément PhilJ....je passe à l'action

                            Commentaire


                            • #15
                              Re : personnaliser le css d'une rubrique ?

                              Bon courage et bonne soirée
                              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X