Petite modification de code catégories ._.

[Ashling]

Bonjour !

Voilà mon forum : http://quasar.forumactif.org/

https://2img.net/image.noelshack.com/fichiers/2014/19/1399279005-cap3.png

En fait, à la base, dans ce carré, se trouvent les liens des forums intégrés à celui là. Je voudrais savoir si par une modification du template ou du css, on peut y mettre les images de description de chaque catégorie. ._. En fait, que dans ce cadre, on mette une image et quand la sourie passe dessus, que l'image disparaissent et que le lien vers les sous-forums soient là.

Voilà le css qui correspond :

Code:

 /* CATEGORIES */
a {
  text-decoration: none;
  color: #000000;
  font-size: 12px;}

.titreforum {
  color: #F58C46;
  font-size: 26px;
  font-family: Oswald;
  text-align: center;
}

.ensemble {
  background-color: #FFFFFF;
  margin-top: -20px;
  font-size: 12px;
  padding: 10px;
  color: #000000;
  width: 750px;
}

.description {
  background-color: #ea1c2f;
  text-align: justify;
  width: 500px;
  height: 100px;
  overflow: auto;
  padding: 10px;
  font-size: 12px;
  color: #FFFFFF;
}

.messages {
  background-color: #C9F26F;
  letter-spacing: 7px;
  font-size: 12px;
  text-align: center;
  color: #FFFFFF !important;
  padding: 10px;
}

.liens {
  background-color: #C9F26F;
  font-size: 12px;
  text-align: left;
  color: #000000 !important;
  padding: 10px;
  height: 100px;
  width: 90px;
  margin-top: -50px;
}

.derniers {
  width:100px;
  height:100px;
  border-radius:80px;
  -webkit-border-radius:80px;
  -moz-border-radius:80px;
  background-color: #F58C46;
  font-size: 12px;
  text-align: center;
  color: #FFFFFF !important;
  margin-top: -40px;
  padding: 10px;
  margin-right: -70px;
}

Merci ! ♥

[Ashling]

Pitit up. ._.

[Ashling]

Up !

[Ashling]

Upinounet o/

[Ashling]

Up !

[Ashling]

Up ;; !

[Aii-Chan~~]

Bonjour !
Est-ce que tu veux un effet en fondu ou que l'image coulisse ?
Par contre ça ne sera possible que si le bloc des sous-forum soit codé directement sur tes descriptions, donc si le code se trouve sur ton template, il faudra se limiter à une image ><

(très joli design sinon *^*)

[Ashling]

Merci de venir. o/
Et merci pour le design ! (je m'y suis donnée à mort XD)
Je voudrais un fondu si possible, je n'ai pas tout compris, je sais que je dois mettre une partie des codes dans les descriptions mais comme c'est un peu flou, je mets pour template pour montrer. o//
Et voudrais vraiment des images différentes. ._.

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" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </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 -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" 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>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </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 -->
      
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
                                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="titreforum">{catrow.forumrow.FORUM_NAME}</div></a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
                  <center><div class="ensemble"><table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
                    -webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td><td><span class="genmed"><div class="description">{catrow.forumrow.FORUM_DESC}</div></span>
                    <br />  <div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
                    
                    <td><div class="liens">{catrow.forumrow.L_LINKS}<br />{catrow.forumrow.LINKS} </div></td> <td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
                    
                    </div></center>
      </td>
   </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Encore merci !

[Aii-Chan~~]

En effet, si tu veux changer chaque images, il faut passer par les descriptions, notamment les sous-forum qu'il faut rajouter manuellement.
Donc pour commencer, tu peux déjà désactiver les liens menant aux sous-forum sur le panneau d'admin, puisqu'il faudra rajouter les liens par toi-même !

Pour le template, il faut modifier ça :

Code:


                         <center><div class="ensemble"><table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
                            -webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td><td><span class="genmed"><div class="description">{catrow.forumrow.FORUM_DESC}</div></span>
                            <br />  <div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
                            
                            <td><div class="liens">{catrow.forumrow.L_LINKS}<br />{catrow.forumrow.LINKS} </div></td> <td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
                            
                            </div></center>
              </td>
           </tr>
           <!-- END forumrow -->
           <!-- BEGIN catfoot -->

Par celui-ci :

Code:


<table><tbody><tr><td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-left: -50px; -moz-transform:rotate(-20deg);
                    -webkit-transform:rotate(0deg); transform:rotate(0deg);"/></td>
    <td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <div class="messages"><span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.POSTS}</span> messages dans <span class="gensmall" style="color: #FFFFFF !important; font-size: 12px;">{catrow.forumrow.TOPICS}</span> sujets.</div></td>
<td><span class="gensmall"><div class="derniers"><br />{catrow.forumrow.LAST_POST}</div></span></td></tr></tbody></table>
 </td>
   </tr>  
           <!-- END forumrow -->
           <!-- BEGIN catfoot -->


Pour le code des descriptions, c'est celui-ci :

Code:

<table>
 
<tbody>
 <tr>
 
<td>
 
