AccueilFAQRechercherMembresGroupesS'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

    Partagez
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 879

    le 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*/

    Vous n'êtes pas obligés de répondre à ce sujet pour voir les codes, mais un petit "Merci" fait toujours plaisir ! N'oubliez pas non plus de mettre un petit lien vers Never Utopia pour les crédits 


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



    avatar
    witm
    FémininAge : 24Messages : 51

    le Mar 19 Avr 2016 - 13:40

    merci du partage **
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 879

    le Mar 19 Avr 2016 - 19:26

    Oui c'est possible @Pucky, il faut juste réduire la largeur des descriptions et celle du fond des catégories :)



    avatar
    Pucky
    FémininAge : 21Messages : 44

    le Mer 20 Avr 2016 - 0:53

    Merci beaucoup !
    avatar
    T_Time
    FémininAge : 20Messages : 104

    le Mer 20 Avr 2016 - 15:00

    J'adore cette simplicité !
    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Jeu 21 Avr 2016 - 4:00

    merci pour le partage
    avatar
    Tahp
    MasculinAge : 22Messages : 19

    le Sam 23 Avr 2016 - 15:11

    Merci pour le partage et félicitation pour le rendu final qui est vraiment sympathique :)
    avatar
    ceschosesetranges
    MasculinAge : 24Messages : 13

    le Sam 23 Avr 2016 - 17:49

    C'est superbe :aww:
    Merci !
    Irisia Anderson
    FémininAge : 23Messages : 28

    le Mar 26 Avr 2016 - 22:13

    Merci du partage !
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Jeu 28 Avr 2016 - 15:47

    Merci pour ce partage ^^
    avatar
    BesidetheCrocodile
    FémininAge : 22Messages : 38

    le Jeu 28 Avr 2016 - 15:49

    Le simple a parfois beaucoup de bon ! Merci en tous les cas, c'est très joli !
    avatar
    Manwin
    MasculinAge : 20Messages : 25

    le Jeu 28 Avr 2016 - 18:15

    J'adore merci Wink
    avatar
    Zachary Wolf
    FémininAge : 25Messages : 57

    le Ven 29 Avr 2016 - 16:21

    J'adore
    avatar
    miekid
    FémininAge : 27Messages : 32

    le Dim 1 Mai 2016 - 18:53

    merci beaucoupp ♥♥
    avatar
    Vani
    FémininAge : 34Messages : 154

    le Dim 1 Mai 2016 - 20:37

    Oooh c'est sympa comme tout ça *-*
    avatar
    EAVENN
    FémininAge : 22Messages : 162

    le Jeu 5 Mai 2016 - 1:08

    magnifique merci !
    avatar
    ColorTime'Less
    FémininAge : 21Messages : 100

    le Jeu 5 Mai 2016 - 19:45

    J'adore::
    avatar
    Heartfilia
    FémininAge : 18Messages : 98

    le Jeu 5 Mai 2016 - 21:48

    Merci!



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    Litonya
    FémininAge : 16Messages : 149

    le Ven 13 Mai 2016 - 14:08

    merci
    avatar
    Orochimaru
    FémininAge : 27Messages : 205

    le Ven 13 Mai 2016 - 17:40

    Beau travail Very Happy Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    SugarBuse
    FémininAge : 20Messages : 43

    le Sam 14 Mai 2016 - 17:05

    Merci ^^
    avatar
    Colombe
    FémininAge : 17Messages : 28

    le Sam 14 Mai 2016 - 18:07

    Merci c:
    avatar
    Zappy
    FémininAge : 18Messages : 55

    le Sam 14 Mai 2016 - 18:48

    Mercii
    avatar
    Heine06
    FémininAge : 38Messages : 56

    le Sam 14 Mai 2016 - 19:37

    Très joli ! Merci du partage :heart:
    avatar
    Raween
    FémininAge : 26Messages : 110

    le Lun 16 Mai 2016 - 14:53

    C'est magnifique merci beaucoup :love:
    avatar
    Equestria
    FémininAge : 20Messages : 118

    le Dim 29 Mai 2016 - 4:51

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 16:00