Le Deal du moment : -25%
-100€ Barre de son Hisense Dolby Atmos 5.1.2
Voir le deal
299.99 €

KoalaVolant
KoalaVolant
Lun 13 Mai 2024 - 9:58
Version du forum : ModernBB

Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Glassormophism"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".





Particularités du code :
- Crédits : KoalaVolant
- Les images se redimensionnent toutes seules
- Il y a une version avec onglets ou sans onglets

Couleurs & Fonts


  1. Pour rappel, ce code appartient à un thème complet. Si vous utilisez déjà d'autres codes de ce thème, vous pouvez esquiver cette partie. Elle concerne les couleurs, et les polices d'écriture.

    Sinon : les couleurs sont à placer où vous voulez dans le CSS, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.

    Ce code utilise un système de “variables de couleurs". En gros, vous modifiez les couleurs directement dans les variables, et elles se modifient partout où cette variable aura été placée.
    Exemple : Si vous modifiez --color1:#fff; par --color1:black; tous les endroits du CSS qui possèdent --color1 en variable seront en noir.

    Si l'agencement ne vous plais pas, vous pouvez bien sûr changer le nom des variables, changer qui a quel variable (changer color1 en color2).

    Note : Si vous voulez qu’on modifie les codes pour vous, suivez un de ces boutons

    Personnaliser mon code
    Signaler un souci

  2. Pour copier coller le ":root" il faut aller dans le Panneau d'administration > Affichage > Couleurs et CSS > Feuille de style CSS et copier coller ça :

    Code:
    :root{
        --color1:#C8BBDE;
        --color2: #806E9F;
      
      --font1:Montserrat;
      
      --fond1: linear-gradient(90deg, #3C395B 50%, #3F2E3A 73.23%);
    --fond2: rgba(103, 100, 148, 0.50);
    --fond3: linear-gradient(180deg, rgba(201, 137, 190, 0.20) 0%, rgba(146, 131, 176, 0.16) 100%);
    --fond3hover:linear-gradient(-180deg, rgba(201, 137, 190, 0.40) 0%, rgba(146, 131, 176, 0.40) 100%);
    --fond4:rgba(255,255,255,0.3);
    --fond5: rgba(156, 115, 144, 0.30);
    --fond6: rgb(94,68,86);
       
    --txt1:#DEDEDE;
    --txt2:#E1BCDB;
    --txt3:#fff;

    --border1:#847FC1;
    --border2: #AF86A3;

    }

  3. Attention, la police d'écriture utilisées sur ce thème est "Montserrat". Il faut aller dans le panneau d'administration > templates > haut du forum et mettre ça avant le < /head> :
    Code:
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    Par une autre font que vous trouverez sur Google Fonts. Au pire, venez demander un ajustement de code dans les commandes sur Pisrale.



CSS

  1. Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS

  2. Copier coller ça à l'intérieur :

    Code:
    /* FICHE GENERALE */

    .fichegeng{ width:100%; background:var(--fond2); padding:15px; border-radius:10px; text-align:justify; }
    .fichegeng.fichegenonglets{ padding:0; border-radius:0; background:none; }

    .fichegeng .fg-title{ font-size:20px; padding:10px; font-weight:900;
       border:1px solid var(--border1); border-radius:15px;}
    .fichegeng .fg-sstitle{ font-weight:bold; font-size:15px; background:var(--fond5); display:inline-block;
    border-radius:5px; padding:5px; }

    .fichegeng .fg-imgtxt{ display:flex; justify-content:space-between; margin:10px 0; }
    .fichegeng .fg-imgtxt img{ width:30%; object-fit:cover; border-radius:10px;
       outline:1px solid var(--txt1); outline-offset:-10px;   }
    .fichegeng .fg-imgtxt.reverse{ flex-direction:row-reverse; }
    .fichegeng .fg-imgtxt span{ width:69%; max-height:200px; overflow:auto; padding:10px; }

    .fichegeng .fg-threeimg{ width:80%; margin:5px auto; display:flex; justify-content:space-between; }
    .fichegeng .fg-threeimg img{ width:32%; border-radius:10px; height:100px; object-fit:cover;
    outline:1px solid var(--txt1); outline-offset:-10px;}

  3. Si vous utilisez la version avec les onglets, il faut ajouter ça après ce CSS :
    Code:
    /* Avec onglets */

    .fichegeng.fichegenonglets{ display:flex; justify-content:space-between; }
    .fichegeng.fichegenonglets .genong-t{ width:15%; }
    .fichegeng.fichegenonglets .genong-t div{ background:var(--fond3); padding:5px;
       border-radius:5px; font-weight:bold; margin-bottom:10px;font-size:14px; text-align:center;  }
    .fichegeng.fichegenonglets .genong-t .actif{ background:var(--fond3hover); }
    .fichegeng.fichegenonglets .genong-t br{ display:none; }
    .fichegeng.fichegenonglets .genong-c{ width:82%; }
    .fichegeng.fichegenonglets .genong-c .conglet{ display:none; background:var(--fond2); padding:10px; border-radius:10px; }
    .fichegeng.fichegenonglets .genong-c .conglet.actif{ display:block; }
    .fichegeng.fichegenonglets .genong-c br{ display:none; }
    .fichegeng.fichegenonglets .genong-c .conglet br{ content:none; display:inline; }



HTML SANS ONGLETS

  1. Il vous suffit de copier coller ça sur un message :

    Code:
    <div class="fichegeng"><!-- TITRE --><div class="fg-title">Règlement ou un titre plus long</div>
    <!-- SOUS TITRE --> <div class="fg-sstitle">Petit sous titre pour voir</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.
    <!-- IMAGE ET TEXTE --><div class="fg-imgtxt"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.

    Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div>
    <!-- IMAGE ET TEXTE INVERSE --><div class="fg-imgtxt reverse"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.

    Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div>
    <!-- TROIS IMAGES --><div class="fg-threeimg"><img src="https://i.pinimg.com/originals/87/59/fc/8759fc10b242ffe8025e2033b53770dd.gif"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><img src="https://static.tumblr.com/287b61b7ef3df0a6ac6d0d39443cd82b/wwutgi8/3huoayusd/tumblr_static_9i8rg8sl7m040k0csggc4gcgs_2048_v2.gif"></div>
    <!-- FIN FICHE GENERALE -->
    </div>

  2. Dans cette fiche générale il y a plusieurs blocs qui peuvent vous servir et ils sont tous commentés au besoin.



HTML AVEC ONGLETS

  1. Il faut copier coller ça sur un message :

    Code:
    <div class="fichegeng fichegenonglets"><!-- TITRE ONGLETS -->
    <div class="genong-t">
    <div class="onglet actif" data-onglet="onglet1">Onglet 1</div>
    <div class="onglet" data-onglet="onglet2">Onglet 2</div>
    <div class="onglet" data-onglet="onglet3">Onglet 3</div>
    <div class="onglet" data-onglet="onglet4">Onglet 4</div>
    </div>
    <!-- CONTENU ONGLETS --><div class="genong-c">
    <!-- ONGLET 1 --><div class="conglet actif" data-onglet="onglet1"><!-- TITRE --><div class="fg-title">Règlement ou un titre plus long</div>
    <!-- SOUS TITRE --> <div class="fg-sstitle">Petit sous titre pour voir</div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis.

    Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.
    <!-- IMAGE ET TEXTE --><div class="fg-imgtxt"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.

    Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div>
    <!-- IMAGE ET TEXTE INVERSE --><div class="fg-imgtxt reverse"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate bibendum dapibus. Donec maximus tortor ligula, eget suscipit leo vestibulum eget. Donec at nisi eu ante condimentum molestie. Nulla quis justo at elit eleifend semper. Donec vulputate arcu vel lacus porttitor, at faucibus eros facilisis. Cras erat neque, semper ut neque at, ullamcorper commodo ipsum. Integer non porta magna. Donec feugiat odio metus, at aliquam est cursus quis. Aliquam efficitur aliquet molestie. Aliquam erat volutpat.

    Maecenas lacus ex, finibus in sem eu, aliquam cursus libero. Morbi ultricies purus in lacus malesuada egestas. Nam tempus urna diam, vitae interdum ex porttitor quis. Donec fermentum sem et egestas rutrum. Curabitur tortor lacus, ultrices nec fermentum quis, rhoncus a ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed interdum ante gravida, ultricies sapien vel, euismod augue. </span></div>
    <!-- TROIS IMAGES --><div class="fg-threeimg"><img src="https://i.pinimg.com/originals/87/59/fc/8759fc10b242ffe8025e2033b53770dd.gif"><img src="https://i.pinimg.com/originals/65/7a/e6/657ae6f2ca8543d904f6e013b9857d0d.gif"><img src="https://static.tumblr.com/287b61b7ef3df0a6ac6d0d39443cd82b/wwutgi8/3huoayusd/tumblr_static_9i8rg8sl7m040k0csggc4gcgs_2048_v2.gif"></div>
    </div> <!-- FIN ONGLET 1 -->
    <!-- ONGLET 2 --><div class="conglet" data-onglet="onglet2">blabla onglet 2</div> <!-- FIN ONGLET 2 -->
    <!-- ONGLET 3 --><div class="conglet" data-onglet="onglet3">blabla onglet 3</div> <!-- FIN ONGLET 3 -->
    <!-- ONGLET 4 --><div class="conglet" data-onglet="onglet4">blabla onglet 4</div> <!-- FIN ONGLET 4 -->
    <!-- FIN FICHE GENERALE -->
    </div></div>

  2. Dans le panneau d'administration > modules > Pages javascript
    Assurez vous que le javascript est actif
    Ajoutez une page javascript en cochant "Sur toutes les pages"
    Puis ajouter ça :
    Code:
    $(document).ready(function(){
        $('.genong-t .onglet').click(function(){
            var onglet_id = $(this).attr('data-onglet');

            $('.onglet').removeClass('actif');
            $(this).addClass('actif');

            $('.conglet').removeClass('actif');
            $('.conglet[data-onglet=' + onglet_id + ']').addClass('actif');
        });
    });

  3. Dans cette fiche générale il y a plusieurs blocs qui peuvent vous servir et ils sont tous commentés au besoin.

  4. Pour ajouter un onglet, il faut ajouter dans les titres ce code:  
    Code:
    <div class="onglet" data-onglet="onglet4">Onglet 4</div>
    Avec dans le data-onglet un "onglet5" (ou 6 ou 7 ou x)
    Et même chose dans le contenu :
    Code:
    <!-- ONGLET 4 --><div class="conglet" data-onglet="onglet4">blabla onglet 4</div> <!-- FIN ONGLET 4 -->

  5. Pour supprimer, il suffit de supprimer le titre type "onglet1" puis supprimer le contenu qui correspond donc par exemple "onglet1"

Revenir en haut

Nos amis proches

Fiche générale Parto512 Life Is Strange L'AnnuaireImage Mirror of MagicFiche générale B-squareAinsi tomba ThédasDuralasCoeur de la force