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

Le Deal du moment :
Officiel : la nouvelle extension spéciale ...
Voir le deal

Twittagram

Pisrale :: Codages :: Thèmes complets :: Sombre Pose
KoalaVolant
KoalaVolant
Ven 26 Mai 2023 - 13:41
Version du forum : PHPBB2

Ceci est un code appartenant à un thème complet. Vous pouvez
[Vous devez être inscrit et connecté pour voir ce lien]
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".




[Vous devez être inscrit et connecté pour voir cette image]


Particularités du code :
- Crédits : KoalaVolant (codage) & Andrea (idées, maquette & couleurs)
- Les images se redimensionnent toutes seules
- C'est un mélange entre Twitter et Instagram.

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, 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 : [Vous devez être inscrit et connecté pour voir ce lien]

    Note : Si vous utilisez plusieurs codes de Pisrale n'appartenant pas à 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 boutons

    [Vous devez être inscrit et connecté pour voir ce lien]

  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:
      /* COLORS */

      :root{
     
      --font1:'Encode Sans', sans-serif;
      --font2:'Fjalla One', sans-serif;
     
      --fond:#1c1c1c;
      --fond2:#666464;
      --fond3:#2c2c2c;
      --text: #959494;
      --text2:#848484;
      --black:#000;
        --colorp:#9860b1;
      --degrade:linear-gradient(90deg, #5e3172 0%, #000 100%);
      --degrade-hover:linear-gradient( #000,#5e3172);
     
      --bg-img:url('https://i.imgur.com/x5JsKHa.png');
    --box-shadow:rgba(0,0,0,0.75);

        /* Couleurs groupes */
        
          --groupe1:#c01919;
          --groupe2:#474ec8;
          --groupe3:#A000F0;
          --groupe4:#E09421;
          --groupe5:#509E4C;
      }

  3. Attention, les polices d'écriture utilisées sur ce thème sont "Encode Sans" et "Fjalla One" 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:
       <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&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



CSS
  1. Afin d'être utilisé partout, le CSS est externe Very Happy

  2. Ceci dit les couleurs sont modifiables par vos soins dans le root au début :3 (présent uniquement sur l'entête)


HTML de l'entête






[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]


Suivi



Nom du compte@pseudo

Info / Bio



100 posts
100 abonnés
100 abonnements



+Story
[Vous devez être inscrit et connecté pour voir cette image]Pseudo
[Vous devez être inscrit et connecté pour voir cette image]Pseudo
[Vous devez être inscrit et connecté pour voir cette image]Pseudo
[Vous devez être inscrit et connecté pour voir cette image]Pseudo
[Vous devez être inscrit et connecté pour voir cette image]Pseudo
[Vous devez être inscrit et connecté pour voir cette image]Pseudo




Posts




[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires
[Vous devez être inscrit et connecté pour voir cette image]100 likes
100 commentaires




Code:
<link href="https://coderps.xyz/codesrps3/twittagram.css" rel="stylesheet" type="text/css" />
<style> :root{ --font1:'Encode Sans', sans-serif; --font2:'Fjalla One', sans-serif; --fond:#1c1c1c; --fond2:#666464; --fond3:#2c2c2c; --text: #959494; --text2:#848484; --black:#000; --colorp:#9860b1; --degrade:linear-gradient(90deg, #5e3172 0%, #000 100%); --degrade-hover:linear-gradient( #000,#5e3172); --bg-img:url('https://i.imgur.com/x5JsKHa.png'); --box-shadow:rgba(0,0,0,0.75) }</style>
<div class="twittgram">
<div class="imagescouvprofil">
<!-- Image de couverture -->
<img src="https://images.unsplash.com/photo-1674436969426-4b0442897df8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" class="coverimg"/>
<!-- Image de profil -->
<img src="https://zupimages.net/up/22/42/udn7.png" class="profilimg"/>
</div>
<!-- Suivi -->
<div class="suivilabel">Suivi</div>
<!-- Nom du compte et info -->
<div class="comptelabel">
<span>Nom du compte<em>@pseudo</em></span>
</div>
<div class="infolabel">Info / Bio</div>
<!-- Posts, abonnes, abonnements -->
<div class="abonnelabel">
<span><strong>100</strong> posts</span>
<span><strong>100</strong> abonnés</span>
<span><strong>100</strong> abonnements</span>
</div>
<!-- Story et images -->
<div class="storygram">
<span class="plusstory"><strong>+</strong>Story</span>
<span><img src="https://i.ibb.co/TrxhrGP/Film-Affiche13.jpg"/>Pseudo</span>
<span><img src="https://zupimages.net/up/22/32/c71z.png"/>Pseudo</span>
<span><img src="https://i.imgur.com/5zp1czK.jpg"/>Pseudo</span>
<span><img src="https://i.imgur.com/AIaMZK9.jpg"/>Pseudo</span>
<span><img src="https://i.imgur.com/c9zciTm.jpg"/>Pseudo</span>
<span><img src="https://i.imgur.com/jJQSqhK.jpg"/>Pseudo</span>
</div>
<!-- Post et Tag -->
<div class="posttaggram">
<div class="postgramtitle">
<span class="postgr1">Posts</span>
</div>
<div class="postgramimg">
<!-- Posts -->
<div class="postgramimg1 blocpost woosh">
<span><img src="https://i.imgur.com/KM5jhY7.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.imgur.com/jzTXZNm.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.servimg.com/u/f30/19/45/51/53/castie10.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.servimg.com/u/f30/19/45/51/53/aesthe13.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.imgur.com/KM5jhY7.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.imgur.com/jzTXZNm.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.servimg.com/u/f30/19/45/51/53/castie10.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.servimg.com/u/f30/19/45/51/53/aesthe13.jpg"/><strong>100 likes
100 commentaires</strong></span>
<span><img src="https://i.servimg.com/u/f30/19/45/51/53/aesthe13.jpg"/><strong>100 likes
100 commentaires</strong></span>
</div>
<!-- Fin posts tag et entète twittagram-->
</div></div></div>

HTML du post avec image façon Instagram




[Vous devez être inscrit et connecté pour voir cette image]
Nom
Pseudo



[Vous devez être inscrit et connecté pour voir cette image]
500 likes
The humans are about to launch an attack. And we will show them that we are not afraid. If we must die today, then we will die free.

Date / heure



Code:
<link href="https://coderps.xyz/codesrps3/twittagram.css" rel="stylesheet" type="text/css" /><div class="blocgram1 blocblocgram">
<!-- Info profil -->
<div class="blocflexgram">
<img src="https://i.imgur.com/jJQSqhK.jpg"/>
<span><em>Nom</em>
<strong>Pseudo</strong></span>
</div>
<!-- Message image -->
<div class="blocpostgram">
<img src="https://i.pinimg.com/564x/7f/b7/48/7fb748cd4dc83c9230cb22e511b5c997.jpg"/>
<span class="likesgram">500 likes</span>
<span class="descgram">The humans are about to launch an attack. And we will show them that we are not afraid. If we must die today, then we will die free.</div>
<span class="heuregram">Date / heure</span>
<!-- Fin du post -->
</div></div>

HTML du post sans image façon Twitter




[Vous devez être inscrit et connecté pour voir cette image]
Nom
Pseudo




It's my fault the humans managed to locate Jericho... I was stupid... I should've guessed they were using me. I'm sorry, Markus... I can understand if you decide not to trust me...
500 likes

Date / heure



Code:
<link href="https://coderps.xyz/codesrps3/twittagram.css" rel="stylesheet" type="text/css" /><div class="blocgram3 blocblocgram">
<!-- Info profil -->
<div class="blocflexgram">
<img src="https://i.imgur.com/jJQSqhK.jpg"/>
<span><em>Nom</em>
<strong>Pseudo</strong></span>
</div>
<!-- Message image -->
<div class="blocpostgram">
<div class="flexgram2">
<span class="descgram">It's my fault the humans managed to locate Jericho... I was stupid... I should've guessed they were using me. I'm sorry, Markus... I can understand if you decide not to trust me...</span>
<span class="likesgram">500 likes</span>
</div>
<span class="heuregram">Date / heure</span>
<!-- Fin du post -->
</div></div>

HTML du commentaire




Nom
@pseudo



[Vous devez être inscrit et connecté pour voir cette image]
You're the hope of our people. I trust you. We all trust you. No matter what happens now, we're making history.
500 likes

Date / heure



Code:
<link href="https://coderps.xyz/codesrps3/twittagram.css" rel="stylesheet" type="text/css" /><div class="blocgram2 blocblocgram">
<!-- Nom -->
<span class="nompseudogram">
<strong>Nom</strong>
<em>@pseudo</em>
</span>
<!-- Info profil -->
<div class="blocflexgram">
<img src="https://i.imgur.com/jJQSqhK.jpg"/>
<span class="messgram">You're the hope of our people. I trust you. We all trust you. No matter what happens now, we're making history.</span>
<span class="likesgram">500 likes</span>
</div>
<span class="heuregram">Date / heure</span>
<!-- Fin du post -->
</div>
Revenir en haut

Twittagram

Pisrale :: Codages :: Thèmes complets :: Sombre Pose

Nos amis proches

RPG-Chevalier Logo WyvArtem Image hébergée gratuitement chez Twittagram Parto512