Categorie ronde personalisée

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Categorie ronde personalisée

Message par elsa2607 le Ven 22 Fév 2013 - 19:50

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


Dernière édition par elsa2607 le Lun 25 Fév 2013 - 14:48, édité 3 fois

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Ven 22 Fév 2013 - 20:37

Bonsoir,

Le lien du forum serait bien aussi. ^^

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Ven 22 Fév 2013 - 21:04

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

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Sam 23 Fév 2013 - 21:11

up

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Sam 23 Fév 2013 - 23:46

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? Smile

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Dim 24 Fév 2013 - 14:35

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


Dernière édition par elsa2607 le Dim 24 Fév 2013 - 15:34, édité 1 fois

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Dim 24 Fév 2013 - 15:19

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.

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Dim 24 Fév 2013 - 15:33

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

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Dim 24 Fév 2013 - 15:50

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

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Dim 24 Fév 2013 - 16:07

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 )




elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Dim 24 Fév 2013 - 16:26

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. Smile

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par jonathan78 le Dim 24 Fév 2013 - 16:35

Je pense avoir trouvé. Smile

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. Smile

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Categorie ronde personalisée

Message par elsa2607 le Dim 24 Fév 2013 - 17:20

Merci beaucoups

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum