KoalaVolant
Ven 26 Mai 2023 - 13:41
Version du forum : PHPBB2
Ceci est un code appartenant à un thème complet. Vous pouvez
Voir le thème complet "Sombre Pose"
Si vous utilisez d'autres codes de ce thème, vous n'avez pas besoin de recopier-coller la partie "couleurs".
Voir le thème complet "Sombre Pose"
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 (codage) & Andrea (idées, maquette & couleurs)
- Les images se redimensionnent toutes seules
- C'est un mélange entre Twitter et Instagram.
- 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
- 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 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
Personnaliser mon code
Signaler un souci - 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;
}
- 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">
- Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts
CSS
- Afin d'être utilisé partout, le CSS est externe
- 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
Suivi
Nom du compte@pseudo
Info / Bio
100 posts
100 abonnés
100 abonnements
+Story
Pseudo
Pseudo
Pseudo
Pseudo
Pseudo
PseudoPosts
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 commentaires
100 likes100 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
Nom
Pseudo
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
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
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>
|
|
|
