Bonjour,
j'avais envie de faire tout un codage LS en style néon donc je commence par vous donner les catégories, dont j'ai rencontré des petites difficultés donc merci à Alzufen et NyoTheNeko pour l'aide qu'ils m'ont apportés.
Vous pouvez voir le rendu ici ou encore là.
Pour cette catégorie nous toucherons la template index_box et le CSS
Par ailleurs avant de commencer, vous devez allez dans Général / Configuration et dans la section Structure des Pages mettre : Largeur du forum : 900.
Par ailleurs dans Affichage / Structure et hierarchie mettre les deux sur moyen
Le Template
- Code:
<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<span class="categorie_titre">
{catrow.tablehead.L_FORUM}
</span>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="categorie_neon">
<div class="cat_gauche">
<div class="nom_forum">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a href="{catrow.forumrow.U_VIEWFORUM}" >{catrow.forumrow.FORUM_NAME}</a>
</h{catrow.forumrow.LEVEL}>
</div>
<div class="description">
<p >{catrow.forumrow.FORUM_DESC}</p>
</div>
<div class="icone"><span><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" /></span>
</div>
</div>
<div class="cat_droite"><div class="dernier_sujet">
<!-- BEGIN avatar -->
<span >{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
<!-- END avatar -->
<span>
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
</div>
<div class="sous_liens"><span ><div id="sousForums"><span >{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>
</div>
<div class="moderateurs">
<!-- BEGIN switch_moderators_links -->
<div >
{catrow.forumrow.switch_moderators_links.L_MODERATOR}
{catrow.forumrow.switch_moderatros_links.MODERATORS}
</div>
<!-- END switch_moderators_links -->
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
</div>
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
<ul>
<!-- BEGIN switch_delete_cookies -->
<li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
<!-- END switch_delete_cookies -->
<!-- BEGIN switch_user_logged_in -->
<li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
<!-- END switch_user_logged_in -->
</ul>
</div>
<!-- END switch_on_index -->
CSS
- Code:
a:link {
text-decoration: none;
}
#submenu ul li a {
padding: 0px;
margin: 0px;
text-decoration: none;
}
/* ---------------------------------- CATEGORIE NEON ------------------------------------------------------- */
.categorie_neon{
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #6e6b6e;
border: 8px #41dd23 solid;
border-radius: 60px;
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden;
box-shadow: 0px 0px 8px green;
}
.categorie_titre{
font-size: 25px;
text-transform: uppercase;
text-align: center;
color: rgba(255,255,255,0.7);
text-shadow: 0px 0px 8px green;
font-family: 'Orbitron', sans-serif;
position: relative;
top: 10px;
}
.cat_gauche{
float: left;
width: 500px;
overflow: hidden;
margin-left: 20px;
padding-top: 10px;
}
.nom_forum{
font-size: 20px;
text-transform: uppercase;
text-align: right;
color: rgba(255,255,255,0.7);
text-shadow: 0px 0px 8px green;
font-family: 'Orbitron', sans-serif;
}
.description{
background-color: rgba(255,255,255,0.1);
height: 80px;
overflow: auto;
border: 2px solid rgba(0,255,0,0.2);
border-bottom: none;
box-shadow: -1px -1px 8px green;
}
.icone{
background-color: rgba(255,255,255,0.1);
height: 40px;
text-align: right;
border: 2px solid rgba(0,255,0,0.2);
border-top: 1px solid rgba(255,255,255,0.4);
box-shadow: 1px 10px 8px green;
}
.cat_droite{
width: 150px;
overflow: hidden;
float: right;
margin-top: 20px;
border: 3px solid rgba(0,255,0,0.2);
box-shadow: 0px 0px 8px green;
}
.dernier_sujet{
background-color: rgba(255,255,255,0.1);
text-align: center;
height: 60px;
}
.sous_liens{
background-color: rgba(255,255,255,0.1);
text-align: center;
height: 60px;
overflow: auto;
}
.sous_liens a{
font-size: 15px;
}
.sous_liens a:hover{
font-size: 18px;
background-color: rgba(0,255,0,0.5);
border-radius: 30px;
}
.moderateurs{
background-color: rgba(255,255,255,0.1);
text-align: center;
height: 10px;
padding-bottom: 5px;
}
/* --------------------------------------------------------------------------------------------------------- */
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
Dernière édition par Ayfoth le Sam 22 Nov 2014 - 21:32, édité 3 fois