Joomladay francophone 2018 à Paris 18 et 19 mai

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 "post-it" 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
    JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

    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
        JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

        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 "post-it" 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 "post-it" (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
              JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

              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)
                      JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

                      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
                          JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

                          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 H:i').'</span>,&nbsp;<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 H:i').'</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><br /><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
                              JoomlaDay FR 2018 - 18/19 Mai 2018 ! J'y serai ... et vous ?

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

                              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
                              Travaille ...
                              X