Categorie ronde personalisée

[elsa2607]

Bonsoir,
Voila je suis toujours à le recherche des meilleures catégories avec comme base :
Un titre de catégorie en image
un forum assez visible et une cellule arrondie.

Voila ce que j'ai repéré (1) :

L'originale c'est celle du dessus (1)

Et j'aimeras que quelqu'un m'aide à réaliser celle du dessous (2)
Faut-il l'index box ou le CSS ?
Merci d'avence

[Invité]

Bonsoir,

Le lien du forum serait bien aussi. ^^

[elsa2607]

bonsoir
Le même que dans mon profil
http://haltairhorse.forums-rpg.com/

[elsa2607]

up

[Invité]

Bonjour,

Les templates et moi ça fait 2. ^^
Mais je peut quand même essayer...

Je pourrais avoir votre template "index_box" s'il vous plaît?

[elsa2607]

Bonjours,
Alors j'ai tenté de faire aussi un peu j'ai réussi à avoir les cellules que je voulais maintenant je voudrais mettre l'image (new no new lock) dans la cellule vide (ou j'ai placé les sous forums mais je n'ai pas ajouté de sous forum donc la case est vide) et agrandir le dernier message comme sur le premier schéma (2)
Aperçu actuel : http://haltairhorse.forums-rpg.com/

/
index body

[Invité]

Bonjour,

Remplace tout ton template index_box par ça:

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="tfa_top">
          <div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>
        </div>
        <table class="table_tfa" width="100%" border="0" cellspacing="8" cellpadding="4">
          <!-- END tablehead -->
          <!-- BEGIN forumrow -->
          <tr>   
              <td colspan="2"><!-- TITRE FORUM -->
                <div class="block_titre">
                <div class="tfa_titre_forum">
                  <div class="titre_gauche"></div>
                  <div class="titre_droite"></div>
                  <div class="titre_centre">
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="lien_forum">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
                    </h{catrow.forumrow.LEVEL}>
                  </div>
                  <div style="clear:both;"></div>
                </div>
                </div></td>
            <tr>
              <!-- CELLULE DE GAUCHE -->
              <td class="tfa_cell_3" align="center" valign="middle" width="17%">
              <!-- ICONE NEW NO-NEW CLOS -->
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

              </td>
                   
              <!-- CELLULE DE MILIEU -->
              <td class="tfa_cell_2"  valign="middle" width="65%">
              <!-- DESCRIPTION -->
                <div class="tfa_description">
                  <div class="genmed">{catrow.forumrow.FORUM_DESC} </div>
                         
              <!-- MODERATEUR -->
                  <span class="gensmall">
                      <!-- BEGIN switch_moderators_links -->
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                      <!-- END switch_moderators_links -->   
                  </span>
              <!-- SOUS-FORUMS -->
                <span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> 
                </div>
              <!-- SUJETS-MESSAGES -->
                <div class="sujets-messages">
                    <span class="gensmall">
                      <span class="chiffres">{catrow.forumrow.TOPICS}</span> sujets pour <span class="chiffres">{catrow.forumrow.POSTS}</span> messages
                    </span>
                </div>
                <!-- CELLULE DE DROITE -->
           
                <td class="tfa_cell_1" align="center" valign="middle" width="17%">
              <!-- DERNIERS SUJETS -->
                <div class="tfa_last_post">
                    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                </div> 
              </td>
          </tr>
          <!-- END forumrow -->
   
          <!-- BEGIN catfoot -->
          <tr>
              <!-- BEGIN inc -->
              <td width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="spaceRow" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
          </tr>
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </table>
        <div class="tfa_bottom"></div>
        <img src="{SPACER}" alt="" height="5" width="1" />
   
        <!-- END tablefoot --><!-- END catrow -->

Pour mettre l'image new, no new, clos dans le cadre vide.

[elsa2607]

Parfait avec un CSS rotate et un changement d'image ce sera parfait merci beaucoup ! *_* :thanks:

[Invité]

Ta commande est terminée? õ-õ
Pour ma part, je suis entrain de réaliser les sous-forums dévoilés au survol. ^^

[elsa2607]

J'ai voulut faire tourner les icônes no new etc avec

Code:

.rotateimg:hover{
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
-ms-transform:rotate(100deg);
}

et la class dans le template

Code:


 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="rotateimg" />


Mais sur le forum au passage de la souris il ne tourne que si tu passes ta souris du bas vers l'image et avec difficultés , (ou alors juste avec mon ordi et/ou Chrome )

