Rappel du premier message :

Catégories Pink & Gray

Suite à une demande de Javarakita voici des catégories Pink & Gray.

Je précise que l'arrière plan beige correspond à mon forum.



Précision : La taille des images news/no news/lock doit faire 150px par 50px.

Et le code :
HTML :

Code:

<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <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="0" cellpadding="0">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>   
<th nowrap="nowrap" width="150"><div style="width:150px;"> </div></th><!-- 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%">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
      </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="{catrow.forumrow.INC_CLASS}" align="center"><br/>
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-top:7px;" />
                  <div class="cat_gauche"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span><br/>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <span class="nom_cat">
               <a class="nom_cat" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
                  <span class="cat_desc">{catrow.forumrow.FORUM_DESC}</span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
                  <span class="cat_droite_conteneur"><div class="cat_droite_contenu" id="sousForums"><span class="gensmall2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div></span>
                    <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
  </script>
      </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 -->

CSS :

Code:

.secondarytitle {
  text-align:left !important;
  font-family: 'Playball', cursive;
}
.cat_gauche {
font-size:12px;
background-color:WhiteSmoke;
padding:5px;
margin-top:9px;
width:140px;
}

.nom_cat {
font-size:20px;
font-weight:bold;
font-family: 'Playball', cursive;
transition:1s;
transition-delay: -0.1s;
}

.nom_cat:hover {
font-size:20px;
font-weight:bold;
font-family: 'Playball', cursive;
letter-spacing:5px;
transition:1s;
}

.cat_desc {
height:105px;
overflow:auto;
display:block;
text-align:justify;
font-size:12px;
background-color:WhiteSmoke;
padding:10px;
}

.cat_droite_conteneur {
margin-top:25px;
height:105px;
overflow:auto;
display:block;
text-align:justify;
background-color:WhiteSmoke;
padding:10px;
}

.cat_droite_contenu {
background-color:pink;
padding:3px;
width:124px;
margin:auto; 
font-family: 'Playball', cursive;
font-size:18px;
}

.gensmall2 a {
  font-size:18px !important;
}

La suite de l'ensemble se trouve ici :

PA Pink & Gray
Catégories
Qeel

C'est super beau !

Merci :)

merci

Très joli !

Merci!

Merci !

Merci, c'est joli :heart:

merci

Merci.

merci

merci ♥

Joli !

Merci.

Oh comme c'est joli ! Merci de nous mettre ces catégories en libre service ! ♥ ♥ ♥

Merci ! ♥

merci beaucoup

Merci a toi

Merci !

Ca change comme catégories je trouve, j'aime beaucoup ! Merciii ♥

mciii

Merci énormément de partager ton travail

merci

Cest carément pratique et joli. Le genre que je rechercherais bien pour mon fofo depuis un moment sans jamais trouver.

C'est carrément pratique et joli. Le genre que je rechercherais bien pour mon fofo depuis un moment sans jamais trouver.

Sympa ! :)