Catégorie #1 - Dim 6 Jan - 18:46 Catégorie #1 Pré-requis : accès au panneau d'administration & tempalte. Version forum : phpBB2 Difficulté : moyen. Le rendu : Tout est modifiable, couleur, image, texte (évidemment !) Prévu pour avoir une image de fond en titre, qui sera également sous le titre du des catégories & du Qui Est En Ligne. Le contexte est placé derrière l'image en haut à gauche. Et au hover du staff, vous avez le nom + rôle, le tout étant cliquable pour se rendre sur le profil. Les catégories sont prévues pour être En Moyen à Séparer les catégories sur l'index. En effet, les fond sont collés à la caté précédente, mais c'est facilement modifiable via le CSS. Merci de garder un crédit, un lien renvoyant sur AvadaKedagraph si vous utilisez ces catégories ! Merci ! Le design de mon bébé change du tout au tout, alors on vous met en LS l'index !! la PA assortie Pour simplifier mon code, j'ai utilisé des variables dans ma feuille CSS. C'est à dire que si vous utilisez ces codes, vous allez pouvoir modifier les couleurs plutôt facilement ! Pour tout savoir à ce sujet : lire ce tuto.Instruction.
- Rendez-vous sur les templates (index_box, affichage des catégories).
- Remplacer tout le code par celui-ci :
- Code:
-
<table class="linkcate" 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="tleCAT"><h2>{catrow.tablehead.L_FORUM}</h2></div> <!-- END tablehead -->
<!-- BEGIN cathead --> <!-- END cathead -->
<!-- BEGIN forumrow --> <div class="blocFRM"> <div class="boxFRM"> <div class="tleFRM"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> </div> <div class="descFRM">{catrow.forumrow.FORUM_DESC}</div> </div> <div id="sousForum" class="subFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div> <script type="text/javascript"> jQuery('#sousForum').html(jQuery('#sousForum').html().replace(/, /g,' ')).removeAttr('id'); </script> <div class="lastpost-avatarCateg"> <!-- BEGIN avatar --> <span >{catrow.forumrow.avatar.LAST_POST_AVATAR}</span> <!-- END avatar --> </div> <div class="lnbFRM"> <div class="nbFRM">{catrow.forumrow.TOPICS} sujets ◄► {catrow.forumrow.POSTS} réponses</div> <img class="imgFRM" src="{catrow.forumrow.FORUM_FOLDER_IMG}" /> <div class="lmsgFRM">{catrow.forumrow.LAST_POST}</div> </div> </div> <!-- END forumrow --> <!-- BEGIN catfoot -->
<!-- BEGIN inc --> <!-- END inc -->
<!-- END catfoot --> <!-- BEGIN tablefoot --> <!-- END tablefoot --> <!-- END catrow -->
- Puis modifier la feuille CSS (Panneau d'administration > Onglet Affichage > rubrique Image & Couleur > Couleurs)
- Coller le code suivant.
Copier/coller uniquement si vous n'avez pas déjà déclaré les variables depuis un autre code. - Code:
-
:root{ --fondforum: #e9e9e9; /* gris */ --fondfonce: #a8b7d3; /* mauve */ --fondclair: #fff; --bordure: #fff; /* blanc */ --colorone: #982786; /* magenta -- titre et sous titre PA */ --colortwo: #aa3a98; /* violet clair */ --colorthree: #008d9b; /* vert-eau -- lien */ --colorfour: #512563; /* mangeta soulignement gras et italic */ }
- Code:
-
/*---------------------- CATEGORIES by Laxy - refonte Jamy ------------------*/
.linkcate{width:98%; margin: 13px auto;}
.tleCAT{ /* TITRE CATEGORIES */ position:relative; box-sizing:border-box; width:98%; padding:10px 0 5px; text-align:center; background-image: url(''http://image.noelshack.com/fichiers/2018/50/2/1544516140-pattern.png''); /* MODIFIABLE */ margin: 0 auto; }
.tleCAT h2{ color: var(--colorone) !important; font-family: Dancing Script !important; font-size: 50px!important; letter-spacing: 0px; text-shadow: 1px 1px 1px #ffffff; margin: 0 auto; font-weight: normal; }
.blocFRM { /* BLOC FORUM */ width:98%; box-sizing:border-box; margin:0 auto; background-color: var(--fondfonce);display: flex;justify-content: space-between;
padding: 5px; } .boxFRM { /* BLOC TITRE & DESCRIPTION FORUMS */ display:inline-block; vertical-align:top; width: 322px; } .tleFRM { /* TITRE FORUMS */ padding: 5px 0 text-align:center; letter-spacing:0px; font-size:14px; background-color: var(--fondforum); }
.tleFRM a { /* TITRE FORUMS */ color: var(--colorone) !important; font-family:"Marcellus SC"; font-size: 16px; padding: 0; }
.descFRM { /* DESCRIPTION FORUMS */ height:76px; padding:5px; overflow:auto; font-size:10px; text-align:justify; background-color: var(--fondclair); color:black; /* MODIFIABLE */ }
.subFRM{ /* SOUS FORUM */ height: 115px; overflow: auto; width:150px; }
.subFRM a{ font-size: 11px; display: block; text-align:center; margin: 0 0 1px; padding: 1pX; background-color: var(--fondclair); }
.lastpost-avatarCateg{ float: none; width: 65px; overflow:hidden; height: 113px; border:1px solid var(--fondforum); }
.lastpost-avatarCateg img{ width: 100%; height:100% display:block; } .lnbFRM { /* BLOC DERNIER MESSAGE & ICONE NEW NO NEW */ position:relative; background: var(--fondforum); width:170px; height: 115px; } .lmsgFRM {/* DERNIER MESSAGE FORUMS */ width:170px; height:90px; box-sizing:border-box; font-size:11px; text-align:center; background-color: var(--fondclair); color:black; padding-top: 8px; }
.imgFRM { /* ICÔNES FORUMS */ position:absolute; right: 0; bottom: 0; border-top-left-radius:25px; width: 43px; height: 25px; }
.nbFRM { /* NOMBRE SUJETS & MESSAGES FORUMS */ width:160px; height:15px; padding:5px; font-size:11px; text-align:center; background-color: var(--fondforum) !important; font-family:"Marcellus SC"; letter-spacing:0px;/* MODIFIABLE */ }
.lastpost-avatar img{ height: 56px; }
/*------------ fin CATEGORIES ------------*/ En espérant que ce code va te servir ! Si tu n'arrives pas à faire une modification, n'hésite pas à ouvrir une "commande" de codage, je peux t'aider à personnaliser/modifier un peu le code !
Enjoy coding ! Arya | |