Rappel du premier message :
Catégories " Las Vegas "
Voici mon tout premier Libre Service de catégories, qui est dans une ambiance relativement nocturne avec un petit air de Las Vegas. C'est des Spots, de la lumière, un peu sixties et des étoiles pleins les yeux.
I - TEMPLATE INDEX_BOX
Il faut que vous supprimiez l'intégralité de votre template, puis mettre celui-ci.
II - CSS
III - POUR LES DESCRIPTIONS DE CATÉGORIES
Catégories " Las Vegas "
APERCU
Voici mon tout premier Libre Service de catégories, qui est dans une ambiance relativement nocturne avec un petit air de Las Vegas. C'est des Spots, de la lumière, un peu sixties et des étoiles pleins les yeux.
I - TEMPLATE INDEX_BOX
Il faut que vous supprimiez l'intégralité de votre template, puis mettre celui-ci.
- Code:
<link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Oswald|Bree+Serif|Alfa+Slab+One|Covered+By+Your+Grace|Dancing+Script'rel='stylesheet' type='text/css'>
<table>
<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_title">
{catrow.tablehead.L_FORUM}
</div>
<div class="categorie_bloc">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="cate_forum">
<div class="categorie_forum_milieu">
<table _moz_resizing="true" border="0">
<tbody>
<tr>
<td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
{catrow.forumrow.FORUM_DESC}
<br />
</td>
<td><div class="categorie_forum_stat">
<div class="forum_last_stats">
{catrow.forumrow.TOPICS} • {catrow.forumrow.POSTS}
</div>
<div class="forum_last_mess">
{catrow.forumrow.LAST_POST}
</div>
</div></td><td>
<img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
</td>
</tr>
</tbody>
</table>
<div class="sous_forum_lien">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->
II - CSS
- Code:
/************************************************** DÉBUT DES CATÉGORIES **************************************************/
/*Bloc des forums*/
.cate_forum {
height: 200px;
width: 900px;
}
/*Bloc des titres des catégories*/
.cate_title {
width: 800px;
height: 75px;
margin: auto;
text-align: center;
background-repeat: no-repeat;
background-position: top center;
margin-bottom: -10px;
}
/*Titres des catégories*/
.cate_title h2 {
display: block;
height: 60px;
margin: 0px;
font-family: "Alfa Slab One";
font-size: 55px;
letter-spacing: 1px;
color: #272744;
}
.cate_title h2 img {
margin-top: -25px;
margin-left: 20px;
}
.cate_title h2 span {
display: none;
}
a.nav img {
display: none;
}
/*Bloc des catégories*/
.categorie_bloc {
background-color: #0C0C1C;
width: 900px;
margin: auto;
margin-bottom: 10px;
padding-top: 50px;
padding-bottom: 1px;
font-family: "abeatbykai", sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: #272744;
}
/*Image Old New Lock*/
.old_new_lock {
float: left;
margin-left: -70px;
margin-top: -120px;
}
/*Bloc complet du milieu*/
.categorie_forum_milieu {
position: relative;
float: left;
margin-top: 10px;
margin-left: 65px;
margin-right: 15px;
width: 750px;
height: 140px;
padding: 10px;
padding-top: 17px;
background-color: #111124;
}
/*Titres des forums*/
.forumlink {
position: absolute;
margin-top: -15px;
margin-left: 15px;
z-index: 2;
height: 50px;
font-size: 40px;
font-family: 'Alfa Slab One', cursive;
color: #272744!important;
font-weight: normal;
}
/*Titres survolés des forums*/
.forumlink:hover {
color: #6D6DAB!important;
text-decoration: none!important;
}
/*Désactiver les images des titres*/
.forumlink img {
display: none;
}
/*MISE EN FORME DESCRIPTION*/
.description {
font-size: 11px;
line-height: 11px;
text-align: justify;
position: relative;
padding: 15px;
height: 70px;
width: 430px;
overflow-y: auto;
padding-right: 5px;
margin-top : 40px;
}
.losange {
height: 80px;
width: 80px;
float: right;
margin-right: -280px;
margin-top: 40px;
border: 5px solid #0C0C1C;
background: #0C0C1C;
-ms-transform: rotate(45deg); /* Internet Explorer */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari et Chrome */
-o-transform: rotate(45deg); /* Opera */
}
/*Bloc des sous forums*/
.sous_forum_lien {
font-size: 11px;
line-height: 11px;
text-align: justify;
position: relative;
margin-top : -25px;
margin-left: -10px;
overflow: auto;
height: 17px;
width: 400px;
background-color: #111124;
}
/*Bloc des statistiques et du dernier message*/
.categorie_forum_stat {
position: relative;
float: left;
margin-top: 10px;
width: 160px;
height: 70px;
padding: 5px;
text-align: center;
}
/*Statistiques*/
.forum_last_stats {
margin-left: 3px;
margin-right: 3px;
padding-bottom: 3px;
font-size: 25px;
font-family: "Abril Fatface";
color: #37A03F;
}
/*Police du dernier message*/
.forum_last_mess, .forum_last_mess a.gensmall {
font-size: 11px;
font-family: "abeatbykai", sans-serif;
}
/*Couleur des liens du dernier message*/
.forum_last_mess a {
color: #37A03F;
}
/*Les barres de défilement dans les catégories*/
.forum_desc::-webkit-scrollbar {height:11px; width:6px; background:none; margin-right:5px;}
.forum_desc::-webkit-scrollbar-thumb {background:rgba(241,163,189,1); height:30px; border-radius:30px;}
.forum_desc::-webkit-scrollbar-corner {background:none;}
/*Retirer les soulignements*/
a { text-decoration: none; }
/************************************************** FIN DES CATÉGORIES **************************************************/
III - POUR LES DESCRIPTIONS DE CATÉGORIES
- Code:
<div class="losange">
<img src="http://www.pixenli.com/images/1427/1427468682011529000.png" class="imgforum" />
</div>
<div class="description">
et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu. et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu.
</div>
• Ce code fait 900px de large.
• Les images des losange suivent la rotation de ceux-ci.
• Les boutons font 100*100.
• Les images des losange suivent la rotation de ceux-ci.
• Les boutons font 100*100.
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 Nyan-cat le Lun 30 Mar 2015 - 22:24, édité 2 fois
merci du partage !
