Le Deal du moment :
Boutique Nike : -25% dès 50€ sur TOUT le ...
Voir le deal

Partagez
 

 Catégorie #1

Aller en bas 
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 !!  I love you  la PA assortie Smile

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 !  I love you

Enjoy coding !
 Catégorie #1 3522390538

Arya

Jamy
Jamy
ex-staffienne
 
Catégorie #1
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Catégorie #2
» Règles pour la catégorie
» Règles pour la catégorie

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Avada Kedagraph :: Section Codage :: Libre Service :: Templates-
Sauter vers: