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.

Le Deal du moment :
Boutique Nike : -25% dès 50€ sur TOUT le ...
Voir le deal

    Catégories en tableaux couleur pêche

    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Dim 6 Mar 2016 - 13:17

    Rappel du premier message :



    Bonjour à vous ! 

    Voici mon second LS sur Never Utopia, on applaudit o/

    Ceci est donc un libre service de catégorie réalisé à la demande d'Amacky qui a fait le schéma et proposé la palette de couleurs.

    Un petit aperçu ici WWW

    > Afin d'avoir la bonne structure pour vos catégories
    PA > Affichage > Page d'accueil > Structure et hiérarchie > Conserver les catégories sur l'index > Moyen

    > La largeur des catégories est de 800px

    > Les dimensions des images new / old / lock sont de 57*100

    > Vous devez activer l'affichage des sous-forums si ce n'est pas déjà fait.
    PA > Affichage > Page d'accueil > Structure et hiérarchie > Lien vers les niveaux inférieurs ("oui" ou alors "avec image" -vous avez un exemple sur NU)

    > Pour régler le dernier message affiché:
    PA > Affichage > Page d'accueil > Structure et hiérarchie
    Vous devez cocher Oui pour Afficher le titre du sujet du dernier message d'un forum sur l'index
    La longueur du titre du sujet affiché doit être de 16.

    > Pour afficher l'avatar du dernier posteur :
    PA > Affichage > Page d'accueil > Structure et hiérarchie > Afficher les avatars dans la colonne "derniers messages" > Oui

    1. Ajouter les polices personnalisées. Il va falloir faire PA > Accueil > Affichage > Templates > Général > overall_header 
    Cette ligne, on va l'ajouter après la 3e ligne !
    Code:
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Voltaire|Handlee'rel='stylesheet' type='text/css'>

    On enregistre et on oublie pas d'activer la template !

    2. Puis on va aller dans index_box
    Pas besoin d'explications compliquées. On supprime le template de base et on le remplace par ce code là
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
                      <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>
    <div class="modifcat">
    <!-- BEGIN catrow --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
     <!-- BEGIN cathead -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td colspan="{catrow.cathead.INC_SPAN}" width="100%">
     <div class="cattitre">{catrow.cathead.CAT_TITLE}</div>
     </td>
     </tr>
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     <tr>
     <!-- BEGIN inc -->
     <td width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
     <!-- END inc -->
     <td>
                      <div class="imgmess">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                      </div>
               </td>
                      <h1 class="forumlink">
                        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </h1>
               <td>
     <div class="liensfrm">
                              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                            </div>
               </td>
             <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
                      <div class="descfrm">{catrow.forumrow.FORUM_DESC}</div>
             </td>
                       <td class="row3 over" align="center" valign="middle">
                         <div class="avatarfrm">
                         <!-- BEGIN avatar -->
                           {catrow.forumrow.avatar.LAST_POST_AVATAR}
                      <!-- END avatar -->
                         </div>
                       </td>
               <td class="row3" align="center" valign="middle">
                      <div class="derniermess">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets<br />
                        {catrow.forumrow.LAST_POST}
                      </div>
               </td>
       </tr>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
     </tr>
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
      </table></div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Puis on enregistre et on valide !

    3. Maintenant, place au CSS ! On va faire Affichage > Couleurs > Feuille de style CSS et on ajoute le code qui suit et on valide notre CSS.

    Code:
    /*Catégories par Cheshire Cat*/
    .modifcat{
      margin-top:10px;
      background-color:#f4f0e5;
    }
    .forumline{
      width:800px;
      margin:auto;
    }
    .cattitre{
      width:746px;
      text-align:center;
      margin-top:20px;
      margin-bottom:10px;
      margin-left:25px;
      margin-right:25px;
      padding-top:5px;
      font-size:35px;
      min-height:50px;
      color:#ffffff !important;
      background-color:#d9b698;
      font-family: 'Handlee', cursive;
    }
    .forumlink{
      letter-spacing:7px;
      font-size:20px;
      text-decoration:none;
      text-align:center;
      color:#c36e6e !important;
      font-family: 'Voltaire', sans-serif;
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
    }
    .forumlink:hover{
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
      text-decoration:none !important;
      color:#3D2617 !important;
    }
    .imgmess{
      position:relative;
      width:57px;
      height:100px !important;
      background-color:#d9b698;
      margin-right:10px;
      margin-bottom:15px;
      margin-left:25px;
      padding:5px;
    }
    .imgmess img{
      height:100px;
    }
    .liensfrm{
      overflow:auto;
      font-size:0px;
      width:130px;
      height:110px;
      background-color:#d9b698;
      bottom:-50px;
      margin-right:5px;
      margin-bottom:15px;
    }
    .liensfrm a{
      letter-spacing:2px;
      font-family: 'Voltaire', sans-serif;
      display:block;
      font-size:13px;
      max-width:130px;
      color:#c36e6e;
      background-color:#ffffff;
      border-bottom:3px solid #794a2f;
      text-align:center;
      text-decoration:none;
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
    }
    .liensfrm a:hover{
      color:#ffffff !important;
      background-color:#c36e6e;
      text-decoration:none !important;
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
    }
    .descfrm{
      position:absolute;
      margin:auto;
      width:310px;
      height:90px;
      font-size:11px;
      background-color:#d9b698;
      overflow:auto;
      margin-bottom:15px;
      margin-left:2px;
      text-align:justify;
      padding:10px;
      color:#000000;
      font-family: 'Open Sans', sans-serif;
    }
    .avatarfrm{
      overflow:hidden;
      width:57px;
      height:100px;
      background-color:#d9b698;
      padding:5px;
      margin-bottom:15px;
    }
    .avatarfrm img{
      height:100px;
    }
    .derniermess{
      position:relative;
      width:96px;
      height:100px;
      font-size:10px;
      background-color:#d9b698;
      margin-left:5px;
      margin-bottom:15px;
      margin-right:25px;
      padding-left:5px;
      padding-right:5px;
      padding-top:10px;
      color:#000000;
      font-family: 'Open Sans', sans-serif;
    }
    .derniermess a{
      color:#c36e6e;
      text-decoration:none;
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
    }
    .derniermess a:hover{
      color:#3D2617;
      transition:all ease 0.7s;
      -webkit-transition:all ease 0.7s;
      text-decoration:none !important;
    }
    /*Fin des catégories*/

    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.


    Dernière édition par Cheshire Cat le Mar 12 Sep 2017 - 20:40, édité 1 fois
    AlexTasie
    AlexTasie
    MasculinAge : 27Messages : 34

    Lun 21 Mar 2016 - 23:52

    C'est juste parfait ! Merci d'avoir partagé :p
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 32Messages : 64

    Mar 22 Mar 2016 - 14:06

    sublime Very Happy




    Catégories en tableaux couleur pêche - Page 2 478753Chantal
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Mar 22 Mar 2016 - 14:38

    merci beaucoup j'ai bien il est claire ^^
    luna-chan86
    luna-chan86
    FémininAge : 35Messages : 201

    Mar 22 Mar 2016 - 16:06

    Merci :)



    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Mar 22 Mar 2016 - 17:38

    Coucou ! 
    Petite précision pour ceux qui rencontreraient des problèmes.
    Je me suis trompée, la template n'est pas index_box mais index_body.
    Si un admin passe par-là j'aimerais bien que ce soit modifié ♥

    Bonne journée ! Wink
    KTMiz
    KTMiz
    MasculinAge : 25Messages : 47

    Mar 22 Mar 2016 - 18:36

    Salut, merci



    Catégories en tableaux couleur pêche - Page 2 Kjod95_sick_religion
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Mar 22 Mar 2016 - 19:00

    Merci c'est super beau!
    Carasama
    Carasama
    FémininAge : 29Messages : 98

    Mar 22 Mar 2016 - 19:34

    sweet *-*
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 56Messages : 167

    Mar 22 Mar 2016 - 20:13

    Merci!
    KinThoa
    KinThoa
    FémininAge : 29Messages : 29

    Jeu 24 Mar 2016 - 17:37

    C'est super, c'est du bon boulot (y)
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Jeu 24 Mar 2016 - 19:32

    C'est tout mignon ça! merci
    M.T
    M.T
    FémininAge : 35Messages : 53

    Ven 25 Mar 2016 - 12:57

    Merci du partage <3
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Dim 3 Avr 2016 - 15:59

    Merci !
    Toby P. Nolan
    Toby P. Nolan
    FémininAge : 25Messages : 38

    Dim 3 Avr 2016 - 23:31

    merciiiiii
    Thalysa
    Thalysa
    FémininAge : 73Messages : 31

    Lun 4 Avr 2016 - 21:13

    Merci du partage !
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Mar 5 Avr 2016 - 1:25

    Jolie, merci
    Viou
    Viou
    FémininAge : 35Messages : 181

    Mar 5 Avr 2016 - 14:38

    Merci du partage Very Happy
    Ambrie
    Ambrie
    FémininAge : 23Messages : 15

    Mar 5 Avr 2016 - 14:57

    Merci :3
    Hancok
    Hancok
    FémininAge : 40Messages : 1497

    Sam 9 Avr 2016 - 15:00

    Hello, merci pour cette sympathique catégorie.




    Catégories en tableaux couleur pêche - Page 2 A67g
    Teddyy
    Teddyy
    FémininAge : 29Messages : 7

    Sam 9 Avr 2016 - 15:03

    Merci pour ce travail ^^
    zbou
    zbou
    FémininAge : 30Messages : 83

    Jeu 14 Avr 2016 - 20:31

    Merci beaucoup !
    Kaamee
    Kaamee
    FémininAge : 28Messages : 110

    Ven 15 Avr 2016 - 18:53

    Merci ! ♥



    KamiCams
    KamiCams
    FémininAge : 29Messages : 41

    Ven 15 Avr 2016 - 21:08

    Merci beaucoup !
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Ven 15 Avr 2016 - 21:58

    Merci pour le partage Very Happy
    Pucky
    Pucky
    FémininAge : 27Messages : 44

    Mar 19 Avr 2016 - 0:01

    Bonsoir !

    J'adore ce genre d'affichage de catégories. Mais est-ce que c'est possible de le mettre à moins de 800 px ?
    Contenu sponsorisé


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