<div class="description">
 Curabitur at libero in massa bibendum sagittis quis in justo. Nulla auctor condimentum velit, ut imperdiet ipsum imperdiet et. Sed diam tellus, aliquet sed condimentum a, condimentum eget nulla. Mauris nec tortor enim. Mauris mattis leo ac venenatis aliquet. Etiam adipiscing lacinia mauris at tempus. Pellentesque lacus dui, pretium vel felis vitae, tincidunt sagittis sapien. Proin viverra metus leo, sed egestas risus suscipit ut. Ut ac blandit erat. Quisque a ligula sit amet quam bibendum dictum.
</div>
 
</td>
 
<td>
 <span class="liens_img"><span class="liens_sousfo"> <a href="http://">Sous-forum #1</a> <br /><a href="http://">Sous-forum #2</a> <br /><a href="http://">Sous-forum #3</a> <br /><a href="http://">Sous-forum #4</a> <br /><a href="http://">Sous-forum #5</a> <br /></span><img src="http://image.noelshack.com/fichiers/2014/19/1399730266-sousforum.png" /> </span>
</td>
 
</tr>
 
</tbody>
</table>

L'image à changer se trouve touuuut en bas du code   
Et enfin le css, je sais plus trop ce que j'ai bidouiller donc je t'envoie tout owo

Code:

/* CATEGORIES */
        a {
          text-decoration: none;
          color: #000000;
          font-size: 12px;}
        
       .titreforum {
          color: #F58C46;
          font-size: 26px;
          font-family: Oswald;
          text-align: center;
        }
        
       .ensemble {
          background-color: #FFFFFF;
          margin-top: -20px;
          font-size: 12px;
          padding: 10px;
          color: #000000;
          width: 750px;
        }
        
       .description {
          background-color: #ea1c2f;
          text-align: justify;
          width: 500px;
          height: 100px;
          overflow: auto;
          padding: 10px;
          font-size: 12px;
          color: #FFFFFF;
        }
        
       .messages { width: 500px;
          background-color: #C9F26F;
          letter-spacing: 7px;
          font-size: 12px;
          text-align: center;
          color: #FFFFFF !important;
          padding: 10px;
        }
 
       
       .derniers {
          width:100px;
          height:100px;
          border-radius:80px;
          -webkit-border-radius:80px;
          -moz-border-radius:80px;
          background-color: #F58C46;
          font-size: 12px;
          text-align: center;
          color: #FFFFFF !important;
          margin-top: -40px;
          padding: 10px;
          margin-right: -70px;
      

}
 
.liens_img
        {
          display: block;
          width:auto;
          height: auto;
      overflow: hidden;
  transform: all;
        -moz-transform: all;
        -o-transform: all;
        -htm-transform: all;
        -webkit-transform: all;
        transition: 1s;
        -moz-transition: 1s;
        -o-transition: 1s;
        -htm-transition: 1s;
        -webkit-transition: 1s;
        }
  .liens_img:hover
{
  background-color: #C9F26F;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}      
        .liens_sousfo
{  font-size: 10px;
          text-align: left;
          color: #000000 !important;
  position: absolute;
  display: block;
 padding: 10px;
          height: 100px;
          width: 90px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

        .liens_sousfo a
{  font-size: 10px;
          text-align: left;
          color: #000000 !important;
}
        .liens_sousfo a:hover
{  font-size: 10px;
          text-align: left;
          color: #FFFFFF !important;
}
.liens_sousfo:hover
{ background-color: #C9F26F;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

C'est un ancien code profil que j'utilisais, comme il vient de never-utopia, pense à les créditer quelque part /o/

[Ashling]

Wouah ! Merci pour tout ce travail ! o/
C'est vraiment génial !!
Mais j'ai juste un léger bug http://quasar.forumactif.org/ c'est l'image rétrécie mais je ne sais pas d'où ça vient ._. si c'est ma faute, je vais tout vérifier mais pour éviter de faire des conneries, je vais d'abord demander. ^^'
Mais merci !

[Aii-Chan~~]

Mais de rien /o/
Erf, c'est ma faute, j'ai oublié de préciser qu'il fallait une image de 110px en largeur et 120px de hauteur xD
Sinon il faut modifier le code et l'adapter aux images, mais ça ne sera pas joli de les avoir plus petites que les descriptions n_n

[Ashling]

J'ai mis une image de 110 x 120 px, mais ça ne change rien. ._.

EDIT : Nan, en fait c'est bon !

Merci, franchement tu es génial !!!

[Aii-Chan~~]

C'est très étrange là D:
Je peux avoir le code ? owo

[Ashling]

Nan, en fait c'est bon. ^^
Parfait !
TU ES VRAIMENT SUPRA MEGA GENIALE !!!

[Aii-Chan~~]

Ah ça me rassure XD J'ai cru qu'on allait devoir galérer avec ce bug étrange ;A;
Mais....pas besoin de me dire tout ça owo''''
Bonne chance pour la suite de la construction ! 

EDIT : au fait, j'ai oublié (encore), les icones de forum ne sont pas penchées, sur ton template il te reste des "rotate(0deg)" !

[Chacha]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif