Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Pisrale

Venez retrouver du libre service divers en graphisme (avatars, icons, gifs, etc. . . ) ou codage (fiche rp, signatures, templates, etc. . . ) et ce sans inscription avec commande possible, c'est chez

-45%
Le deal à ne pas rater :
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre 14 couverts – ...
339 € 622 €
Voir le deal

Fiche générale

Pisrale :: Codages :: Thèmes complets :: Gang Technology
KoalaVolant
KoalaVolant
Mar 20 Déc 2022 - 10:34
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Gang Technology"
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 et 0tsana
- Il y a plusieurs blocs disponibles pour faire des variations de présentation de la fiche
- Il existe une version Chronologie, Staff & Validation

Couleurs


  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, mais quand vous les modifierez, elles se modifieront partout où les "variables" sont utilisées.

    Ce code utilise un système de “variables” rangé dans un “:root”.
    Si vous trouvez :root { } dans votre CSS déjà actuel, coller ce qu’il y a à l’intérieur du :root suivant, dans celui que vous possédez déjà.
    Attention, il peut y avoir des conflits de variable. Il ne peut pas y avoir deux mêmes variables. (genre, pas deux fois de --color1). Si c’est le cas, il suffit de renommer “--fond” par exemple en “--main-color-banane” (ce que vous voulez), partout dans le code.
    Pour rechercher et remplacer dans tout un code : https://convertir.github.io/outils/remplacer-texte-en-ligne.html

    Note : Si vous utilisez plusieurs codes de Pisrale indifférents de ce thème, il y a des chances qu’il y ait des conflits. Si vous voulez qu’on modifie les codes pour vous, suivez un de ces bouton

    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{
        --fond-deg:linear-gradient(90deg, var(--dark) 32.29%, var(--light) 89.86%);
        --fond-img:url('https://www.zupimages.net/up/22/45/f0t6.png');
        --fond-img2:url('https://www.zupimages.net/up/22/45/f0t6.png');
        --fond-bodyline:#4d4d4d;
        --dark:#531b37;
        --light:#88263C;
        
        --black:#FDE8ED;
        --white:#dedede;
      --whitef:#363636;
        
        --text-shadow:0px 0px 0px #757575;
        --font-text:'Inter', sans-serif;
        --font-title:'GothamPro', sans-serif;
      
      --groupe1:#d7ba83;
    --groupe2:#ff85a7;
    --groupe3:#88c6ff;
    --groupe4:#6ed373;
    }

  3. Attention, les polices d'écriture utilisées sur ce thème sont "Inter" et "Gotham Pro" dans ce but, donc, il vous faudra les installer. Pour ça, connectez vous au compte fondateur, allez dans le Panneau d'administration > Affichage > Templates > Haut du forum (overall-header) et avant le "< /head>" (sans espace), copiez coller ça :
    Code:
      <!-- FONTS DU FORUM -->
      <link href="https://cdn.statically.io/gist/mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/fad2f254369fb54250260077a4c87391a6280c52/gotham.css" rel="stylesheet">
        <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">

  4. Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts Very Happy



HTML

  1. Copier coller ça :

    Code:
    <div class="bylgen"><div class="byltitle">Titre de quoi ça va parler genre : règlement</div>
    <div class="byltext">
    <div class="byltitle5"><span>01.</span>Sous titre bonjour</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in molestie nibh. Vivamus congue justo ipsum, vitae tristique diam blandit sed. Praesent vitae aliquam risus, non commodo ligula. Aliquam mollis leo ut commodo vehicula. Sed ut velit sed lectus lacinia sollicitudin. Nunc non lacus ipsum. Nullam pulvinar a nisl eget vulputate. Morbi eget magna id erat tempus mollis. Maecenas dui orci, ultricies sagittis interdum eget, ornare et nisl. Suspendisse sit amet velit eros. Maecenas sed mollis massa. Sed tincidunt ipsum quis magna consectetur hendrerit.

    Etiam felis velit, vulputate et odio tempus, lobortis porttitor leo. Nam sed venenatis metus. Suspendisse commodo viverra justo nec convallis. Proin quis tellus lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat placerat urna. Cras in vehicula ipsum, in efficitur felis. Nullam venenatis, mauris quis cursus auctor, nisi libero vulputate ipsum, vitae varius tortor est id nibh. Curabitur ullamcorper, arcu vitae sodales sodales, felis massa hendrerit leo, ut viverra nibh erat ut ligula. Cras blandit vulputate metus, a efficitur enim posuere vel. Morbi suscipit finibus iaculis. Vivamus non ante nibh.

    <div class="byl4img"><div class="byl4imgleft"><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><em>Clic sur les images pour voir + grand</em></div><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

    <div class="byl4img reverse"><div class="byl4imgleft"><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><em>Clic sur les images pour voir + grand</em></div><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

    <div class="byl2col"><a href="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif" target="_blank"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/><em>Voir plus grand</em></a><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

    <div class="byl2col reverse"><a href="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif" target="_blank"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/><em>Voir plus grand</em></a><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

    <div class="bylexaimg"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"></div>
    <div class="bylimg2"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"></div>
    <div class="bylimg2"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"></div>
    <!-- FIN DE LA FICHE GENERALE -->
    </div>



