Catégories Lumineuses 
Dernière mise à jour : 06 Avril 2013
Dans les nombreuses commandes que j'ai réalisé jusqu'ici, la plupart sont des catégories.
Et pas pour rien ! En effet, elles sont un élément presque décisif pour le forum et son esthétique, c'est elles qui mettront l'ordre ou non sur votre plateforme.
RP, discussions, sondages, c'est comme vous voulez, cette astuce est valable et modifiable pour tous les forums !
Tout d'abord, je tiens à vous dire que cette astuce lie deux de mes tutos :
Des sous-forums en retour à la ligne
Et
Un corps Catégories. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
Voilà la partie Template, je n'ai mis aucun commentaire puisqu'il n'y a rien de vraiment dur.
Copiez-collez le code ci-dessous et passez à la partie CSS
Cette partie sera la plus commentée, en effet, elle inclus beaucoup de propriétés que vous ne connaissez pas forcément.
Ainsi, j'ai parsemé le code CSS de plusieurs commentaires qui vous aideront.
Voila !
J'espère que cette astuce vous dépannera et vous plaira.
Si vous avez des questions, n'hésitez pas à les poster
Cordialement~~
Taktiik.
Dernière mise à jour : 06 Avril 2013| Aperçu | Préparation | Détails |
W W W | Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration. ? Affichage>Structure et Hiérarchie : • Séparer les catégories sur l'index (Deuxième ligne) : Moyen • Afficher le titre du sujet du dernier message d'un forum sur l'index : Oui • Lien vers les niveaux inférieurs : Oui ou Avec une image • Afficher les modérateurs d'un forum : Non Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau : Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée. | Niveau : Facile Fait : 10/03/2012 Type : Tutoriel |
V
oici une astuce dans laquelle je vous apprend à embellir vos catégories (ou pas ;D)Dans les nombreuses commandes que j'ai réalisé jusqu'ici, la plupart sont des catégories.
Et pas pour rien ! En effet, elles sont un élément presque décisif pour le forum et son esthétique, c'est elles qui mettront l'ordre ou non sur votre plateforme.
RP, discussions, sondages, c'est comme vous voulez, cette astuce est valable et modifiable pour tous les forums !
Tout d'abord, je tiens à vous dire que cette astuce lie deux de mes tutos :
Des sous-forums en retour à la ligne
Et
Un corps Catégories. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.
Navigation
La Partie Template
Voilà la partie Template, je n'ai mis aucun commentaire puisqu'il n'y a rien de vraiment dur.
Copiez-collez le code ci-dessous et passez à la partie CSS
- Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="titre_cate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="forum">
<table width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
<td align="center" valign="middle">
<img class="icon" src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
<a class="titre_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
<div class="description genmed">
{catrow.forumrow.FORUM_DESC}
</div>
<div class="ssforum gensmall" id="subforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>
</td>
<td align="center" valign="middle">
<div class="lastpost gensmall">
{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets <br /> <br />
{catrow.forumrow.LAST_POST}
</div>
</td>
</tr>
</table>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br /> ')).removeAttr('id');
</script>
<!-- END catrow -->
La Partie CSS
Cette partie sera la plus commentée, en effet, elle inclus beaucoup de propriétés que vous ne connaissez pas forcément.
Ainsi, j'ai parsemé le code CSS de plusieurs commentaires qui vous aideront.
- Code:
/* Debut des CATEGORIES */
/*Gère le squelette du titre catégorie*/
.titre_cate
{
text-align: center;
text-shadow: 1px 1px 1px black;
}
/*Gère l'aspect esthétique du titre catégorie*/
.titre_cate h2
{
font-size: 25px;
color: #cccccc;
}
/*Le forum en lui même, le fond, la bordure, l'ombre etc..*/
.forum
{
background-color: #dfdfdf;
border: 2px solid #ffffff;
width: 853px;
height: 150px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
-moz-box-shadow: 1px 1px 10px #dfdfdf;
-webkit-box-shadow: 1px 1px 10px #dfdfdf;
box-shadow: 1px 1px 10px #dfdfdf;
}
/*Image no new, attention, elle doit faire 150*150 pour un affichage optimisé*/
.icon
{
float: left;
}
a.titre_forum
{
display: block; /*Passe le titre du forum de simple élément en ligne à un block*/
color: #cccccc;
letter-spacing: 1px; /*Laisse un espace de 1px entre chaque lettre*/
font-size: 15px;
text-shadow: 1px 1px 1px black;
text-decoration: none!important;
}
.description
{
overflow: auto;
float: left;
background-color: #cccccc;
border: 1px solid #ffffff;
border-right: 0px;
height: 107px;
width: 500px;
padding: 5px;
-moz-border-radius: 25px 0 0 25px;
-webkit-border-radius: 25px 0 0 25px;
border-radius: 25px 0 0 25px;
/*Arrondis sur la plupart des navigateurs*/
-moz-box-shadow: inset 1px 1px 10px #dfdfdf;
-webkit-box-shadow: inset 1px 1px 10px #dfdfdf;
box-shadow: inset 1px 1px 10px #dfdfdf;
/*Ombre sur la plupart des navigateurs*/
}
.ssforum
{
float: right;
/*Fait flotter sur la droite les sous-forums sur la droite de la description*/
background-color: #cccccc;
border: 1px solid #ffffff;
height: 120px;
width: 120px;
overflow: auto;
-moz-border-radius: 0 25px 25px 0;
-webkit-border-radius: 0 25px 25px 0;
border-radius: 0 25px 25px 0;
-moz-box-shadow: inset 1px 1px 10px #dfdfdf;
-webkit-box-shadow: inset 1px 1px 10px #dfdfdf;
box-shadow: inset 1px 1px 10px #dfdfdf;
}
/* Fin des CATEGORIES */
Voila !
J'espère que cette astuce vous dépannera et vous plaira.
Si vous avez des questions, n'hésitez pas à les poster
Cordialement~~
Taktiik.
Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.
Dernière édition par Taktiik le Jeu 25 Avr 2013 - 18:38, édité 6 fois
![[Template & CSS] Catégories Lumineuses Fayr](https://2img.net/r/ihimizer/img706/4205/fayr.jpg)
![[Template & CSS] Catégories Lumineuses 121926034f5e3fbba2a48](https://2img.net/h/www.pixyup.com/uploads/121926034f5e3fbba2a48.png)
![[Template & CSS] Catégories Lumineuses Tira11](https://i.servimg.com/u/f40/09/00/34/04/tira11.png)
![[Template & CSS] Catégories Lumineuses Tumblr_nenygwIlcz1s4u464o1_500](https://33.media.tumblr.com/fccf9645d54e1decde543249c75922a0/tumblr_nenygwIlcz1s4u464o1_500.gif)
