Joomla vignette

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

  • [RÉGLÉ] Joomla vignette

    Bonjour à tous et à toutes,

    suite à une précédente question sur un autre forum, j'ai su comment coder des vignettes : http://codepen.io/EmmanuelB/pen/XJJBrw

    Seulement j'ai une image de 350 px sur 350 px, le code (avec quelques modififications) marche parfaitement avec mon éditeur de texte Brackets.

    Cependant le cadre ne s'adapte pas avec Joomla et Gantry 5 (exemple).

    Voilà comment j'ai intégré le code sur joomla :

    -ajout du code html après la création d'un module; contenu personnalisé

    -ajout du code css dans le custom css de Gantry 5

    Je suis perdu, voici le code que j'ai inclus :

    -html

    Code:
    <div class="box">
    <div class="box__content"><img class="box__image" src="images/vignette/vignette_350px.png" alt="" /></div>
    <div class="box__caption">
    <div class="box__title"><img class="box__icon" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/XBox_360.png" alt="" /> Mob Ruled</div>
    <div class="box__description"><strong>T-Bone:</strong> Complete 20 Chicago South Club contracts</div>
    </div>
    </div>
    <div> </div>
    -css

    Code:
    body {
        background: #0e0e0e;
        font: 400 16px/1.5em "Segoe Ui", Arial, sans-serif;
    }
      
    .box {
        width: 350px;
        margin: 60px auto;
        position: relative;
        overflow: hidden;
        border: 4px solid #fff;
    }
      
    .box__image {
        display: block;
    }
      
    .box__icon {
    display: inline-block;
    vertical-align: bottom;
    height: 40px;
    margin-right: 5px;
    }
      
    .box__caption {
        position: absolute;
        color: #fff;
        left: 0;
        right: 0;
        bottom: 0;
        top: 270px;
        background: rgba(0,0,0,.7);
        transition: top .4s ease-in-out;
    }
      
    .box__title {
    font-size: 3em;
    font-weight: 100;
    line-height: 1;
    padding: 20px;
    }
      
    .box__description {
        position: absolute;
        padding: 20px 0;
        border-top: 1px solid #fff;
        left: 20px;
        right: 20px;
    }
      
    .box:hover .box__caption {
        top: 0;
        transition: top .3s ease-in-out;
    }
    Pour conclure, ma question est comment adapter le cadre à l'image sur Joomla ?

    J'espère avoir été le plus clair possible, je vous remercie d'avance pour l'aide que vous allez m'apporter.

  • #2
    Re : Joomla vignette

    Personne pour m'aider ?

    Commentaire


    • #3
      Re : Joomla vignette

      Bonsoir
      si tu n'as pas eu de réponse c'est que soit ce n'est pas "claire" ou juste qu'ici beaucoup de code pas directement dans leur article ou module ... il y a des plugins qui font exactement ce que tu veux faire je pense ...
      ... sinon, si tu souhaites rester comme ça, mets une valeur en pourcentage dans le width
      width: 100%;
      Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer
      Cette année, le JoomlaDay FR a lieu à Bruxelles, les 20 et 21 mai 2022, plus d'infos et inscriptions : www.joomladay.fr

      Commentaire


      • #4
        Re : Joomla vignette

        Merci pour ton aide, mais maintenant je rencontre un autre problème mon css ne s'actualise pas

        Commentaire


        • #5
          Re : Joomla vignette

          Tout est résolu : https://openclassrooms.com/forum/sujet/joomla-vignette

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X