AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-43%
Le deal à ne pas rater :
VTECH Mon Super Etabli interactif + 2ème à -50%
39.99 € 69.99 €
Voir le deal

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

    Taktiik
    Taktiik
    MasculinAge : 30Messages : 2292

    Lun 2 Avr 2012 - 19:25

    Rappel du premier message :



    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 100*100 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


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

    Code:
       <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
       <div class="cates">
       <div class="cate">
       <div class="titre_cate">{catrow.tablehead.L_FORUM}</div>
       <!-- END tablehead -->
       <!-- BEGIN forumrow -->
       <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>
       <!-- END forumrow -->
       <!-- BEGIN tablefoot -->
       <div style="clear: both"></div>
       </div>
       </div>
       <!-- END tablefoot -->
       <!-- END catrow -->

    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;
    }

    Navigation




    Voila ! Very Happy
    J'espère que cette astuce vous aidera à embellir votre forum =)
    Cordialement~~
    Taktiik.


    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Taktiik le Sam 24 Nov 2012 - 15:53, édité 5 fois
    Anonymous
    Invité

    Ven 4 Mai 2012 - 15:06

    Sankyou ! (:
    Rose24
    Rose24
    FémininAge : 33Messages : 24

    Ven 4 Mai 2012 - 22:57

    Wow !! *-* Très joli !
    Merci pour le tuto !
    Zatih
    Zatih
    MasculinAge : 34Messages : 19

    Sam 5 Mai 2012 - 0:51

    Sublime tutoriel ! Merci beaucoup =)
    Leean
    Leean
    FémininAge : 31Messages : 19

    Lun 14 Mai 2012 - 21:20

    Merci beaucoup : )
    TUC
    TUC
    FémininAge : 36Messages : 103

    Lun 21 Mai 2012 - 12:33

    le test est magnifique!! j'veux voir ça ^^ et merci d'avance Wink



    [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Tumblr_msx9fygOsJ1qlujrso1_250 [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Tumblr_msx9fygOsJ1qlujrso2_250 [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Tumblr_msx9fygOsJ1qlujrso3_250 [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Tumblr_msx9fygOsJ1qlujrso4_250
    Tchi
    Tchi
    FémininAge : 31Messages : 40

    Mar 5 Juin 2012 - 0:01

    Merci pour ce tuto ♥
    G U E R L A I N
    G U E R L A I N
    FémininAge : 33Messages : 192

    Mer 6 Juin 2012 - 1:22

    c'est dommage qu'il n'y a pas d'image en exemple pour voir :/

    mais merci beaucoup quand même ^^



    [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 191114colorfulwallandsexygirlfacebookcovero1
    CathyCréation
    CathyCréation
    FémininAge : 45Messages : 207

    Ven 8 Juin 2012 - 3:32

    Le css ne fonctionne pas je l'ai essayée une dizaine de fois et rien a faire
    il me marque qu'il y a une erreur pfffffff
    Elricka
    Elricka
    MasculinAge : 33Messages : 77

    Dim 10 Juin 2012 - 23:19

    Je précise que le lien est... dead ? Oui, il l'est !
    T_Time
    T_Time
    FémininAge : 27Messages : 104

    Lun 11 Juin 2012 - 18:47

    Mercii ♥
    Candiice.
    Candiice.
    FémininAge : 27Messages : 11

    Lun 11 Juin 2012 - 21:15

    Mercii beaucoup <3
    Shy
    Shy
    MasculinAge : 30Messages : 126

    Mar 12 Juin 2012 - 0:45

    Merci



    [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 1413067250-signature37-1
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 32Messages : 105

    Jeu 14 Juin 2012 - 21:20

    merci !!!!
    NellyFée
    NellyFée
    FémininAge : 28Messages : 62

    Ven 15 Juin 2012 - 13:50

    Merciiii ^_^
    Ryuu
    Ryuu
    FémininAge : 30Messages : 61

    Ven 15 Juin 2012 - 14:14

    Merci



    killer999
    killer999
    MasculinAge : 33Messages : 116

    Sam 16 Juin 2012 - 0:30

    Thanks
    Mzelle Machin
    Mzelle Machin
    FémininMessages : 118

    Lun 18 Juin 2012 - 21:22

    Merci =)
    Lena
    Lena
    FémininAge : 33Messages : 100

    Mar 19 Juin 2012 - 20:51

    pas d'image, donc soyons curieux e.e

    Merci x)



    [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Lena13

    Merci a Kazuya pour son kit =)
    Miku
    Miku
    MasculinAge : 32Messages : 70

    Mar 19 Juin 2012 - 21:26

    Merci.
    bubble82
    bubble82
    FémininAge : 79Messages : 12

    Mer 20 Juin 2012 - 18:13

    Merci pour ce tuto tant recherché cheers
    Moriarty
    Moriarty
    FémininAge : 29Messages : 85

    Ven 22 Juin 2012 - 15:51

    Merciiii *A*
    Hope-Tik
    Hope-Tik
    FémininAge : 29Messages : 10

    Mar 26 Juin 2012 - 15:18

    Je pense qu'il faudrait revoir le lien qui donne en exemple ce que cela peut donner :s
    Mais merci !!
    Killike
    Killike
    FémininAge : 30Messages : 33

    Mar 26 Juin 2012 - 23:10

    merci pour le tuto ^^



    [Template&CSS] Organisation des Catégories [Soft Style] - Page 2 Essaie4
    Meio'
    Meio'
    FémininAge : 29Messages : 3

    Mer 27 Juin 2012 - 10:51

    Merci!
    Davy J.
    Davy J.
    MasculinAge : 34Messages : 26

    Mer 27 Juin 2012 - 11:29

    Merci bien !
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 8:16