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 :
Coffret Pokémon Bundle 6 Boosters EV05 Forces ...
Voir le deal

    Forum en trois parties

    HeleneM
    HeleneM
    FémininAge : 30Messages : 195

    Mer 22 Jan 2014 - 21:52



    Bonjour,
    je vous propose ce libre service d'après une demande de Euterpe, voici un aperçu du rendu :
    Aperçu:

    N'oubliez pas de créditer :
    Code:
    Par HeleneM sur Never Utopia.

    Ce code nécessite d'avoir accès aux templates.


    Ce codage a été conçu sur Forum en trois parties Petit-10, avec un niveau de hiérarchie : "Séparer les catégories sur l'index" - "moyen".
    L'image de nouveau message est prévue pour une taille de 140*144.

    Template index_box
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <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>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><center><div class="forumline categorie1">
     <div class="secondarytitle titre_cat"> {catrow.tablehead.L_FORUM} </div>
     <!-- END tablehead -->
     <!-- BEGIN cathead -->
     <!-- BEGIN inc -->
     <div class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></div>
     <!-- END inc -->
     <div class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
     <h{catrow.cathead.LEVEL} class="hierarchy">
     <span class="cattitle">
     <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
     </span>
     </h{catrow.cathead.LEVEL}>
     </div>
     <div class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</div>
     <!-- END cathead -->
     <!-- BEGIN forumrow -->
     <!-- BEGIN inc -->
     <div class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></div>
     <!-- END inc -->
    <div class="forum1">
    <div class="forum_cadre1">              
                     <span class="genmed descr_forum">{catrow.forumrow.FORUM_DESC}</span>
     </div>

     <h{catrow.forumrow.LEVEL} class="hierarchy">
     <div class="forumlink forum_cadre2">
     <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                                     <img class="img_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
     </div>
     </h{catrow.forumrow.LEVEL}>
     
    <div class="forum_cadre3">
              <span class="gensmall der_mess">{catrow.forumrow.LAST_POST}</span><br/>
               <span class="gensmall ss_forums">
     <!-- BEGIN switch_moderators_links -->
     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
     <!-- END switch_moderators_links -->
     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
     </span>
     </div>
    </div>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <!-- BEGIN inc -->
     <div class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></div>
     <!-- END inc -->
     <div class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></div>
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    <br clear="both"/>
    </div></center>
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Css correspondant
    Code:
    /*polices*/
    @font-face{
     font-family: Fountain Pen Frenzy;
     src: url('http://www.mediafont.com/storage/contents/5801/font.eot');/* IE */ /*ne fonctionne pas sous IE*/
      src: local('Fountain Pen Frenzy'), url('http://www.mediafont.com/storage/contents/5801/FountainPen.ttf'); /* non-IE */
    }

    @font-face{
     font-family: Charlemagne Bold;
     src: url('http://www.mediafont.com/storage/contents/12039/font.eot'); /* IE */
     src: local('Charlemagne Bold'), url('http://www.mediafont.com/storage/contents/12039/CHARLB.TTF'); /* non-IE */
    }

    /*DEBUT - TEMPLATE INDEX_BOX*/

    /*affichage des catégories*/
    .forumline .categorie1{
      width: 800px !important; /*largeur*/
    }

    /*titre catégories*/
    .secondarytitle h2{
      font-family: Fountain Pen Frenzy, Times New Roman !important; /*type de police*/
      font-size: 40px !important; /*taille de police*/
    }

    /*affichage des forums*/
    .forum1{
      width:800px; /*largeur*/
      clear:both;
    }

    /*cadre de gauche la desciption*/
    .forum_cadre1{
      float:left; /*positionnement*/
      width: 300px; /*largeur*/
      height: 155px; /*hauteur*/
      background: url('http://img4.hostingpics.net/pics/367099Sanstitre3.png'); /*fond*/
      margin-top:30px; /*marge supérieure extérieure*/
    }

    /*description du forum*/
    .descr_forum{
      width: 280px; /*largeur*/
      height: 125px; /*hauteur*/
      display:inline-block;
      margin:15px 10px; /*marges extérieures*/
      overflow:auto; /*barre de défilement si besoin*/
      color: white !important; /*couleur du texte*/
      text-align:left; /*position du texte*/
      font-family: Charlemagne Bold, georgia !important; /*police du texte*/
    }
    /*cadre du milieu avec l'image de nouveau message et le titre de forum*/
    .forum_cadre2{
      float:left; /*positionnement*/
      margin:5px; /*marges extérieurs*/
      width:190px; /*largeur*/
      margin-top:10px !important; /*marge supérieure extérieure*/
    }

    /*titre de forum*/
    .forumlink{
      font-family:Fountain Pen Frenzy, Times New Roman; /*type de police*/
      font-size:30px !important; /*taille de police*/
      color: black !important; /*couleur du texte*/
    }
    /*image new, no new, lock*/
    .img_forum{
      width: 140px; /*largeur*/
      height: 144px; /*hauteur*/
    }

    /*cadre de droite*/
    .forum_cadre3{
      float:left; /*positionnement*/
      width: 300px; /*largeur*/
      height: 155px; /*hauteur*/
      background: url('http://img4.hostingpics.net/pics/367099Sanstitre3.png'); /*fond*/
      overflow:hidden;
      margin-top:30px; /*marge supérieure extérieure*/
    }
    .forum_cadre3 .gensmall{
      color: white !important; /*couleur du texte*/
      font-family: Charlemagne Bold, georgia !important; /*police du texte*/
    }
    /*afficha du dernier message*/
    .der_mess{
      display:inline-block;
      height:50px; /*hauteur*/
      margin-top:10px; /*marge supérieure extérieure*/
    }
    /*affichage des sous forums*/
    .ss_forums{
      display:inline-block;
      margin:10px 10px 5px 10px; /*marges extérieures*/
      height: 80px; /*hauteur*/
      overflow: auto; /*défilement au besion*/
    }
    /*FIN - TEMPLATE INDEX_BOX*/
    La police utilisée pour les titres ne prend pas en compte les accents.


    Les polices utilisées viennent de Media Fonts.

    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.



    "La normalité n'existe pas, la différence est la voie de la raison"
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 23 Jan 2014 - 8:20

    T'as été rapide ! =O
    T'as donné plein d'indication, t'as utilisé les codes que j'ai donné pour la mise en forme, que dire après ça ? XD
    Tu as annoté le code en plus donc les gens sauront où changer quoi, c'est nickel x) Même le titre est parfait *o*

    PS : ton pseudo rendrait bien en vert... :siffle:



    sign
    HeleneM
    HeleneM
    FémininAge : 30Messages : 195

    Jeu 23 Jan 2014 - 11:35

    Merci, je préfère être sûre de pouvoir m'investir avant de postuler ^^



    "La normalité n'existe pas, la différence est la voie de la raison"
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 23 Jan 2014 - 12:03

    Pas de souci ^^



    sign
    Venise
    Venise
    FémininAge : 40Messages : 270

    Lun 3 Fév 2014 - 8:08

    Je suis fan du travail ^^
    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Lun 3 Fév 2014 - 12:03

    Chouette rendu ^^ J'aime beaucoup l'idée.

    (cap'taine, voyons! c'est quoi cette tentative de recrutement? xD ... tu fais ça avec tout le monde ma parole!)




    Louna Trevor
    Louna Trevor
    FémininAge : 24Messages : 11

    Dim 16 Fév 2014 - 17:25

    Joli. :)
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Jeu 20 Fév 2014 - 9:04

    ah j'adore ça. Sérieux, un grand merci!
    Méandre.
    Méandre.
    FémininAge : 26Messages : 95

    Lun 10 Mar 2014 - 20:59

    Merci !
    Noob's
    Noob's
    MasculinAge : 29Messages : 129

    Jeu 13 Mar 2014 - 17:11

    :o magnifique !! J'adore :)
    Milka
    Milka
    FémininAge : 35Messages : 112

    Sam 15 Mar 2014 - 10:02

    C'est sublime *-*
    Nearween
    Nearween
    FémininAge : 25Messages : 213

    Sam 15 Mar 2014 - 17:43

    Merci du partage Very Happy



    Forum en trois parties Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Anonymous
    Invité

    Sam 15 Mar 2014 - 18:11

    Merci du partage, très utile merci !
    arvalis
    arvalis
    FémininAge : 29Messages : 55

    Dim 16 Mar 2014 - 14:48

    merci =)
    Rococo
    Rococo
    MasculinAge : 28Messages : 28

    Dim 16 Mar 2014 - 20:16

    Merci beaucoup.
    Je trouve ça vraiment réussi, j'ai hâte de voir ce que ça va donner sur mon forum.
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Lun 17 Mar 2014 - 16:58

    C'est magnifique !
    Merci beaucoup ~
    Jull421
    Jull421
    FémininAge : 29Messages : 143

    Mar 18 Mar 2014 - 12:44

    Merci



    Forum en trois parties 140228025614860943
    boogylou
    boogylou
    FémininAge : 28Messages : 26

    Mar 18 Mar 2014 - 21:46

    Merci <3
    Kio
    Kio
    FémininAge : 25Messages : 22

    Mer 19 Mar 2014 - 18:03

    Merci! :o
    Linoa
    Linoa
    FémininAge : 34Messages : 42

    Mer 19 Mar 2014 - 22:16

    Merci :)



    Forum en trois parties Pdsm
    ~ If you come here... You'll find me. I promise ~
    shala
    shala
    FémininAge : 32Messages : 213

    Mer 19 Mar 2014 - 22:33

    merci



    Allison01
    Allison01
    FémininAge : 39Messages : 225

    Ven 21 Mar 2014 - 10:23

    whaouu j'adore vraiment superbe grand bravo ^^
    HeleneM
    HeleneM
    FémininAge : 30Messages : 195

    Sam 22 Mar 2014 - 12:57

    Je suis contente que mon travail serve ^^

    Allison01 a écrit:whaouu j'adore vraiment superbe grand bravo ^^
    Merci =)



    "La normalité n'existe pas, la différence est la voie de la raison"
    Vixinte
    Vixinte
    FémininAge : 26Messages : 90

    Sam 22 Mar 2014 - 14:31

      Ça peut être sympa, j'veux bien voir à quoi ça donne !
      Merci beaucoup. :3
    Maiie
    Maiie
    FémininAge : 33Messages : 55

    Dim 23 Mar 2014 - 5:42

    J'aime beaucoup ce code merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 7:31