Forum Crea illusion Fantasy


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.


Aides,Codes,Conseils,Forum,Sites web,blogs,Tout supports,Photographie,Graphismes,Dessins,Peintures,Tutoriels,Publicités.
 
AccueilPortailÉvènementsFAQPublicationsPublicationsS'enregistrerConnexion
Ta bannière, Ici !


Partagez | .
 

 Mise en forme des catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Ptite_Perle
Admin


avatar


Messages : 6175
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 9231

MessageSujet: Mise en forme des catégories   Lun 10 Avr 2017 - 14:05

Catégories.
Les sous-forums apparaissent au survol.

Panneau d'administration >> Affichage >> Templates >> Général >> index_box

HTML:
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 -->
      <table class="forumline catego" width="100%" border="0" cellspacing="1" cellpadding="0">
     <tr>
     <th colspan="5" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</th>
     </tr>
     <!-- END tablehead -->
     <!-- BEGIN cathead -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
              <!-- DEBUT NOM DE LA CATEGORIE -->
     <td class="{catrow.cathead.CLASS_CAT}" colspan="5" width="100%">
     <h{catrow.cathead.LEVEL} class="hierarchy">
     <span class="cattitle">
     <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
     </span>
     </h{catrow.cathead.LEVEL}>
     </td>
              <!-- FIN NOM DE LA CATEGORIE -->
     </tr>
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
     <!-- END inc -->
               <!-- DEBUT DESCRIPTION ET LIENS SOUS FORUMS -->
     <td class="row1 desclinks" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                      <!-- DEBUT DE LA DESCRIPTION DU SOUS-FORUM -->
                      <div class="ssforumdesc">
                        <div class="fodesc">
                          <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <span class="forumlink">
                              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                            </span>
                          </h{catrow.forumrow.LEVEL}>
                          <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                        </div>
                      <!-- FIN DE LA DESCRIPTION DU SOUS-FORUM -->
                      <!-- DEBUT DIV DES SOUS FORUMS ET MODERATEURS -->
                        <div class="ssforums">
                          <span class="ssfosurvol gensmall">Survolez pour voir les sous-forums <br /></span>
                          <span class="gensmall ssforumlink">
                            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                            <!-- BEGIN switch_moderators_links -->
                            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links -->
                          </span>
                        </div>
                      </div>
                      <!-- FIN DIV DES SOUS FORUMS ET MODERATEURS -->
     </td>
              <!-- FIN DESCRIPTION ET LIENS SOUS FORUMS -->
              <!-- DEBUT CASE SUJETS ET MESSAGES -->
     <td class="row3 sujmes" align="center" valign="middle" height="50">
                      <span class="gensmall suj">{catrow.forumrow.TOPICS}</span>
                      <span class="gensmall mes">{catrow.forumrow.POSTS}</span>
     </td>
              <!-- FIN CASE SUJETS ET MESSAGES -->
     <td class="row2 lpa" align="center" valign="middle" height="50">
                      <span class="lastpost-avatar">
              <!-- BEGIN avatar -->
                        {catrow.forumrow.avatar.LAST_POST_AVATAR}
              <!-- END avatar -->
                      </span>
     </td>
              <!-- DEBUT DE LA CASE DU DERNIER MESSAGE ET DE L'IMAGE NEW/OLD/LOCKED -->
     <td class="row3 over lastpost" align="center" valign="middle" height="50">
                      <div class="lastpost">
                        <div class="gensmall lp">
                          {catrow.forumrow.LAST_POST}
                        </div>
                        <div class="ssforumnol">
                          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="ssforumnol" />
                        </div>
                      </div>
     </td>
              <!-- FIN DE LA CASE DU DERNIER MESSAGE ET DE L'IMAGE NEW/OLD/LOCKED -->
     </tr>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
     </tr>
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    </table>
    <div class="bascate">
    </div>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Panneau d'administration >> Affichage >> Images et couleurs >> Couleurs >> Feuille de style CSS

