KoalaVolant
Mar 20 Déc 2022 - 10:36
Version du forum : PHPBB2
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".
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
- Les images se redimensionnent toutes seules
- Crédits : KoalaVolant
- 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:
: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;
}
- 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">
- Vous pouvez bien sûr changer les fonts par autre chose, en allant vous servir sur Google Fonts
HTML
- Avec le compte fondateur, il faut aller dans Panneau d'administration > Affichage > Templates > topics_list_box
Appuyez sur la roue crantée pour le modifier - Copier coller ça à l'intérieur :
- Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
var all_checked = true;
for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
}
}
document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
}
}
}
</script>
<!-- END multi_selection -->
<table class="forumline subjects-total" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- BEGIN pagination -->
<tr>
<td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
</tr>
<!-- END pagination -->
<!-- END header_table --><!-- BEGIN header_row -->
<tr>
<td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
</tr>
<!-- END header_row -->
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
<tr class="subj-body">
<td class="img-subj">
<img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
</td>
<td class="subj-tit-descr">
<h2 class="topic-title">{topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</h2>
<div class="descrauth"><span class="genmed descrsbj">
<!-- BEGIN switch_description -->{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} <!-- END switch_description -->
</span> <span class="auth-naiss">Crée par {topics_list_box.row.TOPIC_AUTHOR}</span>
</div>
</td>
<td class="author-vuerep">
<div class="authone"> <!-- BEGIN avatar -->
<span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<div class="author-mess">{topics_list_box.row.LAST_POST_TIME}<br /><span class="dern-rep">{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></div>
</div>
<div class="vues-mess"><span>{topics_list_box.row.VIEWS} vues / {topics_list_box.row.REPLIES} réponses</span></div>
</td>
<!-- BEGIN multi_selection -->
<td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
<!-- END multi_selection -->
</tr>
<!-- END topic --><!-- BEGIN no_topics -->
<tr>
<td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
</tr>
<!-- END no_topics --><!-- BEGIN bottom -->
<tr>
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="colorpagination">
<tr>
<td> <span class="gensmall">{PAGINATION}</span></td>
<td align="right"><a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
- Validez une fois que c'est bon (il faut confirmer la modification une fois de retour dans la page des templates
CSS
- Allez dans Panneau d'administration > Affichage > Couleurs & CSS > Feuille de style CSS
- Si vous n'avez pas d'autres codes de ce thème, copier coller ça en plus à l'intérieur :
- Code:
/* BODY ET CHOSES DE BASE */
a, a:hover{ text-decoration:none !important; }
*{ box-sizing:border-box; }
img{ object-fit:cover; }
.sceditor-button{width: 28px;}
.top-bottom-fo{ position:absolute; }
.bodyline{ border:none; background:var(--fond-bodyline);}
#i_logo{ width:auto; }
.sceditor-button{ width:27px !important; height:27px !important; }
.catBottom{ background:var(--fond-deg) !important;}
.catBottom a{ color:var(--white) !important; }
.catBottom .nav{ color:var(--black) !important; }
.row2, .row1{ background:var(--whitef) !important; color:var(--white); }
input.post, textarea.post, select, #text_editor_iframe, textarea.inputbox{ color:#222; }
input, textarea, select, #text_editor_iframe, .external-module .external-more a{ color:#222; }
.forumline{ background:transparent; }
th, td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom{ background:var(--fond-deg); }
/* DÉBUT RETRAIT TRAITS NOIRS FORUM */
.catHead, .catBottom, .catLeft, .catRight, .thLeft, .thRight,
.thSides, .thCornerL, .thCornerR, .thTop, .thHead, .row3Right, .forumline
{
border: none !important;
}
/* FIN RETRAIT TRAITS NOIRS FORUM */
- Si vous avez déjà un code de ce thème, contentez vous de copier coller ça à l'intérieur et c'est tout :
- Code:
/******** LISTE DE SUJEEEETS *********/
.subjects-total{ background:none; }
.subjects-total .subj-body{ position:relative; margin-bottom:20px !important; display:flex; }
/* ICONS */
.subjects-total .img-subj{ position:absolute; top:5px; left:5px; }
.subjects-total .img-subj img{ width:70px;}
/* TITLE */
.subj-tit-descr{ width:72%; }
.subj-tit-descr .topic-title{ background:var(--fond-img); padding:10px; width:100%; display:block; background-position:center; text-align:right;transition:500ms; }
.subj-tit-descr .topic-title a{ font-size:15px; line-height:17px; color:var(--white); text-shadow:var(--text-shadow); font-weight:200; letter-spacing:1px; font-family:var(--font-title); }
.subj-tit-descr .topic-title:hover{ background-position:right; transition:500ms; }
/* ANNONCES ET NOTE */
.patatedouce{ background:var(--fond-deg) !important; }
.patatedouce img, .topic-title img{ display:none; }
.patatedouce strong{ font-size:10px; color:var(--white); margin-right:10px; letter-spacing:2px; position:relative; top:-2px; font-weight:200; }
.subj-tit-descr .topic-title{ padding-left:60px; }
/* DESCRIPTION */
.subj-tit-descr .descrauth{ display:flex; flex-direction:column; margin-left:90px; margin-top:5px; }
.subj-tit-descr .auth-naiss{ font-size:13px; font-family:var(--font-title); font-weight:200; margin-top:5px; }
/* Last Post */
.author-vuerep{ width:25%; margin-left:10px; display:block; }
.author-vuerep .authone{ position:relative; display:flex; align-items:center; }
.author-vuerep .authone img{ border-radius:0; }
.author-vuerep .authone .author-mess{ margin-left:10px; font-size:12px; width:70%; }
.author-vuerep .authone .author-mess img{ width:25px; position:absolute; right:-20px;; top:50%; transform:translateY(-50%); }
.author-vuerep .vues-mess{ background:var(--fond-deg); color:var(--white); text-align:center; font-size:11px; margin-top:5px; }
/* Navigation */
.nav .nav .nav{ font-size:15px; letter-spacing:1px; font-family:var(--font-title); font-weight:100; color:var(--black); }
|
|
|
