Fiche de partenariat

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

KoalaVolant

Ven 26 Mai 2023 - 13:39

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".

Particularités du code :
- Crédits : KoalaVolant (codage) & Andrea (maquette & couleurs)
- Les images se redimensionnent toutes seules

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

Façon Iframe

Allez dans le panneau d'admin côté Modules > Pages HTML

Dans une nouvelle page HTML copier coller ça :

Code:

<style>/* COULEURS */ :root{ --font1:'Encode Sans', sans-serif; --font2:'Fjalla One', sans-serif; --fond:#1c1c1c; --fond2:#666464; --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'); } body{ background:#444; } body, body *{ box-sizing:border-box; } /* GLOBAL */ .partntos img{ object-fit:cover; } /* HEADER */ .partntos{ width:500px; margin:0 auto; padding:10px; background:var(--fond); border:3px double black; } .partntos .headerntos img{ width:100%; } /* TITRE */ .partntos h1{ font-size:25px; font-family:var(--font2); text-align:center; text-transform:uppercase; color:var(--colorp); } .partntos h1 span{ font-size:15px; font-family:var(--font1); text-align:center; display:block; color:var(--text); } /* NOMBRE DE MESSAGES */ .partmessmem{ display:flex; justify-content:space-between; } .partmessmem span{ width:48%; display:block; text-align:center; background:var(--fond);border:1px solid var(--black); font-family:var(--font1); padding:3px; color:var(--text); } .partmessmem span strong{ font-family:var(--font2); color:var(--colorp); } /* Contexte */ .partcont{ padding:10px; text-align:justify; font-family:var(--font1); font-size:13px; line-height:14px; color:var(--text); } /* Flex info new */ .partflex{ display:flex; justify-content:space-between; } .partflex > div{ width:49%; border:1px solid var(--black); font-family:var(--font1); color:var(--text); font-size:14px; line-height:15px; padding:10px;} .partflex .titrentos{ background:var(--degrade); display:block; width:100%; padding:4px; font-size:13px; letter-spacing:1px; color:var(--text); margin-bottom:10px; } .blocflex{ height:200px; overflow:auto; } /* Liens */ .partliens{ display:flex; flex-wrap:wrap; justify-content:center; margin:5px auto; } .partliens a{ display:block; margin:2px 2px; background:var(--degrade); color:var(--text); font-family:var(--font2); width:32%; text-decoration:none; padding:5px; text-align:center; transition:500ms;} .partliens a:hover{ background:var(--degrade-hover); letter-spacing:1px; transition:500ms; } /* Image de fin */ .imagedefin{ width:105.5%; position:relative; left:-13px; height:100px; object-fit:cover; bottom:-13px; } </style> <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap" rel="stylesheet"><meta charset="UTF-8">  <div class="partntos">  <a class="headerntos" target="_blank" href="lienduforum"><img src="https://2img.net/i.ibb.co/Xb89kcG/nigrum2.gif"/></a>  <h1>Nigrum Times of Seattle <span>Les curlys c'est pas que pour les amis</span> </h1>  <div class="partmessmem"> <span><strong>120</strong> membres</span> <span><strong>120000</strong> messages</span> </div>  <div class="partcont"> Vous êtes-vous déjà demandé si les créatures surnaturelles qui peuplent nos contes ne sont pas réelles ? Oui, je suis sûr que c’est le cas. Mais, le doute vous assailles, la raison aussi. Sauf qu’à Seattle, fêtant l’année 2025, la révélation a eu lieu. Ils existent et revendiquent leur droit. Il y a pourtant eu des soulèvements, des contres, mais aussi des pour. Et leur voix a été entendue, ils ont été acceptés dans cette ville qui se proclame berceau et refuge de ceux-là. Une terre d’asile pour les êtres rejetés depuis la nuit des temps… Mais à quel prix ? La cité déjà ravagée par une montée de trois gang puissants, les Egets Mortem, les Voluptas Sexualis et les Partes Tenebrosa, certains voient une nouvelle menace s’ajouter à un problème ambulant que personne ne règle. Le gouvernement les a abandonnés, les rumeurs disent que le maire, Percy Gavin, est de mèche avec ses bandits et que les autorités ont décidé de cacher le nid de vipères par un autre. Monsieur Gavin a perdu l’autorité de sa citadelle, au fond là-t-il eu ne serait-ce qu’une fois ? Connu par ses habitants pour ses promesses non-tenues l’avarice qui le ronge et le titre. Si vous comptez sur la police, vous pouvez abandonner, certes certains se battre pour une justice qui est essoufflée. Cependant, d’autres prennent l’image de leur maire, assouvie eux aussi à l’autorité des gangs, ils ont jetés l’éponge. Et c’est à ce moment-là que vous foulez la terre de Seattle, libératrice d’apparence, mais là où le mal réside secrètement dans son amertume la plus absolue. Je n’ai qu’une chose à vous dire, Puisse le sort, vous êtes favorable et bienvenue à Seattle ! </div>  <div class="partflex">  <div class="blocflex"><span class="titrentos">Infos générales</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>  <div class="blocflex"><span class="titrentos">News</span>Lorrelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div>  <div class="partliens"> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> </div>  <img src="https://2img.net/i.ibb.co/Xb89kcG/nigrum2.gif" class="imagedefin"/>  </div>

Et vous mettez ça dans le sujet de votre fiche (en remplissant avec le bon lien ) :

Code:

<center><iframe scrolling="no" frameborder="0" marginheight="0" style="width: 500px; height: 1320px;" src="LE LIENDE VOTRE FICHE"></iframe></center>

Façon sans Iframe

Pour la façon sans Iframe, les couleurs sont au début, et il ne faut surtout pas sauter de ligne, et les remplacer sont plus embêtantes, mais voici :

Code:

<style>/* COULEURS */ :root{ --font1:'Encode Sans', sans-serif; --font2:'Fjalla One', sans-serif; --fond:#1c1c1c; --fond2:#666464; --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'); } body{ background:#444; } body, body *{ box-sizing:border-box; } /* GLOBAL */ .partntos img{ object-fit:cover; } /* HEADER */ .partntos{ width:500px; margin:0 auto; padding:10px; background:var(--fond); border:3px double black; } .partntos .headerntos img{ width:100%; } /* TITRE */ .partntos h1{ font-size:25px; font-family:var(--font2); text-align:center; text-transform:uppercase; color:var(--colorp); } .partntos h1 span{ font-size:15px; font-family:var(--font1); text-align:center; display:block; color:var(--text); } /* NOMBRE DE MESSAGES */ .partmessmem{ display:flex; justify-content:space-between; } .partmessmem span{ width:48%; display:block; text-align:center; background:var(--fond);border:1px solid var(--black); font-family:var(--font1); padding:3px; color:var(--text); } .partmessmem span strong{ font-family:var(--font2); color:var(--colorp); } /* Contexte */ .partcont{ padding:10px; text-align:justify; font-family:var(--font1); font-size:13px; line-height:14px; color:var(--text); } /* Flex info new */ .partflex{ display:flex; justify-content:space-between; } .partflex > div{ width:49%; border:1px solid var(--black); font-family:var(--font1); color:var(--text); font-size:14px; line-height:15px; padding:10px;} .partflex .titrentos{ background:var(--degrade); display:block; width:100%; padding:4px; font-size:13px; letter-spacing:1px; color:var(--text); margin-bottom:10px; } /* Liens */ .partliens{ display:flex; flex-wrap:wrap; justify-content:center; margin:5px auto; } .partliens a{ display:block; margin:2px 2px; background:var(--degrade); color:var(--text) !important; font-family:var(--font2); width:32%; text-decoration:none; padding:5px; text-align:center; transition:500ms;} .partliens a:hover{ background:var(--degrade-hover); letter-spacing:1px; transition:500ms; } /* Image de fin */ .imagedefin{ width:105.5%; max-width:105.5% !important;position:relative; left:-13px; height:100px; object-fit:cover; bottom:-13px; } </style> <link href="https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300;400;600;700;800;900&family=Fjalla+One&display=swap" rel="stylesheet">  <div class="partntos">  <a class="headerntos" target="_blank" href="lienduforum"><img src="https://2img.net/i.ibb.co/Xb89kcG/nigrum2.gif"/></a>  <h1>Nigrum Times of Seattle <span>Les curlys c'est pas que pour les amis</span> </h1>  <div class="partmessmem"> <span><strong>120</strong> membres</span> <span><strong>120000</strong> messages</span> </div>  <div class="partcont"> Vous êtes-vous déjà demandé si les créatures surnaturelles qui peuplent nos contes ne sont pas réelles ? Oui, je suis sûr que c’est le cas. Mais, le doute vous assailles, la raison aussi. Sauf qu’à Seattle, fêtant l’année 2025, la révélation a eu lieu. Ils existent et revendiquent leur droit. Il y a pourtant eu des soulèvements, des contres, mais aussi des pour. Et leur voix a été entendue, ils ont été acceptés dans cette ville qui se proclame berceau et refuge de ceux-là. Une terre d’asile pour les êtres rejetés depuis la nuit des temps… Mais à quel prix ? La cité déjà ravagée par une montée de trois gang puissants, les Egets Mortem, les Voluptas Sexualis et les Partes Tenebrosa, certains voient une nouvelle menace s’ajouter à un problème ambulant que personne ne règle. Le gouvernement les a abandonnés, les rumeurs disent que le maire, Percy Gavin, est de mèche avec ses bandits et que les autorités ont décidé de cacher le nid de vipères par un autre. Monsieur Gavin a perdu l’autorité de sa citadelle, au fond là-t-il eu ne serait-ce qu’une fois ? Connu par ses habitants pour ses promesses non-tenues l’avarice qui le ronge et le titre. Si vous comptez sur la police, vous pouvez abandonner, certes certains se battre pour une justice qui est essoufflée. Cependant, d’autres prennent l’image de leur maire, assouvie eux aussi à l’autorité des gangs, ils ont jetés l’éponge. Et c’est à ce moment-là que vous foulez la terre de Seattle, libératrice d’apparence, mais là où le mal réside secrètement dans son amertume la plus absolue. Je n’ai qu’une chose à vous dire, Puisse le sort, vous êtes favorable et bienvenue à Seattle ! </div>  <div class="partflex">  <div class="blocflex"><span class="titrentos">Infos générales</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>  <div class="blocflex"><span class="titrentos">News</span>Lorrelease of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </div>  <div class="partliens"> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> <a href="" target="_blank">Lien</a> </div>  <img src="https://2img.net/i.ibb.co/Xb89kcG/nigrum2.gif" class="imagedefin"/>  </div>

Sujets similaires

Fiche de partenariat

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

Nos amis proches