[Template&CSS] Organisation des Catégories [Soft Style]

Lun 2 Avr 2012 - 19:25

Taktiik

Age : 29Messages : 2292

Lun 2 Avr 2012 - 19:25

#phpBB2

Organisation des Catégories [Soft Style]

Dernière mise à jour : 24 Novembre 2012

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 • Afficher les modérateurs d'un forum : Non ? Un défaut a été remarqué lorsque le nombre de forums n'est pas le même dans chaque colonne, il se peut qu'il y ait une déformation, c'est en cours de réflexion ! ? Niveau images, il vous faudra un bouton no new/new/lock de dimensions 100100 afin qu'il soit optimisé au maximum. ? Niveau description des forums, vous devrez avoir un maximum de 200 caractères, sinon, elle ne se verra pas (sauf si vous passez overflow en auto 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 : 02/04/2012 Type : Astuce

V

oici une astuce dans laquelle je vous donne une construction des organisations tout faite.
Ce que vous devez savoir, c'est qu'elle est un dérivé du tutoriel de Sparrow et qu'elle donne à voir en premier plan, les forums de votre forum. Comme ce tutoriel était énormément demandé et que j'étais tenté de l'approfondir à ma manière, je vous donne ce que j'ai pu en tiré, à savoir, un système de catégorie sur trois colonnes, pratique et assez rapide pour l'interface. Vous devrez faire quelques changements de hiérarchie ou autres que je vous indiquerais avant de vous donner les codes. 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.
L'esthétique est basique et vous laisse libre choix pour la modifier Wink

Comme vous pouvez le constater, le défaut de cette organisation, c'est qu'elle nécessite la jugeote du surfeur pour aller chercher la description du forum. Elle nécessite aussi une largeur assez importante pour que les trois catégories puissent tenir alignées, libre à vous de réduire la largeur totale et de ne mettre que deux catégories par deux catégories. Après, les mêmes avantages/inconvénients que le tuto que j'ai lié plus haut s'appliquent. Outre cela, elle permettra d'avoir une vue d'ensemble rapide sur la totalité de votre forum.

Navigation

Partie Template
Partie CSS

Partie Template

Vous devez donc remplacer votre template Index_box par celui-ci :

Code::   <div class="cates"> <div class="cate"> <div class="titre_cate">{catrow.tablehead.L_FORUM}</div>   <div class="forums"> <div class="description"> <img class="img_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <span class="genmed"> <div class="forum_stat">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets</div> {catrow.forumrow.FORUM_DESC} </span> </div> <div class="desc gensmall"> <a class="titre_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /> {catrow.forumrow.LAST_POST} </div> <div style="clear: both"></div> <div class="ssforum gensmall"><strong>Sous-forums :</strong> {catrow.forumrow.LINKS}</div> </div>   <div style="clear: both"></div> </div> </div>

Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!

Partie CSS

Maintenant, Ajoutez ce CSS au votre :

Code:: .cates /*Ensemble catégories*/ { width: 1150px; height: auto; text-align: center; margin: auto; } .cate /*Une catégorie*/ { float: left; background-color: #454545; border: 2px solid #353535; width: 350px; height: auto; text-align: left; margin: 5px; padding-bottom: 30px; border-radius: 30px; box-shadow: 1px 1px 5px #000000; } .titre_cate, .titre_cate h2 /*Titre catégorie*/ { background-color: #242424; border-bottom: 2px solid #353535; height: 70px; text-align: center; font-size: 30px; text-shadow: 1px 1px 1px black; margin-bottom: 20px; margin-top: 0px; padding-top: 10px; border-radius: 28px 28px 0 0; } .forums /*Forums*/ { background-color: #545454; border: 2px solid #242424; width: 330px; height: auto; text-align: center; padding: 0px; margin: auto; margin-top: 5px; margin-bottom: 5px; } a.titre_forum, a.titre_forum:hover /*Titre Forum*/ { display: block; font-size: 24px; text-align: center; text-shadow: 1px 1px 1px #000000; } .forum_stat /*Stats forum*/ { text-align: center; text-shadow: 1px 1px 1px #000000; font-size: 13px; color: #ffffff; } .desc /*Description Conteneur*/ { float: right; width: 220px; text-align: center; } .description /*Description contenu*/ { float: left; border-right: 2px solid #242424; } .description span { background-color: #bebebe; width: 1px; height: 94px; margin-left: 2px; padding: 3px; position: absolute; text-align: justify; color: #000000; overflow: hidden; opacity : 0; transition: all 0.540s; -webkit-transition: all 0.540s; } .description:hover span /*Description survolé*/ { width: 222px; opacity : 0.9; transition: all 0.540s; -webkit-transition: all 0.540s; } .ssforum /*Sous-forums*/ { overflow: auto; background-color: #242424; width: 100%; height: 20px; text-align: justify; color: #858585; }