Rappel du premier message :
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à.
Le Template
CSS
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à.
Cette catégorie est optimisée sur Invision.
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
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;
}
/* --------------------------------------------------------------------------------------------------------- */
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 Ayfoth le Sam 22 Nov 2014 - 21:32, édité 3 fois
