Module Simple Isotope

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

  • [Suggestion] Module Simple Isotope

    Bonjour,

    Ce module est super pratique pour afficher soit les articles soit les liens webs de façon "ludique".
    Il évolue rapidement grâce à son auteur, Pascal alias pmleconte

    Vous pouvez le trouvez sur son site : https://www.conseilgouz.com/index.ph...simple-isotope

    Voilà actuellemnt ce que j'obtiens avec le module utilisé en tant que "liens web" (j'ai modifié légèrement le texte affiché dans le module):
    Cliquez sur l'image pour l'afficher en taille normale

Nom : simple-isotope-gimpons.jpg 
Affichages : 1 
Taille : 94,5 Ko 
ID : 1824419

    Je souhaiterais que l'on puisse attribuer une couleurs aux catégories (avec une classe css) et afficher le fond des "*******" de la couleur de la catégorie.

    Merci d'avance à pmleconte
    GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
    Le terrier de Fynhooft : http://patrick.gauwin.free.fr
    Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

  • #2
    Re : Module Simple Isotope

    Merci Fynnhooft pour cette pub ...

    J'ai fait une nouvelle version: 1.0.16 : les catégories sont accessibles par css avec la classe iso_cat_<no catégorie>, le select de la liste des catégories aussi avec une classe isotope_select. Je pense que vous pouvez en faire ce que vous souhaitez maintenant.

    De plus, j'ai ajouté, au niveau de l'affichage Liens web, la possibilité de choisir la forme du filtre : boutons ou liste (si vous avez trop de catégories de liens).

    Merci pour toutes ces suggestions/améliorations proposées.

    En espérant que cela corresponde à vos besoins,

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

    Commentaire


    • #3
      Re : Module Simple Isotope

      ...
      Petit souci :
      J'ai juste ajouté ce code dans mon fichier css :
      Code:
      .iso_cat_122{background-color:lime !important;}
      J'obtiens cela :
      Cliquez sur l'image pour l'afficher en taille normale

