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 avec forums type bandeau

    Partagez
    avatar
    Sauney
    FémininAge : 23Messages : 428

    le Lun 14 Juil 2014 - 16:50



    Voici un aperçu !
    Spoiler:

    Voilà le HTML, il suffit de remplacer votre template index_box par le code ci-dessous :
    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 --><div class="cadre_categorie">
    <div class="categorie_titre_bloc"><span class="categorie_titre">{catrow.tablehead.L_FORUM}</span></div>
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
    <div class="forum"><div class="titre_forum" colspan="{catrow.forumrow.INC_SPAN}">
             <h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
                              <span id="stats_forum" class="gensmall">{catrow.forumrow.TOPICS} S | {catrow.forumrow.POSTS} M</span>
             </h{catrow.forumrow.LEVEL}>
              </div>
    <div class="description_forum"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
             <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
             </span>
          </div>
      <div class="icones_messages">
       <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>
      <div class="dernier_message"><br /><br /><span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </div>
    <div class="sous_forums">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </div></div>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    <center><a class="credits" href="http://www.never-utopia.com/">Sauney de Never Utopia</a></center></div><!-- END tablefoot --><!-- END catrow -->

    Voici pour le CSS à placer dans la feuille de style, le CSS n'est pas commenté mais je pense qu'il parle de lui-même :
    Code:
    /* DEBUT DES CATEGORIES */
    .cadre_categorie{
    margin: 10px auto 10px auto;
    width: 90%;
    border-radius: 20px;
    border: 1px solid #000;
    box-shadow: 0px 0px 2px grey;
    }
    .categorie_titre_bloc{
    width: 100%;
    height: 40px;
    border-bottom: 5px dotted #000; 
    }
    .categorie_titre, .categorie_titre h2{
    text-align: center;
    font-family: 'Georgia';
    font-size: 40px;
    color: #000;
    }
    .forum{
    width: 100%;
    margin: auto;
    }
    .titre_forum{
    background-color: #000;
    width: 99%;
    height: 30px;
    padding: 5px;
    }
    .forumlink, a.forumlink, a.forumlink:visited, a.forumlink:active{
    display: inline-block;
    text-align: left;
    font-weight: bold;
    font-size: 25px;
    font-family: 'Georgia';
    color : #05a191;
    text-shadow: 1px 1px 1px #047064;
    }
    a.forumlink:hover{
    text-decoration: none;
    text-transform: uppercase;
    color : #07d3bd;
    margin-left: 300px;
    transition: 500ms linear 1ms;
    }
    #stats_forum{
    float: right;
    display: inline-block;
    padding-top: 10px;
    text-align: right;
    font-size: 10px;
    font-family: 'Georgia';
    color : #05a191;
    }
    .description_forum{
    position: relative;
    float: left;
    margin: 5px 10px 5px 10px;
    width: 65%;
    height: 80px;
    border: 1px solid #000;
    padding: 10px;
    }
    .icones_messages{
    position: relative;
    float: left;
    display: inline-block;
    margin: 5px 10px -110px 0px;
    width: 10%;
    height: 100px;
    }
    .dernier_message{
    position: relative;
    float: right;
    display: inline-block;
    margin: 5px 10px 5px 0px;
    width: 17%;
    height: 100px;
    border: 1px solid #000;
    text-align: center;
    font-size: 12px;
    }
    .dernier_message span{
    font-size: 12px;
    }
    .sous_forums{
    background-color: #000;
    width: 99%;
    height: 20px;
    overflow-y: auto; 
    padding: 5px;
    margin-bottom: 10px;
    }
    .credits, a.credits, a.credits:visited, a.credits:active{
    display: inline-block;
    margin: auto;
    text-align: center;
    font-size: 8px;
    font-family: 'Georgia';
    color : #05a191;
    text-shadow: 1px 1px 1px #047064;
    }
    a.credits:hover{
    text-decoration: none;
    text-transform: uppercase;
    color : #07d3bd;
    }
    /* PARTIE QUI VA DANS LA DESCRIPTION D'UN FORUM */
    .texte_description{
    position: relative;
    float: left;
    width: 440px;
    height: 80px;
    overflow-y: auto;
    -webkit-hyphens: auto;
    o-hyphens: auto;
    hyphens: auto;
    color: #05a191;
    }
    .img_description{
    position: relative;
    float: right;
    width: 70px;
    height: 80px;
    }

    Et voici le code que vous devez mettre dans la description de vos forums(PA -> Général -> Catégories et forums) :
    Code:
    <span class="texte_description">Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset. </span> <img class="img_description" src="http://img11.hostingpics.net/pics/64174470x80.png" />

    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.
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Mar 22 Juil 2014 - 18:24

    Super, merci Sauney =)




    < / Libre service codage >
    avatar
    Venise
    FémininAge : 35Messages : 270

    le Mer 23 Juil 2014 - 12:58

    merci
    avatar
    John Parker
    MasculinAge : 36Messages : 57

    le Mar 29 Juil 2014 - 17:14

    Merci pour le tutoriel ^^



    avatar
    Layla4
    FémininAge : 19Messages : 149

    le Mar 12 Aoû 2014 - 15:04

    Merci !
    avatar
    Lutine
    FémininAge : 31Messages : 102

    le Mar 12 Aoû 2014 - 20:11

    merci!
    avatar
    Zappy
    FémininAge : 19Messages : 55

    le Mar 19 Aoû 2014 - 15:53

    Merci
    avatar
    Faucon
    FémininAge : 18Messages : 64

    le Sam 30 Aoû 2014 - 18:32

    Super belle cette catégorie, merci ♥
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Sam 30 Aoû 2014 - 20:10

    C'est super cool, merci du partage (:
    avatar
    Tatia38
    FémininAge : 29Messages : 308

    le Sam 30 Aoû 2014 - 22:29

    Merci !
    avatar
    SEVAN
    FémininAge : 26Messages : 46

    le Dim 31 Aoû 2014 - 16:39

    merci !
    avatar
    Allison01
    FémininAge : 34Messages : 200

    le Mar 2 Sep 2014 - 17:38

    Très jolie merci
    avatar
    Bzzzz
    FémininAge : 34Messages : 86

    le Ven 12 Sep 2014 - 19:07

    Merci
    Miyoshi
    FémininAge : 24Messages : 54

    le Dim 14 Sep 2014 - 21:21

    Merci pour le partage. :3
    avatar
    Sentenza
    MasculinAge : 34Messages : 95

    le Mer 17 Sep 2014 - 15:08

    merci!
    avatar
    Reira-Sama
    FémininAge : 25Messages : 190

    le Mer 17 Sep 2014 - 15:28

    merci
    avatar
    Riruka Nocturne
    FémininAge : 26Messages : 27

    le Ven 19 Sep 2014 - 13:20

    Merci
    avatar
    Argy
    FémininAge : 20Messages : 98

    le Mar 23 Sep 2014 - 18:55

    Merciiii ! C'est classe ! 8D
    avatar
    Mayiie
    FémininAge : 28Messages : 39

    le Lun 6 Oct 2014 - 18:55

    Merci beaucoup ! Very Happy
    avatar
    sandy13
    FémininAge : 29Messages : 15

    le Lun 6 Oct 2014 - 20:57

    cool merci
    avatar
    Kahlan
    FémininAge : 32Messages : 371

    le Lun 6 Oct 2014 - 21:04

    Merci beaucoup pour ce partage !
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Mer 15 Oct 2014 - 13:53

    merci beaucoup



    Patricia :)
    avatar
    Angie H.-Carter
    FémininAge : 35Messages : 717

    le Jeu 16 Oct 2014 - 14:07

    merci j'aime bien ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    picka234
    Age : 53Messages : 440

    le Jeu 16 Oct 2014 - 15:06

    merci!!!



    avatar
    .SaKou.
    FémininAge : 22Messages : 57

    le Sam 18 Oct 2014 - 23:06

    merci



    Contenu sponsorisé


      La date/heure actuelle est Mer 12 Déc 2018 - 12:30