[Invité]

Me revoilà! ^^

Ce code est pour obtenir le même effet que sur votre image (2):

Dans votre CSS:

Code:

.sous-forum.lecf {
z-index: 99;
background: #F1F1F1;
border-radius: 0 0 10px 10px;
color: white;
font-size: 9px;
margin-top: -3%;
margin-left: 10%;
padding: 5px 5px 15px 5px;
position: absolute;
text-align: center;
width: 60%;
  box-shadow: 0 0 5px gray;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ktm-transition: all 0.3s ease-out;
}

.sous-forum.lecf:hover{
  margin-top: -1%;
  margin-left: 10%;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ktm-transition: all 0.3s ease-out;
}

.table_tfa {
background: #5C839E;
z-index: 999;
position: relative;
}

Remplacez tout votre template index-box 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="tfa_top">
          <div class="titre_categorie">{catrow.tablehead.L_FORUM}</div>
        </div>
        <table class="table_tfa" width="100%" border="0" cellspacing="8" cellpadding="4">
          <!-- END tablehead -->
          <!-- BEGIN forumrow -->
          <tr>   
              <td colspan="2"><!-- TITRE FORUM -->
                <div class="block_titre">
                <div class="tfa_titre_forum">
                  <div class="titre_gauche"></div>
                  <div class="titre_droite"></div>
                  <div class="titre_centre">
                    <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="lien_forum">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
                    </h{catrow.forumrow.LEVEL}>
                  </div>
                  <div style="clear:both;"></div>
                </div>
                </div></td>
            <tr>
              <!-- CELLULE DE GAUCHE -->
              <td class="tfa_cell_3" align="center" valign="middle" width="17%">
              <!-- ICONE NEW NO-NEW CLOS -->
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

              </td>
                   
              <!-- CELLULE DE MILIEU -->
              <td class="tfa_cell_2"  valign="middle" width="65%">
              <!-- DESCRIPTION -->
                <div class="tfa_description">
                  <div class="genmed">{catrow.forumrow.FORUM_DESC} </div>
                         
              <!-- MODERATEUR -->
                  <span class="gensmall">
                      <!-- BEGIN switch_moderators_links -->
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                      <!-- END switch_moderators_links -->   
                  </span>
                </div>
                <!-- CELLULE DE DROITE -->
           
                <td class="tfa_cell_1" align="center" valign="middle" width="17%">
                  <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                <div class="tfa_last_post">
                  <span class="gensmall">
                      <span class="chiffres">{catrow.forumrow.TOPICS}</span> sujets pour <span class="chiffres">{catrow.forumrow.POSTS}</span> messages
                    </span>
                  </div>
              </td>
          </tr>
          <table>
             <tr>
                  <td>
                       <div class="sous-forum lecf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                  </td>
           </tr>
          </table>
          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
          <tr>
              <!-- BEGIN inc -->
              <td width="46"><img src="{SPACER}" height="0" width="46" /></td>
              <!-- END inc -->
              <td class="spaceRow" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
          </tr>
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
        </table>
        <img src="{SPACER}" alt="" height="5" width="1" />
   
        <!-- END tablefoot --><!-- END catrow -->

Pour faire tourner l'image, je regarde.

[Invité]

Je pense avoir trouvé.

Mettez ceci dans votre CSS:

Code:

a.forumlink {
-moz-transition: all .8s ease .2s;
-o-transition: all .8s ease .2s;
-webkit-transition: all .8s ease .2s;
color: #691F80;
display: block;
font-family: Lobster, cursive;
font-size: 28px;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-align: center;
text-shadow: 0 0 6px white;
transition: all .8s ease .2s;
width: 350px;
height: 0px;
}

Et remplacer l'ancien code par:

Code:

.sous-forum.lecf {
-ktm-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
background: #F1F1F1;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px gray;
color: white;
font-size: 9px;
margin-left: 10%;
margin-top: -20px;
padding: 5px 5px 15px;
position: absolute;
text-align: center;
transition: all .3s linear;
width: 60%;
z-index: 99;
}

Dans votre template index_box remplacez ça:

Code:

              <!-- ICONE NEW NO-NEW CLOS -->
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

par:

Code:

              <!-- ICONE NEW NO-NEW CLOS -->
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="img_tourne" />

Je pense que cela devrait être bon.

[elsa2607]

Merci beaucoups