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.
HTML & CSS ~ Voici donc un aperçu : www ~ Version : PhpBB2
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"> </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
Qeel
Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
Dernière édition par A-Lice le Lun 16 Fév 2015 - 21:13, édité 1 fois