CSS:
Code:
    /* LES COULEURS DU DESIGN */
    /*
    Couleur 1 : #ffffff
    Couleur 2 : #831822
    Couleur 3 : #A8A291
    Couleur 4 : #bcb399
    */

    /* DEBUT DES CATEGORIES */
    table.catego {  
      background: none;
      border: none;
      
      border-collapse: collapse;
      
      overflow: hidden;
    }

    .catego .row1,.catego .row2,.catego .row3,.catego .row3Right {
      padding: 0;
    }
      
    /* NOM DE LA CATEGORIE */
    .secondarytitle {
      background: none;
      
      padding: 5px;
    }

    .secondarytitle h2 {
      background: none !important;
      color: #000;
      font-family: 'Oswald', cursive;
      font-size: 3em;
    }

    /* DESCRIPTION DU FORUM ET LIENS VERS SOUS-FORUMS */
    /* CELLULE DU NOM DU FORUM, DE SA DESCRIPTION ET DES LIENS VERS LES SOUS FORUMS */
    td.desclinks {  
    }

    /* DIV CONTENANT DESC ET LIENS SOUS-FORUMS */
    div.ssforumdesc {  
      overflow: hidden;
      
      position: relative;
    }

    /* DIV CONTENANT LE NOM-LIEN ET LA DESCRIPTION DU FORUM */
    div.fodesc {
      overflow: auto;
      
      padding: 0px 5px 25px 5px;
      
      height: 95px;
      
      text-align: justify;
    }

    /* NOM-LIEN DU FORUM */
    a.forumlink, a.forumlink:hover {
      color: #A8A291 !important; /* Couleur 3 */
      font-family: 'Oswald', cursive;
      font-size: 20px;
    }

    /* DIV DES LIENS VERS LES SOUS FORUMS */
    div.ssforums {
      background: #831822; /* Couleur 2 */
      
      transition: all ease 1s;
      
      height: 140px;
      width: 100%;
      
      position: absolute;
      bottom: -120px;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }

    /* AU SURVOL POUF ÇA GLISSE */
    div.ssforums:hover {
      bottom: 0;  
    }

    /* LA QUESTION "SOUS-FORUM ?" */
    span.ssfosurvol {  
      color: #fff !important; /* Couleur 1 */
      font-size: 14px;
      font-variant: small-caps;
      
      display: block;
      
      height: 20px;
      width: 100%;
      
      padding: 2px;
      
      position: absolute;
      top: 0px;
    }

    /* LIENS DES SOUS-FORUMS */
    span.ssforumlink a, span.ssforumlink a:hover {
      color: #fff !important; /* Couleur 1 */
    }

    /* CASE SUJETS ET MESSAGES */
    td.sujmes {
    }

    span.suj, span.mes {
      color: #fff; /* Couleur 1 */
      font-size: 30px;
      font-family: 'Oswald', cursive;
      
      height: 50%;
      width: 50px;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    span.suj {
      background: #A8A291; /* Couleur 3 */
    }

    span.mes {
      background: #BCB399; /* Couleur 4 */
    }


    /* CASE DE L'AVATAR DU DERNIER POSTEUR */
    td.lpa {
      width: 50px;
    }

    span.lastpost-avatar {
      padding: 0px;
      float: none;
      
      display: flex;
      flex-direction: row;
      justify-content: center;
      
      overflow: hidden;
      
      width: 50px;
      height: 120px;
    }

    span.lastpost-avatar img {
      border-radius: 0px;
      
      width: auto;
      height: 100%;
    }

    /* CADRE DU DERNIER POST ET DE L'IMAGE NEW/OLD/LOCKED */
    /* CELLULE DU DERNIER POST */
    td.lastpost {
      overflow: hidden;
    }

    /* DIV CONTENANT LE DERNIER POST + L'IMAGE NOL */
    div.lastpost {
      height: 120px;
      width: 140px;
      padding: 0px;
      
      position: relative;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      transition: all ease 1s;
    }


    /* DIV CONTENANT L'IMAGE NOL */
    div.ssforumnol {
      background: #831822; /* Couleur 2 */
      
      transition: all ease 1s;
      
      height: 120px;
      width: 140px;
      
      position: absolute;
      top: 0px;
      right: 0px;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* DIV CONTENANT L'IMAGE NOL QUAND ELLE BOUGE */
    div.lastpost:hover div.ssforumnol {
      right: -150px;
    }

      
    /* FIN DES CATEGORIES  */
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/
 

Mise en forme des catégories

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Mise en forme des catégories
» Mise en forme des catégories avec un template déjà modifié
» Comment changer de forme au catégories sur la page d'accueil
» Mise en forme des catégories
» Mise en forme des catégories et forums

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum Crea illusion Fantasy  :: Astuces codages pour forumactif :: Astuces et codages forumactif-