Module dans une fenêtre modale

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

  • #31
    Bonjour Lomart,
    Est-ce qu'il y aurait des exemples quelques part pour m'aider à utiliser votre "Feuille de style interne".
    J'ai compris le principal mais je patauge pour la mettre en application.
    Par exemple je cherche à faire :

    Logo..Titre....................................... .................................................. .............. Drapeaux (par défaut et m)

    et
    .................................................. ......Logo
    .................................................. ..Drapeaux
    .................................................. .....Titre (en s)

    Merci !!!
    Dernière édition par l.mnu à 13/04/2021, 08h11

    Commentaire


    • #32
      Bonjour,

      Toute la doc sur le CSS est ici : https://up.lomart.fr/infos/css
      On peut cliquer sur les groupes dans la colonne demo pour une explication détaillée

      On peut télécharger un aide-mémoire qui tient sur une seule feuille

      Ensuite cela facilite l'utilisation du CSS, mais demande une connaissance des principes de base

      Mon exemple de code en #15 ressemble (à peu près) à votre demande

      Pour dégrossir, il faut 3 blocs
      • logo : largeur 2/12 en desktop 12/12 en mobile et aligné à droite = fg-c2 fg-cs12 trs
      • titre : largeur 8/12 en desktop 12/12 en mobile et aligné à droite = fg-c8 fg-cs12 trs
      • drapeaux : largeur 2/12 en desktop 12/12 en mobile et aligné à droite = fg-c2 fg-cs12 tr
      le tout dans un bloc fg-row
      Dernière édition par lomart à 13/04/2021, 10h06 Raison: correction fg-w en fg-c
      UP, le plugin universel à découvrir sur https//up.lomart.fr
      bgMax
      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

      Commentaire


      • #33
        On peut cliquer sur les groupes dans la colonne demo pour une explication détaillée
        Je n'avais pas vu le lien sur l'explication détaillée

        Merci, je me replonge dedans

        Commentaire


        • #34
          Bonjour,
          Maintenant j'ai mon entête qui fonctionne très bien et qui est responsive .
          Petite remarque si je mets fg-c3 pour le module 90, celui-ci se met en dessous du logo ??? Avec c2, cela fonctionne bien mais ca fait un total de 11.

          <div class="fg-row fg-vcenter bg-jaune">
          <div class="fg-c1 tc m1 fg-cs12 tcs"><img src="images/logo.png" /></div>
          <h1 class="fg-c8 tl fg-cs12 tcs">{loadmoduleid 96}</h1>
          <div class="fg-c2 tc fg-cs12 tcs">{loadmoduleid 90}</div>
          </div>
          Maintenant j'essaye de mettre 4 boutons en dessous de mon entête avec le code suivant

          <div class="fg-row bg-rouge">
          <div><button onclick={loadmoduleid 97}>Telechargement</button></div>
          <div><button onclick={loadmoduleid 98}>News</button></div>
          <div><button onclick={loadmoduleid 99}>Aidez-moi</button></div>
          <div><button onclick={loadmoduleid 100}>Contact</button></div>
          </div>
          et évidemment ça ne fonctionne pas , y a t-il une solution ???
          Merci

          Commentaire


          • #35
            Bonjour,

            Pas compris le coup du c2/c3
            Il faut tenir compte du css des modules chargés

            Pour les boutons :
            Code:
            <div class="fg-row fg-auto-4 fg-gap bg-rouge">
            Pas compris, non plus le onclick={loadmoduleid 97}
            onclick attend du javascript
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax
            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire


            • #36
              <div class="fg-c2 tc fg-cs12 tcs">{loadmoduleid 90}</div>
              Total 11 (1+8+2)
              Cliquez sur l'image pour l'afficher en taille normale

Nom : entete1.png 
Affichages : 138 
Taille : 28,3 Ko 
ID : 2026508
              <div class="fg-c3 tc fg-cs12 tcs">{loadmoduleid 90}</div>
              Total 12 (1+8+3)
              Cliquez sur l'image pour l'afficher en taille normale

