Forum Crea illusion Fantasy
A quoi sert le forum ?
Ce forum est liée à mon site Crea illusion Fantasy. Un plus pour vous aidez dans vos créations.Vous ne savez pas créer, et vous recherchez une création personnalisée. Le forum vous écoutera vos demandes.
Plusieurs sections :
Des aides: pour votre forum,votre site ou blog.Des tutoriels(photoshop,paintshop,gimp,photofiltre,ect...).Demandes de créations personnalisées. Aide pour prendre en main vos logiciels.Des tutos, des scripts. aides pour le logiciel Flash..... Des concours, des challenges, des duels. Vous y trouverez un accueil sympathique.
Au plaisir de vous lire sur le forum. D'autres choses à venir découvrir sur le forum de Créa illusion Fantasy.

N'hésitez pas à venir vous inscrire.


Aides & Conseils pour le graphisme & forum & site web & blog & tout autres supports.
 
AccueilPortailFAQPublicationsPublicationsS'enregistrerConnexion
Votre bannière ici,Faite la demande dans la catégorie: La place Public


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 : 6726
Venue : 27/06/2009 Je suis: : Féminin
Né(e) le : 17/09/1963
Age : 53
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 8990

MessageSujet: Mise en forme des catégories   Lun 10 Avr - 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-