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
    Neyokan
    Neyokan
    FémininAge : 27Messages : 43

    Mar 11 Avr 2017 - 14:11

    merci!
    Biket
    Biket
    FémininAge : 23Messages : 2

    Jeu 13 Avr 2017 - 9:39

    Merci !
    Aaw.
    Aaw.
    FémininAge : 27Messages : 29

    Jeu 13 Avr 2017 - 15:00

    Exactement ce que je cherchais ! Merci beaucoup !
    picka234
    picka234
    FémininAge : 59Messages : 636

    Ven 14 Avr 2017 - 19:04

    merci beaucoup cheers
    Anonymous
    Invité

    Mar 25 Avr 2017 - 16:12

    Merci! :)
    Grande
    Grande
    FémininAge : 36Messages : 207

    Mer 26 Avr 2017 - 0:01

    Merci



    Catégories en tableaux couleur pêche - Page 9 171074gwenj10
    Lilice
    Lilice
    FémininAge : 32Messages : 115

    Jeu 27 Avr 2017 - 11:09

    Merci ♥
    Ornicar
    Ornicar
    MasculinAge : 28Messages : 37

    Lun 8 Mai 2017 - 13:04

    Merci !
    Fleuve Éternel
    Fleuve Éternel
    FémininAge : 22Messages : 13

    Sam 13 Mai 2017 - 23:58

    Merci ! Je trouve que vous faites de ces codages ! Tellement wow !
    IdefixB
    IdefixB
    FémininAge : 35Messages : 10

    Dim 14 Mai 2017 - 0:10

    MERCI
    chelsey
    chelsey
    FémininAge : 29Messages : 17

    Dim 14 Mai 2017 - 12:41

    Merci, je te l’emprunte ♥
    Alegria
    Alegria
    FémininAge : 29Messages : 12

    Mar 16 Mai 2017 - 3:33

    Très joli, merci !
    Lunatic Café
    Lunatic Café
    FémininAge : 33Messages : 27

    Jeu 18 Mai 2017 - 12:34

    Merci beaucoup pour le partage. C'est super. :hug2:
    Maitre_Soda
    Maitre_Soda
    MasculinAge : 47Messages : 33

    Sam 20 Mai 2017 - 19:43

    merci
    Baby Pikachu
    Baby Pikachu
    FémininAge : 28Messages : 72

    Dim 21 Mai 2017 - 11:46

    Merci beaucoup du partage !
    Hakuna Patata
    Hakuna Patata
    FémininAge : 32Messages : 73

    Mar 23 Mai 2017 - 15:10

    C'est très beau ! :)
    Anide Vintage
    Anide Vintage
    FémininAge : 31Messages : 6

    Jeu 25 Mai 2017 - 16:48

    thank you!
    Raynold
    Raynold
    MasculinAge : 25Messages : 39

    Lun 29 Mai 2017 - 20:13

    THANKS
    effyi
    effyi
    FémininAge : 29Messages : 41

    Sam 3 Juin 2017 - 19:55

    merci !
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Mer 7 Juin 2017 - 0:22

    Merci =)



    Catégories en tableaux couleur pêche - Page 9 707828SignArthur2
    Laurolay
    Laurolay
    FémininAge : 20Messages : 109

    Jeu 8 Juin 2017 - 9:57

    merci !
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 30Messages : 46

    Jeu 8 Juin 2017 - 13:26

    C'est trop beau ♥ Merci beaucoup !!



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    Shaolan
    Shaolan
    MasculinAge : 33Messages : 121

    Sam 17 Juin 2017 - 7:56

    Merci beaucoup
    Nihal
    Nihal
    FémininAge : 20Messages : 23

    Jeu 22 Juin 2017 - 2:43

    Merci!
    ♣ Croco.
    ♣ Croco.
    FémininAge : 27Messages : 6

    Sam 24 Juin 2017 - 20:18

    Merci beaucoup pour le code :coeur:
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 16:32