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.


    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
    Leelo
    Leelo
    FémininAge : 33Messages : 157

    Dim 29 Mai 2016 - 17:28

    merci merci depuis le temps que je la cherchais
    Anya-Gackt
    Anya-Gackt
    FémininAge : 33Messages : 59

    Mar 31 Mai 2016 - 0:55

    Merci beaucoup Very Happy
    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Mar 31 Mai 2016 - 19:26

    Je suis curieuse. Merci pour le tuto.
    Dacina moe
    Dacina moe
    FémininAge : 46Messages : 171

    Mar 31 Mai 2016 - 19:35

    tres jolie merci ^.^
    *-Atlas-*
    *-Atlas-*
    MasculinAge : 35Messages : 138

    Mer 1 Juin 2016 - 3:45

    Merci :)



    Catégories en tableaux couleur pêche - Page 4 539522Atlasnewban
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Ven 3 Juin 2016 - 14:37

    C'est magnifique, merci :)
    Suisen
    Suisen
    FémininAge : 30Messages : 52

    Ven 3 Juin 2016 - 15:21

    Merci du partage ♥
    Lena'
    Lena'
    FémininAge : 31Messages : 41

    Sam 4 Juin 2016 - 1:49

    merci !



    Catégories en tableaux couleur pêche - Page 4 Sig10
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Mar 14 Juin 2016 - 14:55

    Merci ^^



    .
    Neilia
    Neilia
    FémininAge : 33Messages : 101

    Mar 14 Juin 2016 - 15:43

    Merci du partage ♥
    cali60
    cali60
    FémininAge : 39Messages : 58

    Mer 15 Juin 2016 - 20:46

    :) :)
    Ronron
    Ronron
    FémininAge : 24Messages : 70

    Jeu 16 Juin 2016 - 16:42

    Merci !
    Mandinoux
    Mandinoux
    FémininAge : 35Messages : 38

    Lun 20 Juin 2016 - 19:55

    Très joli. Merci.
    Dark Fairy
    Dark Fairy
    FémininAge : 27Messages : 244

    Ven 24 Juin 2016 - 17:03

    Merci!
    Hécate Ravenshield
    Hécate Ravenshield
    FémininAge : 31Messages : 22

    Sam 25 Juin 2016 - 21:22

    merci, je vais essayer ça tout de suite ^^
    Jadesse
    Jadesse
    FémininAge : 25Messages : 30

    Dim 26 Juin 2016 - 17:23

    Merci :heart:
    Miyuna Kazaki
    Miyuna Kazaki
    MasculinAge : 27Messages : 5

    Dim 26 Juin 2016 - 18:10

    sublime, merci :)
    Hypnose
    Hypnose
    FémininAge : 31Messages : 2

    Mar 28 Juin 2016 - 17:02

    Merci du partage :love:
    Rynkka
    Rynkka
    FémininAge : 25Messages : 120

    Jeu 30 Juin 2016 - 17:25

    Merci



    Catégories en tableaux couleur pêche - Page 4 48861711
    Wanted
    Wanted
    FémininAge : 29Messages : 113

    Ven 1 Juil 2016 - 7:21

    Merci beaucoup pour le partage. :face:
    Vetrox
    Vetrox
    MasculinAge : 24Messages : 37

    Ven 1 Juil 2016 - 8:38

    merci
    Ari
    Ari
    FémininAge : 23Messages : 109

    Ven 1 Juil 2016 - 8:47

    Merci beaucoup !
    Sheewps
    Sheewps
    MasculinAge : 24Messages : 23

    Sam 2 Juil 2016 - 13:15

    Merci, c'est magnifique
    avatar
    Anthony Bayens
    MasculinAge : 32Messages : 19

    Sam 2 Juil 2016 - 13:22

    Merci
    Kaleessi
    Kaleessi
    FémininAge : 32Messages : 78

    Dim 3 Juil 2016 - 17:46

    Merci du partage, j'aime beaucoup!! :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:25