Image new/no new hover.

[Hestia31]

Bonjour ! Je viens vous voir car j'aimerais modifier un code de catégorie que j'ai déjà.

Voici la catégorie actuelle :
https://i.servimg.com/u/f55/18/09/31/60/cat10.png

Et j'aimerais modifier la partie tout à droite pour avoir une image new/no new et au passage de la souris avoir le nombre de messages, exemple :
https://i.servimg.com/u/f55/18/09/31/60/cat210.png

Je met les codes sous hide si vous en avez besoin ::




Merci d'avance, n'hésitez pas s'il vous faut d'autres informations !

[Hestia31]

Up s'il vous plait. Au passage j'en profite pour dire que pour le hover du boutn new/no new, j'aimerais que le bouton "parte" sur le côté plutôt qu'il disparaisse d'un coup au passage de la souris, c'est pas très clair mais je vais tenter de trouver un exemple.

[Hestia31]

UP s'il vous plait **

[Hestia31]

UP s'il vous plait  

[Excidius]

Bonjour, vous voulez que le nombre de messages apparaisse sous l'image new/ no new ?

[Hestia31]

Bonsoir et merci pour votre réponse  C'est exactement ça, et pour mieux expliquer l'effet souhaité pour le défilement, il suffit d'aller voir l'image des sous-forums ici http://parisien.fr1.co . Merci beaucoup et n'hésitez pas si vous avez d'autres questions !

[Excidius]

J'ai déjà fait usage d'un système d'affichage semblable à celui-ci sur mon forum, je vous demanderai de patienter le temps que je fasse le code pour vous si cela ne vous dérange pas. Vous aurez le code approximativement demain quand je serai chez moi. ( Coder avec un téléphone est très dure, je préfère le faire sur mon ordinateur)

[Hestia31]

Pas de soucis je vais patienter, prenez votre temps et merci encore !

[Excidius]

Voilà, désolé pour l'attente. L'installation de ce code se fera en plusieurs étapes, pas besoin de Javascript étant donné que ce code est du CSS3 avec du html.

Voici une petite demo de ce code, votre codage template/css je l'ai reproduit sur ce forum, qui n'est qu'un forum de test et d'expérimentation :

http://excidtest.forumactif.org/

---------------Etape 1-----------------------Le Html----------------------------------------

1.1 /Allez dans votre template d'affichage de catégories : Panneau d'administration > Affichage> Templates > Générale >Index_box

1.2/ Repérez la partie de ce code

Code:

 <div class="last_post">
                            {catrow.forumrow.LAST_POST}
                        </div>

1.3/Remplacez-le par ce code.