Nom : entete2.png 
Affichages : 85 
Taille : 62,0 Ko 
ID : 2026509

              Pas compris, non plus le onclick={loadmoduleid 97}
              Je voudrai mettre quatre boutons dans une "fg-row" et quand on clik sur un des boutons (Telecharger par ex), celui-ci affiche le module 97.

              et le module 97 contient cela : {up file-download=cow-1.0.0.zip}


              Je veux rester Up à 100%

              Commentaire


              • #37
                Envoyé par l.mnu Voir le message
                Je veux rester Up à 100%
                Merci, je ne le reproche pas

                Quand je ne comprends pas un comportement CSS, j'ajoute une bordure ou un outline(qui ne change pas la taille externe) aux blocs. Ce qui donnerait :
                Code:
                <div class="fg-row fg-vcenter bg-jaune">
                <div class="fg-c1 tc m1 fg-cs12 tcs" style="outline:1px solid red"><img src="images/logo.png" /></div>
                <h1 class="fg-c8 tl fg-cs12 tcs"style="outline:1px solid red">{loadmoduleid 96}</h1>
                <div class="fg-c2 tc fg-cs12 tcsstyle="outline:1px solid red"">{loadmoduleid 90}</div>
                </div>
                Pour les boutons, en restant 100% UP, on peut faire
                Code:
                <div class="fg-row fg-auto-4 fg-gap bg-rouge">
                  <button>{up file-download=cow-1.0.0.zip}##link##Telechargement##/link##{/up file-download}</button>
                  <button>{up file-download=cow-1.0.0.zip}##link##News##/link##{/up file-download}</button>
                  <button>{up file-download=cow-1.0.0.zip}##link##Aidez-moi##/link##{/up file-download}</button>
                  <button>{up file-download=cow-1.0.0.zip}##link##Contact##/link##{/up file-download}</button>
                </div>
                Inutile de passer par un module. J'aime bien avoir tout le code sous les yeux, c'est plus facile pour la relecture
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #38
                  Bonjour,
                  Dans mon template j'ai ceci :

                  Code:
                   <div class="banniere">
                              <div class="menu"></div>
                                  <div class="boutons">
                                      <button class="bouton" data-modal="News"><strong><jdoc:include type="modules" name="msg-nouvelles" style="none" /></strong></button>
                                  </div>
                                  <div class="boutons">
                                      <button class="bouton" data-modal="Telechargement"><strong><jdoc:include type="modules" name="msg-telechargement" style="none" /></strong></button>
                                  </div>
                                  <div class="boutons">
                                      <button class="bouton" data-modal="Aidez-moi"><strong><jdoc:include type="modules" name="msg-don" style="none" /></strong></button>
                                  </div>
                                  <div class="boutons">
                                      <button class="bouton" data-modal="Contact"><strong><jdoc:include type="modules" name="msg-contact" style="none" /></strong></button>
                                  </div>
                              </div>
                          </div>
                  Cliquez sur l'image pour l'afficher en taille normale

Nom : Entete3.jpg 
Affichages : 140 
Taille : 168,1 Ko 
ID : 2026536

                  et quand je click sur le bouton Téléchargement j'ai ceci (avec du JS) :

                  Cliquez sur l'image pour l'afficher en taille normale

