KoalaVolant
Ven 26 Mai 2023 - 13:38
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 (maquette & couleurs)
- Les images se redimensionnent toutes seules
- 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
HTML
- Allez dans Panneau d'administration > Affichage > Templates > index_box (Page d'accueil - Affichage des catégories)
- Remplacez son contenu par :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cate-title">
{catrow.tablehead.L_FORUM}
</div>
<div class="cate-bloc">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="cate-forum">
<div class="forum-encart">
<!-- NO ET NEW -->
<img class="cate-no" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<!-- FIN NO ET NEW -->
<!-- TITRE ET TOUT -->
<div class="cate-descr">
<!-- TITRE DU FORUM -->
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<!-- DESCRIPTION -->
<div class="cate-descrdivision">{catrow.forumrow.FORUM_DESC}</div>
</div>
<!-- FIN TITRE ET TOUT -->
<!-- Sous forum ENCART -->
<div class="cate-sous">
<!-- Sous forum -->
<div class="ssfo" id="subforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</div>
<!-- SOUS FORUM FINI LA -->
<!-- DERNIERES INFOS ET STATISTIQUES -->
<div class="cate-infos">
<!-- AVATAR -->
<div class="cate-vava"> <!-- BEGIN avatar -->
<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span> <!-- END avatar -->
</div>
<!-- STATISTIQUES -->
<div class="cate-messder">
<!-- DERNIER MESSAGE -->
<div class="cate-dermess">
{catrow.forumrow.LAST_POST}
</div>
<!-- MESSAGES ET SUJETS -->
<div class="cate-messvue">
{catrow.forumrow.TOPICS} messages - {catrow.forumrow.POSTS} sujets
</div>
<!-- DIV DE FIN DE STATS -->
</div>
<!-- DIV DE FIN D'INFOS -->
</div>
<!-- FIN CATE ENCART ETC -->
</div>
</div>
</div>
<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot --><!-- END catrow -->
<!-- END tablefoot -->
CSS
- Allez dans Panneau d'administration > Affichage > Images & Couleurs > Couleurs & CSS > Feuille de style CSS
- Ajoutez y le code des catégories :
- Code:
/* CATEGORIES */
.cate-title{ text-align:center; background:var(--fond); }
.cate-title h2{ color:var(--text); font-size:18px; padding:5px; font-weight:normal; font-family:var(--font2); }
.forum-encart{ display:flex; padding:5px; }
.forum-encart .cate-no{ width:40px; height:115px; object-fit:cover;}
/* DESCRIPTION & Titre */
.forum-encart .cate-descr{ margin:0 5px; width:45%; padding:5px;}
/* Titre */
.forum-encart .cate-descr a{ display:block; width:100%;
color:var(--colorp); font-family:var(--font1); font-size:15px; letter-spacing:2px; margin-bottom:3px; background:var(--fond); border:2px solid var(--black); }
/* Description*/
.forum-encart .cate-descr .cate-descrdivision{ width:100%; display:flex; }
/* Image de description */
.forum-encart .cate-descr .cate-descrdivision img{ display:block; width:100px; height:83px; }
.forum-encart .cate-descr .cate-descrdivision span{ display:block; background:var(--font2); padding:0 5px;height:80px; font-size:12px; overflow:auto; color:var(--text); text-align:justify; background:var(--fond); border:2px solid var(--black); margin-left:5px;}
/* SOUS FORUMS */
.cate-sous{ width:20%; height:115px; overflow:auto; background:var(--bg-img); margin-right:5px;}
.cate-sous a{ display:block; background:var(--fond); display:block; margin:4px; text-align:center; color:var(--text); font-size:14px; font-family:var(--font1); transition:500ms; }
.cate-sous a:hover{ letter-spacing:1px; transition:500ms; color:var(--text); text-decoration:none!important; }
/* LAST POST */
.cate-infos{ display:flex; width:35%;}
.cate-messder{ display:flex; flex-direction:column; width:80%; }
.cate-dermess, .cate-messvue{ background:var(--fond); border:2px solid var(--black); font-size:13px; color:var(--text); text-align:center; padding:5px; }
.cate-infos .cate-vava{ margin-right:5px; }
.cate-infos .cate-vava img{ height:115px; width:60px; border-radius:0px; object-fit:cover;}
.cate-dermess{ margin-bottom:5px; padding:16px; }
.cate-messvue{ font-family:var(--font1); }
|
|
|