Code:

 
<div class="monBloc">
   <div class="last_post" >  </div>
            <div class="sujmes">
              
              {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                
            </div>
                  {catrow.forumrow.LAST_POST}
                    
</div>

Et la partie Html est terminée.

------------------Etape 2--------Partie Css---------------------------------------

2.1/Allez dans votre Css : Panneau d'administration > Affichage > Couleur > Feuille de style Css.

2.3/Repérez la partie de votre code

Code:

.last_post {
            display: block; /* Ne pas modifier */
            padding: 15px; /* Modifiable */
            border-left: 4px solid white;
            border-right: 4px solid white;
            -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            -o-border-radius: 40px;
            border-radius: 40px;
            width: 120px;
            height:40px;
            font-size: 9px;
          
    }

2.4/Remplacez le par celui-ci

Code:

.last_post {
                
  position: absolute;
  width: 200px;
  height: 70px;
  top: 0;
  left: 0;
 -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            -o-border-radius: 40px;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  background: #E0E0D8;
            
  
          
    }

Cette partie du css ci-dessus correspond au bloc qui sera animé. Sa hauteur et sa largeur ne doivent pas dépassé celle bloc que je donne ci-dessous.

2.5/ Rajoutez ce code :

Code:

.monBloc:hover > .last_post {
  left: -250px;
}

.monBloc {
  font-size:9px;
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
          position: relative; /* important ! */
  width: 200px; /* largeur du bloc */
  height: 70px; /* hauteur du bloc */
  -moz-border-radius: 40px;
            -webkit-border-radius: 40px;
            -o-border-radius: 40px;
  border-left: 4px solid white;
  border-right: 4px solid white;
  text-align: center;
  background: #C7C7C3;
}

.monBloc:hover > .last_post {
  left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

.sujmes { /* Affichage nombre de messages et sujet  */
  
  margin-left: 10px;
  border-bottom: 4px solid white;
  margin-top: 10px;
  font-size: 12;
}


Ce bloc ci-dessus contient le dernier posteur et le nombre de message et de sujet. Vous pouvez modifier la hauteur et la largeur, mais aux deux bloc en même temps afin de préserver un bon design.

[Hestia31]

Merci beaucoup pour votre aide mais ça ne fonctionne pas :/

Voici mon index_box :

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="forumline" style="width: 100%;">
     
          <div style="width: 100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
     
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
     
          <!-- BEGIN inc -->
          <div class="{catrow.cathead.inc.INC_CLASS}" style="width:46px;"><img src="{SPACER}" height="0" width="46" /></div>
          <!-- END inc -->
         
            <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}>
         
         
     
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
     
          <!-- BEGIN inc -->
          <div class="{catrow.forumrow.inc.INC_CLASS}" style="width:46px;"><img src="{SPACER}" height="0" width="46" alt="." /></div>
          <!-- END inc -->

    <!-- Corps Principal Forum -->
          <div class="forum_main">
            <!-- Titre du Forum -->
                <span class="forumlink">
                      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
            <!-- Image, Description, Derniers Messages -->
                <table class="second_row" width="90%" cellspacing="1" cellpadding="2" border="0">
                  <tr>
                     

                      <td valign="top" align="justify" width="600px" class="desc_fo">
                        {catrow.forumrow.FORUM_DESC}
                      </td> 
                     
                      <td valign="middle" align="justify" width="100px" class="end_fo">
                        <div class="img_msg">
                            <span class="img_topic"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
                        </div>
       
        <div class="monBloc">
          <div class="last_post" >  </div>
                    <div class="sujmes">
                     
                      {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                       
                    </div>
                          {catrow.forumrow.LAST_POST}
                           
        </div>
                      </td>
                  </tr>
                </table>
                  <!-- Liens vers sous-forums -->
                      <div class="sub_forums">
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                      </div> 
          </div>       
    <!-- Fin du code du forum -->

         
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
     
          <!-- BEGIN inc -->
          <div class="{catrow.catfoot.inc.INC_CLASS}" style="width:46px;"><img src="{SPACER}" height="0" width="46" /></div>
          <!-- END inc -->
          <div class="spaceRow"><img src="{SPACER}" alt="" height="1" width="1" /></div>
     
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
    </div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Mon CSS :

Code:


    .forum_main {
          width: 90%; /* Forum plus petit que le corps catégorie pour l'esthétique | MODIFIABLE |*/
          background: #E0E0D8;
          border: 1px solid #C9C8B8;
          text-align: justify;
          padding: 5px;
          -moz-border-radius: 5px; /* Angles arrondis MODIFIABLE */
          -webkit-border-radius: 5px;
          -o-border-radius: 5px;
          border-radius: 5px;
            margin: auto; /* Centre automatique la catégorie */
            margin-bottom: 8px; /* Espacement entre les différentes catégories */
          }
         
    .forumlink {
          width: 100%; /* Ne pas modifier */
          display: block; /* Ne pas modifier */
          text-align: justify;
            padding-left: 30px; /* Modifiable : Décalement gauche du titre du forum */
          }
         
    .forumlink a {
          font-size: 20px;
          line-height: 20px;
          font-weight: bold;
          color:  #AAC8AB !important;
          text-decoration: none !important;
            margin-bottom: -10px; /* Ajustement du décalage bas : ne pas modifier */
          }
         
    .forumlink a:hover {
          /* Mettre le code
          de modification
          des liens au survol */
          }
         
    .second_row { /* Descriptions, images, derniers messages */
          width:98%;
          border-bottom: 2px solid #C9C8B8;
            border-top: 2px solid #C9C8B8;
          height: 50px; /* A modifier au besoin */
          margin: auto; /* Ne pas modifier : centre automatiquement */
          }
         
         
        .last_post {
          position: absolute;
          width: 180px;
          height: 30px;
          top: 0;
          left: 0;
          -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
          -o-border-radius: 40px;
          -webkit-transition: all 1s linear;
          -moz-transition: all 1s linear;
          -ms-transition: all 1s linear;
          -o-transition: all 1s linear;
          transition: all 1s linear;
          background: #E0E0D8;}
           
            .monBloc:hover > .last_post {
          left: -250px;
       
}
        .monBloc {
          font-size:9px;
          overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
                  position: relative; /* important ! */
          width: 130px; /* largeur du bloc */
          height: 80px; /* hauteur du bloc */
          -moz-border-radius: 40px;
                    -webkit-border-radius: 40px;
                    -o-border-radius: 40px;
          border-left: 4px solid white;
          border-right: 4px solid white;
          text-align: center;
          background: #C7C7C3;
        }
       
        .monBloc:hover > .last_post {
          left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
        }
       
        .sujmes { /* Affichage nombre de messages et sujet  */
         
          margin-left: 10px;
          border-bottom: 4px solid white;
          margin-top: 10px;
          font-size: 12;
        }

    .img_topic { /* Images Old, Lock et New */
            display: block; /* Ne pas modifier */
            margin: auto; /* Ne pas modifier */
            margin-top: -20px; /* Modifiable : Fait sortir l'image du cadre de base */
            text-align:center; /* Ne pas modifier */
    }
           

    .desc_fo {
            font-size: 10px;
            color: #7D799D;
            overflow: auto; /* Fera apparaître une barre de défilement en cas de grosse description */
            text-align: justify;
    } 

    .desc_fo b { /* La balise b sert de titre, chaque mot entouré de b sera considéré comme un titre */
            font-size: 13px;
            font-variant: small-caps;
            color: #AAC8AB;
            font-weight: bolder;
            line-height: 2px;
    }


    .desc_fo img { /* Positionnement de l'image de description */
            float: left; /* Ne pas modifier */
            margin-right: 20px; /* Modifiable */
            margin-left: 20px; /* Modifiable */
    }
    .sub_forums a { /* Liens des sous-forums */
            font-size: 12px;
            font-weight: bolder;
            text-transform: uppercase;
            color: #AAC8AB;
            line-height: 5px;
           
    }

    .sub_forums { /* Positionnement */
          padding: 2px; /* décollage par rapport à la ligne du bas, ne pas toucher */
            text-align: center;
    }

Et mon forum test, ce sera plus clair que sur un screen :




Merci d'avance !

[Excidius]

Le problème vient du Css, votre hauteur (Height) du bloc .last_post est trop courte.

Mettez ces valeurs par exemple :

Code:

height: 80px;
width: 130px; /* Ne jamais oublié de l'adapter quand on modifie la hauteur, de même si on le modifie, il faut aussi adapter la hauteur. Vice-versa */

Cela devrait fonctionné.

[Hestia31]

Hm, décidément j'ai encore quelques problèmes, désolé ^^

- Malgré la modification, l'image reste au-dessus du bloc avec les nombres de sujets.

- Et enfin, j'aimerais si possible que ce soit l'image qui défile sur le côté et non pas le bloc des messages qui passe par-dessus, un peu comme ici : http://parisien.fr1.co/

Merci !

[Excidius]

Autant pour moi, je n'avais pas compris que c'était l'image que vous voulez qui soit dans ce bloc. Ce problème sera donc vite réglé.

Retournez dans votre template index_box, retrouvez donc ce code :

Code:

  <div class="monBloc">
          <div class="last_post" >  </div>
                    <div class="sujmes">
                   
                      {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                     
                    </div>
                          {catrow.forumrow.LAST_POST}
                         
        </div>

Nous allons nous concentré sur la partie de ce code :

Code:

<div class="monBloc">
          <div class="last_post" >  </div>

Ajoutez l'image qui est une variable dans la div last_post en l'ajoutant une class qui va nous servir à modifié l'image par le Css. Ce qui donne cette balise image.

Code:

<img class="img_mess" src="{catrow.forumrow.FORUM_FOLDER_IMG}"> </img>

Et cela devrai donné ceci :

Code:

 <div class="monBloc">
          <div class="last_post" > <img class="img_mess" src="{catrow.forumrow.FORUM_FOLDER_IMG}"> </img> </div>
                    <div class="sujmes">
                   
                      {catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages
                     
                    </div>
                          {catrow.forumrow.LAST_POST}
                         
        </div>

Ensuite, place au Css. Il faut modifié l'image. Normalement elle est carrée et dépasse de la div qui elle est arrondie. Alors, nous allons arrondir l'image pour qu'elle ne dépasse pas cette div.

Code:

.img_mess {
  -moz-border-radius: 40px;
          -webkit-border-radius: 40px;
          -o-border-radius: 40px;
 
}

Voilà, normalement ce devrai être bon.

[Excidius]

Encore une chose, supprimez ce code-ci, c'est important.

Code:

 <div class="img_msg">
                            <span class="img_topic"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span>
                        </div>

[Hestia31]

C'est parfait, merci beaucoup