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

AccueilAccueil  
  • RechercherRechercher  
  • S'enregistrerS'enregistrer  
  • ConnexionConnexion  
    • Forum sans inscription - Si vous voulez en savoir plus ou rejoindre éventuellement l'équipe, découvrez le concept
    Commandes demander des créations aux gens de PisraleBoite à idée de créations proposez des idées de créations qui manquent sur PisraleFaceclaim réels trouver une bouille réelleFaceclaim illustré trouver une bouille illustréeBesoin d'un faceclaim pour que Pisrale vous propose une bouilleRemarques questions, suggestions, corrections des invités
    Dernières news (10/11)Discord
    (sans flood)
    Le Deal du moment : -55%
    Friteuse sans huile – PHILIPS – Airfryer ...
    Voir le deal
    49.99 €

    Présentation du staff

    Pisrale :: Codages :: Thèmes complets :: Gang Technology
    KoalaVolant
    KoalaVolant
    Mar 20 Déc 2022 - 10:33
    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 & 0tsana
    - Il y a plusieurs blocs disponibles pour faire des variations de présentation de la fiche
    - Il existe une version Générale, Validation & Chronologie

    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">Le staff</div>
      <div class="byltext">
      <div class="bylstaffpres"><img src="https://c.tenor.com/XhGrKqrkQWwAAAAd/dechart-games-bryan-dechart.gif" class="bylstaffimg"/><span><cad2>Votre/Vos pseudos</cad2> aka <strong>votre pseudo</strong>

      Là vous vous présentez youpi
      </span></div>
      <div class="bylstaffpres reverse"><img src="https://thumbs.gfycat.com/CompetentGrimyGermanpinscher-size_restricted.gif" class="bylstaffimg"/><span><cad2>Votre/Vos pseudos</cad2> aka <strong>votre pseudo</strong>

      Là vous vous présentez youpi
      </span></div>
      <!-- FIN DE LA FICHE GENERALE -->
      </div>



    Bloc et bloc inversé

    1. Pour inverser le bloc il suffit d'ajouter "reverse" là où il y a la classe "bylstaffpres".

    2. Sinon bloc pas inversé :
      Code:
      <div class="bylstaffpres"><img src="https://c.tenor.com/XhGrKqrkQWwAAAAd/dechart-games-bryan-dechart.gif" class="bylstaffimg"/><span><cad2>Votre/Vos pseudos</cad2> aka <strong>votre pseudo</strong>

      Là vous vous présentez youpi
      </span></div>
      Et bloc inversé :
      Code:
      <div class="bylstaffpres reverse"><img src="https://thumbs.gfycat.com/CompetentGrimyGermanpinscher-size_restricted.gif" class="bylstaffimg"/><span><cad2>Votre/Vos pseudos</cad2> aka <strong>votre pseudo</strong>

      Là vous vous présentez youpi
      </span></div>



    CSS

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

    2. Si vous n'avez pas la fiche générale.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);  }


    3. Et que vous ayez déjà la fiche générale ou pas, copiez coller ça en plus :

      Code:
      /* STAFF */

      .bylstaffpres{ display:flex; justify-content:space-between; }
      .bylstaffpres .bylstaffimg{ width:20%; height:200px; }
      .bylstaffpres span{ width:77%; background:hsl(0,0%,97%); padding:10px; height:200px; overflow:auto; }
      .bylstaffpres span strong{ font-family:var(--font-title); letter-spacing:1px; color:var(--dark);}
      .bylstaffpres.reverse{ flex-direction:row-reverse; }

      /* DÉBUT TYPO PERSONNALISÉ */
      u1 {text-decoration: none;box-shadow: inset 0px -5px 0px rgb(133, 74, 99);}
      u2 {text-decoration: none;box-shadow: inset 0px -5px 0px rgb(110, 41, 70);}
      u3 {text-decoration: none;border-bottom: dotted 2px #6e2946;}

      cad1 {color:#ffffff;background:#854a63;}
      cad2 {color:#ffffff;background:#6e2946;}
      cad1 a, cad2 a{ color:#fff !important; }

      i1 {font-weight:bold !important; font-style:italic !important; font-size:12px !important; color:#854a63 !important;font-family:Calibri !important;}
      i2 {font-weight:bold !important; font-style:italic !important; font-size:12px !important; color:#6e2946 !important;font-family:Calibri !important;}

      b1 {font-weight:regular !important; font-size:12px !important; color:#854a63 !important; font-family:Impact !important; letter-spacing:1px;}
      b2 {font-weight:regular !important; font-size:12px !important; color:#6e2946 !important; font-family:Impact !important; letter-spacing:1px;}
      /* FIN TYPO PERSONNALISÉ */
    Revenir en haut

    Présentation du staff

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

    Nos amis proches

    Présentation du staff Parto512 Life Is Strange L'AnnuaireImage Présentation du staff B-squareAinsi tomba ThédasDuralasCoeur de la force