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 :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

    Catégories en tableaux couleur pêche

    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 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
    HazelW
    HazelW
    FémininAge : 30Messages : 51

    Jeu 8 Sep 2016 - 14:55

    Trop joli !



    Catégories en tableaux couleur pêche - Page 6 Wsld90Catégories en tableaux couleur pêche - Page 6 GryffindorBaseCatégories en tableaux couleur pêche - Page 6 Gryffindor-gryffindor-21480238-100-100
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Ven 9 Sep 2016 - 0:40

    Merci :)



    Catégories en tableaux couleur pêche - Page 6 Edkidd11
    Inamio
    Inamio
    FémininAge : 31Messages : 252

    Dim 11 Sep 2016 - 13:32

    Merci de ton super travail



    Catégories en tableaux couleur pêche - Page 6 2014_p10
    Maiie
    Maiie
    FémininAge : 33Messages : 55

    Lun 12 Sep 2016 - 0:42

    Merci :love:
    Midori-chan
    Midori-chan
    FémininAge : 39Messages : 33

    Mar 13 Sep 2016 - 15:53

    Très joli travail



    Le présent est un cadeau.
    Kamesora
    Kamesora
    FémininAge : 31Messages : 93

    Mer 14 Sep 2016 - 19:13

    merci
    Sapphire
    Sapphire
    FémininAge : 27Messages : 48

    Mer 14 Sep 2016 - 22:45

    Merci bien ! ♥
    whowwillfallfirst
    whowwillfallfirst
    MasculinAge : 25Messages : 54

    Ven 16 Sep 2016 - 19:38

    Merci. ♥
    warning.sign
    warning.sign
    FémininAge : 33Messages : 58

    Mar 20 Sep 2016 - 14:20

    merci beaucoup !
    LegendsOfToday
    LegendsOfToday
    FémininAge : 28Messages : 78

    Mar 4 Oct 2016 - 20:26

    Merci !
    Lyber
    Lyber
    MasculinAge : 31Messages : 14

    Mer 5 Oct 2016 - 15:06

    Merci pour le partage ♥
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Sam 8 Oct 2016 - 16:31

    Merci beaucoup :)



    ....
    Maevis
    Maevis
    FémininAge : 23Messages : 27

    Sam 22 Oct 2016 - 22:34

    Merci beaucoup, c'est magnifique =)
    Donquichotte
    Donquichotte
    MasculinAge : 28Messages : 48

    Ven 4 Nov 2016 - 1:01

    merci
    Wilh
    Wilh
    FémininAge : 30Messages : 51

    Ven 4 Nov 2016 - 12:55

    Ça l'air sympa, merci !
    wandererinfreedom
    wandererinfreedom
    FémininAge : 24Messages : 9

    Lun 14 Nov 2016 - 13:36

    merci, c'est super joli
    Lulus
    Lulus
    FémininAge : 33Messages : 143

    Jeu 17 Nov 2016 - 18:23

    Merci :)
    Alearyon
    Alearyon
    FémininAge : 26Messages : 36

    Mer 23 Nov 2016 - 14:44

    Très joli, merci beaucoup !
    Anonymous
    Invité

    Dim 27 Nov 2016 - 17:32

    Merci beaucoup pour le partage <3
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Dim 27 Nov 2016 - 19:01

    merci
    Waphy's
    Waphy's
    FémininAge : 24Messages : 59

    Lun 28 Nov 2016 - 10:06

    merci !
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Jeu 1 Déc 2016 - 16:22

    Merci pour ton partage j'adore!
    Océ
    Océ
    FémininAge : 49Messages : 363

    Sam 10 Déc 2016 - 11:18

    Merci beaucoup

    Nyotengu
    Nyotengu
    FémininAge : 29Messages : 85

    Sam 10 Déc 2016 - 18:38

    merci
    Talesof91
    Talesof91
    FémininAge : 33Messages : 91

    Mar 13 Déc 2016 - 19:08

    J'adore, c'est très beau ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 17:09