Petite modification de code catégories ._.

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

Résolu Petite modification de code catégories ._.

Message par Ashling le Lun 5 Mai 2014 - 10:40

Bonjour !

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

http://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 ! ♥


Dernière édition par Ashling le Ven 9 Mai 2014 - 21:31, édité 2 fois

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Mar 6 Mai 2014 - 14:10

Pitit up. ._.

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Mer 7 Mai 2014 - 12:52

Up !

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Jeu 8 Mai 2014 - 14:36

Upinounet o/

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Ven 9 Mai 2014 - 1:12

Up !

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Sam 10 Mai 2014 - 0:11

Up ;; !

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Aii-Chan~~ le Sam 10 Mai 2014 - 14:09

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 *^*)

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Sam 10 Mai 2014 - 14:51

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 !

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Aii-Chan~~ le Sam 10 Mai 2014 - 16:31

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  Wink 
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/

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Sam 10 Mai 2014 - 21:49

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 !

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Aii-Chan~~ le Sam 10 Mai 2014 - 22:47

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Dim 11 Mai 2014 - 0:22

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 !!!


Dernière édition par Ashling le Dim 11 Mai 2014 - 0:34, édité 1 fois

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Aii-Chan~~ le Dim 11 Mai 2014 - 0:30

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

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petite modification de code catégories ._.

Message par Ashling le Dim 11 Mai 2014 - 0:35

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

Ashling
**

Messages : 60
Inscrit(e) le : 11/08/2013

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

Résolu Re: Petite modification de code catégories ._.

Message par Aii-Chan~~ le Dim 11 Mai 2014 - 0:39

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 ! Very Happy

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)" !

Aii-Chan~~
***

Féminin
Messages : 109
Inscrit(e) le : 04/10/2011

Aii-Chan~~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petite modification de code catégories ._.

Message par Chacha le Lun 19 Mai 2014 - 10:04

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 résolu
  • 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 Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 51017
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha 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