Joomladay francophone 2018 à Paris 18 et 19 mai

Faire des modules avec des coins plus simplement.

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

  • [Astuce] Faire des modules avec des coins plus simplement.

    Salut tout le monde,

    je viens de tomber sur une astuce d'un site anglais qui permet de faire des coins arrondis aux modules plus simplement que la technique dans " style = rounded ".

    A priori ça devrait enlever le problème de chevauchement des png transparents avec un style rounded.

    Je ne l'ai pas encore testée, je vous donnerais mon avis et n'hésitez pas a donner le votre

    Voici le lien : http://www.teachmejoomla.net/code/mi...und-image.html

    Est la version traduite par google ici :

    Le Css :

    /*TeachMeJoomla's
    flexible rounded corners module CSS*/
    /*image setup */
    div.module-green, div.module-green div{
    background:
    url('images/rounded_green.jpg');

    }
    /*replaced with TeachMeJoomla's single image technique*/

    div.module-green
    {
    padding: 0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    background-repeat:no-repeat;
    background-position:bottom left;
    height:1%;
    width:auto;
    }

    div.module-green div

    {
    margin:0px 0px 0px 13px;
    background-repeat:no-repeat;
    background-position: bottom right;

    padding: 0px 0px 13px 0px;
    width:auto;
    }
    div.module-green div div
    {

    background-position: top right;

    margin: 0px 0px 0px 0px;

    padding: 0px 0px 0px 0px;
    }
    div.module-green div div div
    {

    margin:0px 13px 0px -13px;

    background-position: top left;

    padding: 13px 0px 0px 13px;
    }
    /*reset nested divs*/

    div.module-green div div div div
    {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;

    background:none;

    background-image: none;

    background-position: top left;

    background-repeat: repeat;

    background-color: transparent;

    width:100%;
    }
    Le Html joomla 1.5 :

    <jdoc: include type = "modules" name = "module_position" <jdoc: include type= "modules" name= "module_position"
    style = "arrondi" headerLevel = "3" /> style= "rounded" headerLevel= "3" />
    Dernière édition par boub à 19/02/2010, 10h00

  • #2
    bon déjà la traduction tu l'oublies elle est bourré de fautes
    ensuite l'image de 15ko est un peu grosse pour ce que c'est, tu peux facilement la réduire à quelques kilos
    tu peux utiliser cette méthode qui est plus claire et plus propre à mon gout,
    http://docs.joomla.org/Creating_rounded_corners
    mais c'est vrai qu'on pourrait utiliser une seule image, je n'y avais pas pensé

    perso je préfère la méthode à 3 images, une coins arrondis en haut, une répétition verticale, et une coins arrondis en bas. Dans ce cas effectivement ton dégradé ne peut être vertical.

    Mais c'est quoi ton problème à la base ?
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

    Commentaire


    • #3
      Envoyé par ced1870 Voir le message
      bon déjà la traduction tu l'oublies elle est bourré de fautes
      Je viens de mettre l'original, petite erreur avec la traduction.

      ensuite l'image de 15ko est un peu grosse pour ce que c'est, tu peux facilement la réduire à quelques kilos
      tu peux utiliser cette méthode qui est plus claire et plus propre à mon gout,
      http://docs.joomla.org/Creating_rounded_corners
      mais c'est vrai qu'on pourrait utiliser une seule image, je n'y avais pas pensé
      Je viens de regarder rapidement. J'avais utilisé cette méthode des 3 images qui fonctionne très bien pour tout types d'images sauf des png avec de la transparence. Je n'ai peut-être pas bien compris la méthode mais en mettant un png transparent l'un au dessus de l'autre, la couleur change.

      Pour mon cas par exemple j'ai voulu mettre une image avec une opacité à 45%, avec cette technique c'est impossible. On voit apparaître des bordures.

      Cette technique d'une seule image à l'air de fonctionner.

      Je pensais à une autre technique avec le CSS3. Pourquoi ne pas laisser le module avec un style en xHTML et un CSS de ce style:

      #cadre {
      border-radius: 10px;
      }
      On garde une image, et le css est nettement plus petit. On devrait gagner en temps de chargement non ?

      J'aimerais avoir vos avis sur ces techniques.

      Commentaire


      • #4
        malheureusement le border radius du css3 n'est pas interprété par tous les navigateurs, notamment les anciens

        bon si ta solution fonctionne comme ça tant mieux, j'ai quand meme du mal à comprendre pourquoi ça bug avec la transparence. Faudrait que j'essaie un de ces 4 !
        Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
        http://www.template-creator.com Outil de création de templates
        Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

        Commentaire


        • #5
          Si on regarde l'exemple de découpage en 3 parties :

          http://docs.joomla.org/images/4/4d/Animation.gif

          On peut voir sur l'animation que les 4 parties sont superposées. Quand on met un milieu avec une opacité à 20% par exemple et qu'on rajoute une partie par dessus avec une opacité à 20%; ça donne une zone avec une opacité à 40% malheuresement et non une zone à 20%.

          Pour une image en couleur pleine aucun problème, on ne vera pas de superposition.

          Sur la première technique, j'ai un dédoublement, je vais essayer de régler ça.

          Commentaire


          • #6
            mais oui ! c'est vrai les <div> sont imbriquées ! idiot que je suis...

            je me demande si avec la technique des trois images que j'ai décrite
            perso je préfère la méthode à 3 images, une coins arrondis en haut, une répétition verticale, et une coins arrondis en bas. Dans ce cas effectivement ton dégradé ne peut être vertical.
            ça pourrait fonctionner étant donné que les images ont la taille des padding associés et que la seule image qui se répète est dans le conteneur le plus au-dessus. Donc normalement il n'y a pas de superposition.... à voir
            C'est la méthode N°1 décrite dans mon ebook.
            Faudra que je teste
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Hmm si ta technique fonctionne j'aimerais bien savoir

              Par contre j'ai oublié de préciser, mes padding faisaient des choses bizarres. Les marges n'apparaissaient pas au bon endroit, alors erreur de ma part surement.

              J'ai suivi ce tutoriel : http://www.mysiteboost.com/blog/joom...module-chrome/

              Pour revenir à ma technique, ca fonctionne très bien par contre j'ai du modifier le début du CSS:

              Avant modification :

              div.module-green, div.module-green div{
              background: url ('images/rounded_green.jpg');
              }
              Après modification :

              div.module-contact div {
              background: url(../images/module.png);
              }
              J'ai du supprimer une div qui me faisait un dédoublement et ça fonctionne

              Pour une fois que je peut donner un pti coup de main à la communauté ça fait plaisir

              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