Nom : Entete4.jpg 
Affichages : 97 
Taille : 51,6 Ko 
ID : 2026537
                  Mon module de Telechargement contient :

                  Code:
                  {up file-download=cow-1.0.0.zip}
                  
                  {up file-download=cow-1.0.1.zip}
                  Cela fonctionne mais je voudrai mettre mes boutons dans

                  Code:
                  <div class="fg-row bg-rouge">
                  pour que ça soit responsive et uniformisé avec mon entête.

                  J'espère que j'ai été plus clair....
                  Merci

                  Commentaire


                  • #39
                    Bonjour,

                    Envoyé par l.mnu Voir le message

                    Code:
                     <div class="banniere">
                       <div class="menu">[COLOR=#c0392b]</div>[/COLOR]
                        <div class="boutons">
                          <button class="bouton" data-modal="News"><strong><jdoc:include type="modules" name="msg-nouvelles" style="none" /></strong></button>
                        </div>
                        <div class="boutons">
                          <button class="bouton" data-modal="Telechargement"><strong><jdoc:include type="modules" name="msg-telechargement" style="none" /></strong></button>
                        </div>
                        <div class="boutons">
                          <button class="bouton" data-modal="Aidez-moi"><strong><jdoc:include type="modules" name="msg-don" style="none" /></strong></button>
                        </div>
                        <div class="boutons">
                          <button class="bouton" data-modal="Contact"><strong><jdoc:include type="modules" name="msg-contact" style="none" /></strong></button>
                        </div>
                      </div>
                    [COLOR=#c0392b]</div>[/COLOR]
                    Dans ce code, il y a un /div en trop (au choix)

                    Pour les boutons. Une solution 100% UP avec tooltip et file-download.
                    Mais on peut mixer HTML (flexauto et html) et shortcodes UP (tooltip et file-download)

                    Code:
                    {up flexauto=2 | mobile=1 | class=fg-gap bg-rouge fg-child-center}
                    {up html=button | class=bg-jaune w12}{up tooltip={up file-download=divers |style=width:450px}##icon## ##filename-link##{/up file-download} | model=white | bottom | position=right| offset=6}Bouton 1{/up tooltip}{/up html}
                    {======= 2}
                    {up html=button | class=bg-jaune w12}{up tooltip={up file-download=divers |style=width:450px}##icon## ##filename-link##{/up file-download} | model=white | bottom | position=left | offset=6}Bouton 2{/up tooltip}{/up html}
                    {/up flexauto}
                    Ce qui donne en desktop et mobile :
                    Cliquez sur l'image pour l'afficher en taille normale

Nom : image_36660.png 
Affichages : 142 
Taille : 35,5 Ko 
ID : 2026542
                    Cliquez sur l'image pour l'afficher en taille normale  Nom : file-tooltip-mobile.png  Affichages : 0  Taille : 11,7 Ko  ID : 2026543

                    Pour les téléchargements, je préfère définir un dossier plutôt que des fichiers. Comme cela, j'ai juste, en FTP, à supprimer ou déplacer les anciens et déposer les nouveaux. On peut utiliser les options file-mask et extension pour filtrer les fichiers du dossier.
                    UP, le plugin universel à découvrir sur https//up.lomart.fr
                    bgMax
                    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                    Commentaire


                    • #40
                      Merci !!!
                      J'essaye le mixage

                      Commentaire


                      • #41
                        Bonjour,
                        J'ai essayé mais le Tooltip n'est pas très adapté à mon besoin. Difficile d’intégrer une fiche de contact dans le Tooltip.
                        Je vais garder mes boutons avec le js et essayer de modifier le CSS de mon template pour la responsivité (<= chez pas si ca existe).
                        J'aurai bien aimé le faire complètement avec votre méthode.
                        Tant pis, non 100% UP...
                        Merci

                        Commentaire


                        • #42
                          Bonjour
                          Tant pis, non 100% UP...
                          Il n'était pas demandé de mettre un formulaire de contact
                          Mais cela me donne l'idée d'une prochaine action. Un popover qui accepte des modules, du texte, ....
                          Un mix entre tabslide et tooltip
                          UP, le plugin universel à découvrir sur https//up.lomart.fr
                          bgMax
                          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                          Commentaire


                          • #43
                            Il n'était pas demandé de mettre un formulaire de contact
                            Pourtant mes quatre boutons du post 38 sont parlants !!!

                            Ok, c'est génial donc je vais patienter du nouveau mix et surtout pouvoir être le premier a tester la nouvelle action. Cela va régler mon problème de l'origine de ce post "Module dans une fenêtre modale".


                            Et ca serait bien de mettre un bouton Fermer comme sur l'image du post 38 ou qu'elle se ferme automatiquement dès que la fenêtre perd le focus, est-ce que c'est facile ????

                            Bon courage pour la nouvelle action
                            Dernière édition par l.mnu à 16/04/2021, 12h45

                            Commentaire


                            • #44
                              Bonjour Lomart,
                              Juste un petit message pour savoir l'état d'avancement du popover ?
                              Merci et bonne journée

                              Commentaire


                              • #45
                                Bonjour l.mnu

                                Vous avez le lien vers la version beta dans votre MP depuis le 24 avril.
                                Je m'étonnais de ne pas avoir de retour

                                Cette action fera partie de la nouvelle version de UP qui devrait voir le jour d'ici une semaine

                                Bonne journée
                                UP, le plugin universel à découvrir sur https//up.lomart.fr
                                bgMax
                                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                                Commentaire

                                Annonce

                                Réduire
                                Aucune annonce pour le moment.

                                Partenaire de l'association

                                Réduire

                                Hébergeur Web PlanetHoster
                                Travaille ...
                                X