Utiliser les différents blocs

  1. Pour le premier bloc, c'est le titre. Il peut être avec ou sans chiffre à l'intérieur du carré. Si vous enlevez le "span" qui contient le chiffre, le carré disparaît.
    Code:
    <div class="byltitle5"><span>01.</span>Sous titre bonjour</div>

  2. Il y a deux types de "quatre images avec un lien en dessous", l'un avec le texte à droite, et l'autre avec le texte à gauche. L'information de "cliquez pour voir en plus grand" peut être enlevé si vous enlevé le "em". Chaque image a son propre lien pour voir en plus grand. Pour inverser l'ordre (mettre le texte à gauche), il faut ajouter "reverse" comme classe à byl4img.
    Code:
    <div class="byl4img"><div class="byl4imgleft"><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><em>Clic sur les images pour voir + grand</em></div><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>
    Code:
    <div class="byl4img reverse"><div class="byl4imgleft"><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><a href=""><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/></a><em>Clic sur les images pour voir + grand</em></div><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

  3. Il y a deux types de "une image avec le texte", l'un avec le texte à droite, et l'autre avec le texte à gauche. L'information de "voir en plus grand" peut être enlevé si vous enlevez le "em".  L'image a son propre lien pour voir en plus grand. Pour inverser l'ordre (mettre le texte à gauche), il faut ajouter "reverse" comme classe à byl2col.
    Code:
    <div class="byl2col"><a href="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif" target="_blank"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/><em>Voir plus grand</em></a><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>
    Code:
    <div class="byl2col reverse"><a href="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif" target="_blank"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"/><em>Voir plus grand</em></a><span>Donec sit amet arcu ac lacus tincidunt sodales ac vitae diam. Fusce ac erat lorem. Quisque ac commodo ante. Mauris posuere sed lacus non blandit. Pellentesque facilisis tincidunt lobortis. Quisque a elementum ex. Duis tristique et nibh at bibendum. Ut vel dolor nec metus euismod rutrum. In molestie vitae ante at aliquam.</span></div>

  4. Pour les trois images en octogone, d'autres images peuvent être ajoutées ou vous pouvez en enlever.
    Code:
    <div class="bylexaimg"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"></div>

  5. Pour les deux images ou quatre images en  pleine largeur, vous pouvez rajouter plus d'images. C'est le même bloc.
    Code:
    <div class="bylimg2"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"><img src="https://i.pinimg.com/originals/7d/b1/0d/7db10d3d4e1f112380cfd3f7a3d3c5cd.gif"></div>



CSS

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

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

    Code:
    /******************* FICHE GENERALE **************/

    .bylgen{ width:95%; margin:0 auto;  }
    .bylgen .byltitle{ background:var(--fond-deg); padding:20px; font-size:15px; text-transform:uppercase; letter-spacing:2px; line-height:17px; color:var(--white); font-family:var(--font-title); font-weight:200; text-align:left;}

    .bylgen a{ color:var(--dark) !important; }
    .bylgen a:hover{ color:var(--light); }
    .bylgen .byltext{ background:var(--white); color:#222; padding:20px; text-align:justify; font-size:12px; line-height:1.3em; }
    .bylgen .byltitle5{ position:relative; font-size:18px; color:var(--dark); padding-left:45px; border-bottom:var(--dark) 1px solid; padding-bottom:5px;}
    .bylgen .byltitle5 span{position:absolute; top:-10px; left:0;  display:block; background:var(--fond-deg); width:30px; height:30px; padding:10px 3px; color:var(--white); font-weight:500; font-family:var(--font-title);  }

    /* IMAGES EN OCTOGONE */

    .bylexaimg{ display:flex; width:100%; justify-content:center; margin:10px 0;  }
    .bylexaimg img{ width:25%; height:120px; margin:5px; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); outline:1px solid white; outline-offset:-5px;  }

    /* IMAGES PLUSIEURS */
    .bylimg2{ display:flex; justify-content:center;  }
    .bylimg2 img{ min-width:20%; width:50%; max-width:50%; margin:5px; height:80px; }

    /* IMAGE PLUS TEXTE */

    /* COMMUN*/

    .byl4img, .byl2col{ margin:10px 0; display:flex; justify-content:space-between; align-items:flex-start;}
    .byl2col span, .byl4img span{ width:59%; }
    .byl4img .byl4imgleft, .byl2col a{ display:block; width:39%; }
    .byl4img em, .byl2col em{ display:block; background:var(--fond-deg); text-align:center; padding:3px; color:var(--white); letter-spacing:2px; }
    .byl4img.reverse, .byl2col.reverse{ flex-direction:row-reverse; }
    .byl2col img, .byl4img img{ opacity:0.8; transition:500ms; }
    .byl2col img:hover, .byl4img img:hover{ opacity:1; transition:500ms; }
    /* Image plus texte */

    .byl2col a img{ width:100%; height:200px; }

    /* Quatre images + texte */

    .byl4img .byl4imgleft{ display:flex; flex-wrap:wrap; }
    .byl4img .byl4imgleft a{ display:block; width:47%; margin:2px; }
    .byl4img .byl4imgleft img{ width:100%; height:100px; object-fit:cover; }
    .byl4img .byl4imgleft em{ width:97.5%; }

Revenir en haut

Fiche générale

Pisrale :: Codages :: Thèmes complets :: Gang Technology

Nos amis proches

Fiche générale Parto512 Logo WyvArtem