coin arrondie sur galerie image css

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

  • coin arrondie sur galerie image css

    via le css, on peut faire des coins arrondie, mais est-il possible de faire la m^me chose sur une galerie photo avec des coins de la couleur du background? (et ce sans modifier la photo)
    Miecaze
    C'est pas facile, mais avec un peu d'effort j'y arrive....

  • #2
    Bonjour Miecaze,

    Pourrais-tu être plus précis, comme par exemple citer la galerie à laquelle tu penses, faire un petit schéma, etc...

    Commentaire


    • #3
      je savais que je n'était pas clair ....par moment j'ai du mal avec les mots!

      prenons par exemple le module image au hasard compris dans le pack de base de joomla.

      Toutes les images du répertoire ont un coins carré mais j'aimerai via un classe du module qu'elles s'affichent avec un coins arrondie.

      fiction ou possible??
      Miecaze
      C'est pas facile, mais avec un peu d'effort j'y arrive....

      Commentaire


      • #4
        Si je comprends bien, tu cherches à faire un masque d'image en css?

        Commentaire


        • #5
          oui c'est ça!
          Miecaze
          C'est pas facile, mais avec un peu d'effort j'y arrive....

          Commentaire


          • #6
            Ben c'est possible en théorie. J'imagine un truc comme ça:
            Code HTML:
            <div class="image">ton_image.jpg
               <div class="masque">ton_masque.png</div>
            </div>
            Puis css associé:

            Code:
            .image {
            width:100px;
            height:33px; 
            overflow:hidden;
            }
            
            .masque {
            position:relative;
            margin-top:-33px;
            margin-left:-100px;
            }
            Reste à déterminer comment tu gères la transparence, en gif ou en png...

            De plus, appliqué à Joomla ou à un composant, faut voir comment gérer ça au cas par cas.
            Dernière édition par cb75ter à 06/11/2009, 16h08

            Commentaire


            • #7
              ok, pour le principe
              mais comment en faire une classe de module?
              faut-il agir sur le fichier index.php du template et le css?
              Miecaze
              C'est pas facile, mais avec un peu d'effort j'y arrive....

              Commentaire


              • #8
                création d'un module Chrome pour masque d'image en css

                En fait, ce n'est pas une question de classe de module, mais de style de module.

                Les styles les plus connus sont "rounded" et "xhtml", et là il va falloir en créer un nouveau. On appelle ça un module chrome. C'est une nouvelle fonctionnalité apportée par Joomla! 1.5.

                Il se trouve que je ne m'étais jamais amusé avec ça, donc j'ai creusé un peu aujourd'hui.

                Etape 1 - Création d'un nouveau module chrome

                Dans notre cas, et pour commencer, tu dois créer (s'il n'existe pas déjà) un nouveau dossier nommé html dans ton template, sous le chemin:
                Code:
                root-->templates-->mon_template
                En l'occurence, récupère ce dossier dans le package ZIP ci-joint et copie le dans le dossier templates de ton installation Joomla. Tu remarqueras que ce dossier html contient 2 fichiers:
                Code:
                • modules.php
                • index.html
                Si le dossier html existe déjà, tu peux soit le sauvegarder et le remplacer par celui fourni dans le package ZIP, soit éditer le fichier modules.php existant en rajoutant le contenu du nouveau fichier modules.php contenu dans le package.

                Etape 2 – Appel du module chrome dans le template

                Dans notre cas, nous avons nommé notre nouveau module chrome « masque » et nous allons donc appliquer ce style au module ainsi:
                Code:
                <jdoc:include type="modules" name="user1" style="masque" />
                Dans ton template, utilise ce style « masque » sur le module que tu souhaites (dans notre cas user1).

                Etape 3 – Publication du module

                Créés puis publies ton module « une image au hasard » dans la position stylée avec « masque » (dans notre cas, user1).

                Pour la configuration, choisis une largeur de 150px dans les paramètres du module.

                Etape 4 – Styling du css

                Tu trouveras dans le package ZIP un fichier masque.css qui contient les styles adequats. Copie ce fichier dans ton dossier:
                Code:
                template -->mon_template-->css
                Pour appeler cette feuille de style, rajoute cette ligne dans ton template, dans la section head:
                Code:
                <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/masque.css" type="text/css" />
                Étape 5 - Création du pochoir:

                Je t'ai créé un masque (ou un pochoir) à utiliser pour démonstration.
                Les images correspondantes sont dans le dossier "image pochoir" du package zip. Ces images sont à copier dans ton dossier:
                Code:
                templates--->mon_template--->images
                Et là, normalement, tu as exactement ce que tu souhaitais (sauf la couleur des images du pochoir).

                Bien sûr, je t'invite à décortiquer les fichiers joints afin de comprendre le fonctionnement général.

                Pour finir, ceci ne fonctionne pas sous IE6 ne serait-ce que pour le pochoir en *.png, et par ailleurs je n'ai pas essayé de débugger la partie css.
                Fichiers joints
                Dernière édition par cb75ter à 08/11/2009, 23h09 Raison: Ajout d'une condition php pour affichage titre dans le fichier module.php

                Commentaire


                • #9
                  je suis heureux de t'avoir fourni un sujet pour t'amuser le dimanche ...

                  je comprend ta démarche et mettrai ça en application dès ce soir.
                  je ne manquerais pas de te tenir informé.

                  merci encore
                  Miecaze
                  C'est pas facile, mais avec un peu d'effort j'y arrive....

                  Commentaire


                  • #10
                    salut "cb75ter"

                    je viens d'essayer ta manip et ça tout fonctionne.

                    mais (et oui il y a un mais ....) la masque s'applique à tous les module de la position, et je souhaiterais l'appliquer qu' a un module de la position right par exemple en passant par les classe de module personnalisable dans la gestion des différents module. vois tu ce que je veux dire?

                    C'est possible??
                    Fichiers joints
                    Dernière édition par miecaze à 11/11/2009, 07h42
                    Miecaze
                    C'est pas facile, mais avec un peu d'effort j'y arrive....

                    Commentaire


                    • #11
                      Salut Miecaze,

                      Je pense que tu ferais mieux de créer une position dans ton template qui soit dédiée à ce module. Tu positionnerais cette position où tu veux puis tu publierais uniquement ton module image dedans.

                      Cependant, tu peux aussi appeler le masque css avec un suffixe de module.

                      Dans ce cas, il faut modifier la fin du fichier modules.php ainsi:

                      Code PHP:
                      /*
                       * Module chrome for rendering the module with a stencil
                       * Module chrome pour afficher le module avec un pochoir 
                       */
                       
                        
                      function modChrome_masque$module, &$params, &$attribs )
                         {    
                        echo 
                      '<div class="module' $params->get('moduleclass_sfx') . '" >';
                          if (
                      $module->showtitle)
                          {
                            echo 
                      '<h3 class="title">' $module->title '</h3>';
                          }    
                       
                            echo 
                      '<div class="image">' .$module->content .
                                    
                      '<div class="masque">
                                        <div>
                                          <div>
                                            <div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                            </div>'
                      ;
                        }
                      ?> 
                      Puis, modifier les css associés comme cela:

                      Code:
                      body {
                      }
                      
                      ul {
                        list-style:none;
                        padding:30px 0;
                        margin:0;
                      }
                      
                      a {
                      }
                      
                      #connexion {
                        width:500px;
                        margin:50px auto 0 auto;
                      }
                      
                      #module-image {
                        width:200px;
                        margin:auto;
                      }
                      
                      #module-image .image {
                        position:relative;
                      }
                      
                      .module-masque div.masque { 
                        background:url(../images/masque_top_left.png) 0 0 no-repeat;
                        position:absolute;
                        top:0;
                        height:100%;
                        width:100%;
                      }
                      
                      .module-masque div.masque div {
                        background:url(../images/masque_bottom_left.png) 0 100% no-repeat;
                        margin: 0;
                        border: 0;
                        height:100%;
                        width:100%;
                      }
                       
                      .module-masque div.masque div div {
                        background: url(../images/masque_top_right.png) 100% 0 no-repeat;
                      }
                       
                      .module-masque div.masque div div div {
                        background: url(../images/masque_bottom_right.png) 100% 100% no-repeat;
                      }
                      Enfin, tu configures ton module image en appelant le suffixe:
                      Code:
                      -masque
                      Et là, les modules n'ayant pas ce suffixe n'auront pas le masque par dessus. En revanche, tu devras les styler pour qu'ils soient cohérent avec ce que tu souhaites.
                      Dernière édition par cb75ter à 11/11/2009, 11h49 Raison: Bêtise dans le php

                      Commentaire


                      • #12
                        désolé pour le retard...
                        merci beaucoup pour ton coup de main ... je mais ça en place rapidement.
                        Miecaze
                        C'est pas facile, mais avec un peu d'effort j'y arrive....

                        Commentaire


                        • #13
                          Alors, tu l'as mis en place? Ca donne quoi?

                          Commentaire


                          • #14
                            salut, dans la précipitation j'ai opté pour la première solution (habillage d'emplacement) ...qui fonctionne bien

                            dès que j'ai 5 min je replonge dans l'habillage de module et te tiens au courant.
                            Miecaze
                            C'est pas facile, mais avec un peu d'effort j'y arrive....

                            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