L'Océan Sonore
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -21%
LEGO® Icons 10329 Les Plantes Miniatures, ...
Voir le deal
39.59 €

Avec Hover et image descriptive [1]

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

Eli-a

Eli-a

- Codeur

-



Le code (affichage -> templates -> général ->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="cate_head"><div id="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
<div class="cate_body">
  <span style="display: block; height: 1px; clear: both;"></span>
        <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 
<div class="forum_bloc">

  <div class="forum">{catrow.forumrow.FORUM_DESC}<div id="nom_forum"><a href="{catrow.forumrow.U_VIEWFORUM}" id="lien_forum">{catrow.forumrow.FORUM_NAME}</a></div>
    <div id="stat_forum">{catrow.forumrow.TOPICS} sujets / {catrow.forumrow.POSTS} message</div>
    <div id="last_poste">{catrow.forumrow.LAST_POST}</div>
    <div class="sous_f">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    <div id="imgN_forum"><img id="imgn02" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    </div>
 
</div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<span style="display: block; height: 1px; clear: both;"></span>
</div>
<div class="cate_foot"></div>

<!-- END tablefoot --><!-- END catrow -->
Il s'agît du template entier, remplacer l'intégralité du code présent par celui-ci.

CSS :
Code:
/*----------------------- CATEGORIE PAR ELI-A ---------------------*/
.forum_bloc
{
  width: 800px;
  margin: auto;
}

.forum
{
  width: 380px;
  float: left;
  height: 275px;
  margin: 8px;
  overflow:hidden;
  background: white;
  border:2px solid white;
  -moz-box-shadow: 5px 5px 5px 0px #656565;
-webkit-box-shadow: 5px 5px 5px 0px #656565;
-o-box-shadow: 5px 5px 5px 0px #656565;
box-shadow: 5px 5px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}

.forum:hover #nom_forum {
  top:-400px;
width:380px;
text-align:center;
  transition:0.5s;
}

#nom_forum {
 position:relative;
  top:-310px;
width:380px;
text-align:center;
  transition:0.5s;
}

#lien_forum {
    text-align:left;
  font-size:25px;
  text-shadow : 1px 1px #000000;
  color:white !important;
  transition:0.5s;
}

#lien_forum:hover {
  color:grey !important;
  transition:0.5s;
}

#imgN_forum {
  position:relative;
  top:-400px;
  width:380px;
text-align:center;
  transition:0.5s;
}

.forum:hover #imgN_forum {
  top:-270px;
  transition:0.5s;
}

#imgn02 {
  width:250px;
  height:40px;
  transition:0.5s;
}

.forum:hover #imgn02 {
  width:80px;
  height:13px;
  transition:0.5s;
}

#description01 {
  position:relative;
  width:380px;
  height:105px;
  background-image:url('http://zupimages.net/up/16/06/q5pk.png');
  top:-200px;
  left:-380px;
  transition:0.7s;
  overflow:auto;
  text-align:justify;
  font-size:13px;
}

.forum:hover #description01 {
  left:0px;
  transition:0.7s;
}

#last_poste {
 position:relative;
  top:-392px;
  font-size:11px;
  width:380px;
  height:16px;
  overflow:hidden;
  text-align:center;
  background-image:url('http://zupimages.net/up/16/06/abwc.png');
  right:-380px;
  transition:0.7s;
}

.forum:hover #last_poste {
  right:0px;
  transition:0.7s;
}

#last_poste br {
    display: none;
}

#stat_forum {
  position:relative;
  top:-397px;
    font-size:15px;
  font-weight: bold;
  width:380px;
  text-align:center;
  text-shadow: -3px -1px 7px rgba(255, 255, 255, 1);
  left:-380px;
  color:black;
  transition:0.5s;
}

.forum:hover #stat_forum {
  left : 0px;
  transition:0.5s;
}

.sous_f {
  position:relative;
  top:-275px;
  background-image:url('http://zupimages.net/up/16/06/abwc.png');
  width:380px;
  height:65px;
  overflow:hidden;
  right:-380px;
  transition:0.7s;
}

.sous_f a {
  font-size:15px;
  background:white;
  border-radius:5px;
  padding:2px 5px;
  margin:5px;
}

.forum:hover .sous_f {
  right:0px;
  transition:0.7s;
}

.cate_head
{
  clear: both;
  width: 800px;
  margin: auto;
  height: 140px;
  background: url(http://zupimages.net/up/16/06/p9j0.png);
}
.cate_body
{
  width: 800px;
  margin: auto;
  background: url(http://zupimages.net/up/16/06/rgpo.png) repeat-y;
}
.cate_foot
{
  width: 800px;
  height: 36px;
  margin: auto;
  background: url(http://zupimages.net/up/16/06/o5yr.png);
}

#titre_cate {
  position: relative;
  width: 800px;
  text-align: center;
  top:25px;
}

#titre_cate h2 {
  font-size:35px;
  color:#57321A;
  font-weight:normal;
}

/*----------------------- FIN CATEGORIES -----------------------*/

Code à mettre dans la description :
Code:
<img id="img_description" src="lien image 380*275" />
<div id="description01">
           Texte     
</div>
Largeur du forum conseillée : 820px.
Affichage, structure et hiérarchie : Séparer les catégories sur l'index : Moyen
Lien vers les niveaux inférieurs : Oui (SANS image)


Dernière édition par Eli-a le Lun 21 Mar - 3:14, édité 1 fois

Revenir en haut Aller en bas

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