Nom : screenshot.47.jpg 
Affichages : 1 
Taille : 96,5 Ko 
ID : 1805853

      Pourquoi le nom de la catégorie n'est pas colorée ?
      Pourquoi suis-je obligé de mettre "!important" (sinon, couleur grise par defaut)
      GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
      Le terrier de Fynhooft : http://patrick.gauwin.free.fr
      Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

      Commentaire


      • #4
        Re : Module Simple Isotope

        Bonsoir,

        C'est "normal", car, pour la div contenant les informations, on a 2 classes : la classe par défaut (isotope_item) avec sa couleur définie dans les paramètres du module et la classe de la catégorie (iso_cat_<no catégorie>).

        Si tu souhaites "coloriser" les noms des catégories, il s'agit de liens, donc, il faut utiliser, par exemple,
        Code:
        .iso_cat_<categorie> {
        background:blue !important; 
        color: white;
        }
        .iso_cat_<categorie> a {
        color: yellow ;
        }
        .iso_cat_<categorie> a:hover{
        color: white;
        }
        Pascal
        If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

        Commentaire


        • #5
          Re : Module Simple Isotope

          Envoyé par pmleconte Voir le message
          Si tu souhaites "coloriser" les noms des catégories, il s'agit de liens, donc, il faut utiliser, par exemple,
          Code:
          .iso_cat_<categorie> {
          background:blue !important; 
          color: white;
          }
          .iso_cat_<categorie> a {
          color: yellow ;
          }
          .iso_cat_<categorie> a:hover{
          color: white;
          }
          Pascal
          Cela ce n'est pas pour les catégories mais pour les liens contenus dans les catégories.

          En fait, les catégories ce sont les boutons (dans mon cas : "Liens GIMPons", "GIMP", "Ils ont référencé GIMPons").
          Il faut que la couleur de ce "bouton-catégorie" soit la même que celle définie par le css : .iso_cat_<categorie>

          De plus, il faut que la couleur soit "liée" : tu ne dois pas pouvoir avoir deux couleurs différentes entre le "bouton-catégorie" et le "*******" associé à la catégorie. C'est pour cela que je m'attendais qu'à une seule propriété css de la catégorie.


          Soucis supplémentaires :
          Essayes de mettre un padding sur ta classe .isotope_item et regarde ce qu'il se passe : les liens sont "avalés"
          Ton menu contient le terme "catégorie" : c'est "liens" que tu dois mettre.
          Dernière édition par fynhooft à 25/10/2016, 21h43
          GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
          Le terrier de Fynhooft : http://patrick.gauwin.free.fr
          Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

          Commentaire


          • #6
            Re : Module Simple Isotope

            Bonjour,

            J'ai vu que tu étais passé à la version 1.0.17. Je l'ai installée. Voici ce que cela donne après quelques modifications dans les css :
            Ecran initial :


            Là, j'ai choisi une catégorie avec un tri alphabétique :


            Il reste quelques trucs que tu dois modifier :
            - renommer "catégorie" en "liens"
            - nettoyer ton code car il y a du code css qui est en dur (ex : <div class="isotope_button-group sort-by-button-group" style="width:50%;float:left"> )
            - il est impossible de mettre un padding dans les "*******" (essayes : .isotope_item {padding:1%;}
            - il faut souvent mettre !important dans le css : pourquoi ?
            - gros souci : tu références tous les liens , même ceux qui sont dépubliés !

            Au boulot !
            Fichiers joints
            Dernière édition par fynhooft à 27/10/2016, 18h45
            GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
            Le terrier de Fynhooft : http://patrick.gauwin.free.fr
            Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

            Commentaire


            • #7
              Re : Module Simple Isotope

              Bonsoir et merci pour ton implication sur ce module.

              Tu vas trop vite, je n'ai même pas eu le temps de t'annoncer la nouvelle version (il est vrai que je me bats avec la double authentification en ce moment...)

              J'ai mis une nouvelle version en ligne qui fait disparaître les liens supprimés ou dépubliés (je les avais oubliés ceux-là...) et j'ai nettoyé les zones en dur.

              Au niveau de !important, ils sont là pour forcer ton choix par rapport à ceux que j'avais fait (en fait, ce ne sont pas mes choix, mais ceux qui sont fournis dans la démonstration isotope ou ceux qui sont générés par la librairie). Pour le padding que tu proposais, j'ai mis !important et il a bien fonctionné.

              Au niveau du bouton Catégorie, il s'agit bien d'un tri par catégorie de liens et non un tri par lien. Si tu veux un tri par lien, il y a le bouton alpha.

              Bons tests et en espérant que cela répond un peu mieux à tes attentes,

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

              Commentaire


              • #8
                Re : Module Simple Isotope

                Bonsoir,

                je suis nouvelle sur ce forum merci pour l’application sur ce module que je trouve simple et rapide

                Commentaire


                • #9
                  Re : Module Simple Isotope

                  ...
                  La version 1.0.19 m'a légèrement cassé ma mise en page car tu as rajouté un padding-left.

                  Or, tu ne devrais pas ajouté du code en dur.

                  Voici ce que j'ai trouvé sur les styles, en dur, qui trainent dans ton code (v1.0.18) :

                  Code:
                  Ligne 21 à 28 de tmpl/defaut.php:
                  echo '<style type="text/css">';
                  if (($iso_layout == "masonry") || ($iso_layout == "fitRows")) {
                  	echo '.isotope_item {width: '.((100 / $iso_nbcol)-2).'% }';
                  } else if ($iso_layout == "vertical") {
                  	echo '.isotope_item {width: 100%; }';
                  }
                  echo '.isotope_item {background:'.$params->get("backgroundcolor","#eee").';}';
                  echo '</style>';
                  
                  
                  Ligne 31 de tmpl/defaut.php:
                  <div class="isotope_button-group sort-by-button-group" style="width:50%;float:left">
                  
                  Ligne 64 de tmpl/defaut.php:
                  echo '<p style="float:left;margin-top:5px;" class="hidden-phone" >Filtre :&nbsp;</p><select class="isotope_select">';
                  
                  Ligne 81 de tmpl/defaut.php:
                  echo '<p style="float:left;margin-top:5px;" class="hidden-phone" >Filtre :&nbsp;</p><select class="isotope_select">';
                  Il faut que tu mettes des classes à la place de ces styles et modifier celle-ci dans le fichier isotope.css
                  C'est ainsi, plus facile de personnaliser et c'est plus beau !
                  GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                  Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                  Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                  Commentaire


                  • #10
                    Re : Module Simple Isotope

                    Bonjour,

                    Vous pouvez maintenant voir le module de pmleconte à l'oeuvre sur mon site. Regardez là.

                    Le module a été entièrement personnalisé grâce au CSS.
                    Je vais devoir intervenir dans le code uniquement pour modifier le texte : "création :" remplacera "créé le", l'heure sera supprimée
                    Il faut aussi que je regarde le responsive.

                    @pmleconte,
                    encore un pb, quand on clique sur un lien, le compteur n'est pas augmenté (il faudrait intervenir sur le composant liens web, je pense) !
                    Dernière édition par fynhooft à 28/10/2016, 15h34
                    GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                    Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                    Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                    Commentaire


                    • #11
                      Re : Module Simple Isotope

                      Bonsoir,

                      Version 01.0.20 : corrige l'incrémentation du compteur de visites (c'était bien caché et c'est effectivement un appel à com_weblink un peu space..) ainsi que le css pour le mode responsive.

                      Bonne soirée,

                      Pascal

                      PS: j'ai mis création au lieu de créé le, mais, j'ai quand même laissé l'heure (j'y réfléchis)
                      If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

                      Commentaire


                      • #12
                        Re : Module Simple Isotope

                        Bonsoir,

                        J'ai mis à jour avec la version 1.0.20.
                        Il reste du css en ligne mais je pense que c'est le code php qui l'insère (<div class="isotope_item ... )

                        Tu n'as plus qu'à mettre à jour, toi aussi, sur ton site.
                        En passant, j'ai vu une correction à faire sur celui-ci.

                        Tu as :
                        Code:
                        <span style="background-color: #ffff00;">des mot sur fond jaune</span>
                        au lieu de :
                        Code:
                        <span class="fluo">des mot sur fond jaune</span>
                        
                        dans le fichier css, tu mets :
                        .fluo{background-color: #ffff00;}
                        L'avantage, c'est que le jour où le jaune ne te plaît plus, tu changes juste la couleur dans le fichier css et tous tes mots en fluo changent automatiquement de couleur. Pas besoin de balayer tout ton code pour rechercher où tu as mis ce fluo.

                        Pour revenir à simple isotope, je viens d"aménager le css pour le responsive : c'est bon pour moi. Tu peux vérifier sur mon site.

                        Bon week-end.
                        Dernière édition par fynhooft à 28/10/2016, 22h06
                        GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                        Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                        Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                        Commentaire


                        • #13
                          Re : Module Simple Isotope

                          Bonjour,

                          Il y a bien un css dans le code: c'est à cause du nombre de colonnes que l'on paramètre dans le module. Donc, je l'ai laissé dans le php.

                          Bon weekend et encore merci pour ton aide sur ce module,

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

                          Commentaire


                          • #14
                            Re : Module Simple Isotope

                            Bonjour,

                            J'ai finalement enlevé l'affichage de l'heure. Pour cela, j'ai édité le fichier modules/mod_simple_isotope/tmpl/default.php
                            J'ai modifié les lignes 108 à 113.
                            J'ai mis en rouge ce que j'ai supprimé et en vert ce que j'ai ajouté.

                            avant :
                            Code:
                            if ($displaysortinfo == "show") {
                            	echo '<br/><span class="iso_date">cr&eacute;ation&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y [COLOR="#FF0000"]H:i[/COLOR]').'</span>[COLOR="#FF0000"],&nbsp;[/COLOR]<span class="iso_click"> '.$item->hits.' visites</span>';
                            }
                            if ($displaysortinfo == "showdate") {
                            	echo '<br/><span class="iso_date">cr&eacute;ation;&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y [COLOR="#FF0000"]H:i[/COLOR]').'</span>';
                            }
                            après :
                            Code:
                            if ($displaysortinfo == "show") {
                            	echo '<br/><span class="iso_date">cr&eacute;ation&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y').'</span>[COLOR="#00FF00"]<br />[/COLOR]<span class="iso_click"> '.$item->hits.' visites</span>';
                            }
                            if ($displaysortinfo == "showdate") {
                            	echo '<br/><span class="iso_date">cr&eacute;ation;&nbsp;:&nbsp;'.JHtml::_('date', $item->created, 'd-m-Y').'</span>';
                            }
                            Voilà, je pense que le module restera en l'état pour moi.
                            GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                            Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                            Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                            Commentaire


                            • #15
                              Re : Module Simple Isotope

                              Bonsoir,

                              Comme je vois les choses en grand, j'ai créé une nouvelle version (01.0.21 : https://www.conseilgouz.com/index.ph...simple-isotope) avec ses fichiers languages FR et GB, ce qui permet aussi de personnaliser tous les libellés, ainsi que le format de la date.

                              La zone de date, par exemple, s'appelle SSISO_DATEFORMAT et contient par défaut d/m/Y, mais, par la substitution au niveau langage, tu peux y mettre ce que tu veux.

                              Bon dimanche,

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

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X