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 :
Code promo Nike : -25% dès 50€ ...
Voir le deal

    The Lord of the Rings

    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Lun 16 Fév 2015 - 18:39



    Catégories The Lord of the Rings


    Version PHPBB2 - Aperçu - Police: Bilbo Swash caps clic pour l'installer - images de P@lcopie et Ivy Tyler



    HTML


    Rendez-vous dans votre template index_box (affichage>template>général>index_box) et remplacez-le entièrement par celui-ci:
    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="titrecategorie" width="100%">{catrow.tablehead.L_FORUM}</div>

      <table class="forumline categorie" width="100%" border="0" cellspacing="0" cellpadding="0">
       <!-- END tablehead -->
       <!-- BEGIN cathead -->
       <tr>
          <td 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}>
          </td>
       </tr>
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
       <tr>
              <td class="forumgauche">
                <h{catrow.forumrow.LEVEL} class="hierarchy">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br /></span>
                </h{catrow.forumrow.LEVEL}>
                <span class="gensmall">Sujets: {catrow.forumrow.TOPICS} </span>
                <span class="gensmall">Messages: {catrow.forumrow.POSTS}</span>
              </td>
             
              <td class="forumcentre" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                <div class="sousforum">
                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </div>
              </td>
             
              <td class=" forumdroite" align="center" valign="middle">
                <img class="boutonnouveau" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                <div class="dernierpost">
                <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                <!-- END avatar -->
                <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                </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 class="bascategorie">
      <img src="http://image.noelshack.com/fichiers/2015/07/1423492133-f-coingauche.png" class="coingauche" />
      <img src="http://image.noelshack.com/fichiers/2015/07/1423492133-f-coindroite.png" class="coindroite" />
    </div>
    <!-- END tablefoot --><!-- END catrow -->
    Enregistrez puis publiez votre template, sinon ça marchera pas x)


    CSS


    Ensuite direction le CSS (affichage>couleurs>feuille de style CSS)
    Ajoutez ceci:
    Code:
    /*catégories seigneur des anneaux par Alu pour Never Utopia****************************************/
    .forumgauche, .forumcentre, .forumdroite{
      box-sizing:border-box;
      display:inline-block;
      padding:10px;
      color:white;
      margin-bottom:25px;
      height:150px;
      z-index:1;
    }
    .forumgauche{
      width: 25%;
      background-color: #000000;
      background-image: url(http://image.noelshack.com/fichiers/2015/07/1423490967-f-background.png);
      background-position:bottom;
      background-size:contain;
      background-repeat:no-repeat;
      position:relative;
      border-top-left-radius: 35% 15%;
      border-bottom-left-radius: 35% 15%;
    }

    .forumcentre{
      background:#191919;
      width:50%;
      position:relative;
    }
    .forumdroite{
      background-image:url(http://image.noelshack.com/fichiers/2014/52/1419283627-anneau.jpg);
      background-size: contain;
      background-color: #000000;
      background-repeat: no-repeat;
      background-position:center;
      width:25%;
      position:relative;
      border-top-right-radius: 35% 15%;
      border-bottom-right-radius: 35% 15%;
    }

    .dernierpost{
      position:relative;
      top:30px;
      margin-left:auto;
      margin-right:auto;
      width:100px;
      height:50px;
      z-index:1;
    }

    .dernierpost .gensmall span{
      font:9px;
    }
    .dernierpost a{
      font:15px;
      color:grey;
    }

    .boutonnouveau{
      left: 23%;
      position: absolute;
      top: 0px;
      z-index: 2;
      margin: 25px auto;
      display: block;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      transition:all 1s;
    }

    .forumdroite:hover > .boutonnouveau{
      left:75%;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      transition:all 1s;
    }

    .sousforum{
      box-sizing:border-box;
      position:absolute;
      bottom:0px;
      left:0px;
      background:#000000;
      text-align:center;
      width:100%;
      padding:7px;
      height:40px;
      overflow:auto;
    }
    .sousforum a{
      font: 19px Bilbo Swash Caps;
      color:white !important;
    }

    .forumlink a{
      font:30px Bilbo swash caps;
      color:white !important;
    }

    .titrecategorie{
      box-sizing:border-box;
      padding: 30px 30px 0 30px;
      height:100px;
      margin-top:50px;
      background-image:url(http://image.noelshack.com/fichiers/2015/07/1423490971-f-titregauche.png),
        url(http://image.noelshack.com/fichiers/2015/07/1423490970-f-titredroite.png);
      background-position: 6% 100%, 94% 100%;
      background-repeat:no-repeat, no-repeat;
      background-size:auto 70px, auto 70px;
    }
    .titrecategorie h2{
      text-align:center;
      color:white;
      font-family:Bilbo swash caps;
      font-size:50px;
      margin:0;
      font-weight:normal;
    }
    .bascategorie{
      height:50px;
      margin-bottom:50px;
      position:relative;
    }
    .categorie{
      padding:10px 40px;
    }

    .coingauche{
      display:block;
      position:absolute;
      width:40%;
      bottom:20px;
      left:-20px;
      z-index:0;
    }
    .coindroite{
      display:block;
      position:absolute;
      width:40%;
      bottom:20px;
      right:-20px;
      z-index:0;
    }

    Merci de poster un crédit pour N-U sur votre forum, ça ne coûte pas grand-chose ! ^^

    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Alumine le Lun 16 Fév 2015 - 20:01, édité 1 fois



    Alumine
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Lun 16 Fév 2015 - 18:43

    Un très grand merci !! Very Happy
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 18 Mar 2015 - 21:26

    Plop !
    Fais attention Alu' ! Quand tu mets des commentaires, il faut vraiment que tu t'abstiennes de mettre des apostrophes ! Ça ne passe pas dans le CSS x) J'ai corrigé mais fais attention la prochaine fois Razz
    Bref je déplace (: (Soit dit en passant, ça fait très Dame Nature, et j'aime *-*)

    Allison01
    Allison01
    FémininAge : 40Messages : 225

    Jeu 19 Mar 2015 - 18:08

    merci ^^
    Alumine
    Alumine
    FémininAge : 27Messages : 487

    Jeu 19 Mar 2015 - 22:02

    Okay merci ! Je me demandais effectivement, mais comme ça n'avait pas l'air de poser problème sur mon forum test je les ai laissées... Je prends note (=



    Alumine
    Féhéla
    Féhéla
    FémininAge : 51Messages : 238

    Ven 20 Mar 2015 - 3:55

    wow merci !!!
    Kamesora
    Kamesora
    FémininAge : 32Messages : 93

    Ven 20 Mar 2015 - 11:22

    Merci beaucoup
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Ven 27 Mar 2015 - 14:47

    Merci o/



    The Lord of the Rings Ye49
    Venise
    Venise
    FémininAge : 41Messages : 270

    Ven 27 Mar 2015 - 15:24

    merci
    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Sam 28 Mar 2015 - 17:42

    thank you ^^



    The Lord of the Rings 30xivrd
    Pikabouh
    Pikabouh
    FémininAge : 23Messages : 123

    Dim 29 Mar 2015 - 19:42

    Merci beaucoup, le code est sublime ♥
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Jeu 2 Avr 2015 - 17:47

    Merci pour le partage c'est sublime
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Mer 15 Avr 2015 - 13:06

    Magnifique ! Merci beaucoup !
    Ryoma
    Ryoma
    MasculinAge : 37Messages : 420

    Sam 25 Avr 2015 - 10:56

    Merci beaucoup.
    shala
    shala
    FémininAge : 32Messages : 213

    Dim 3 Mai 2015 - 23:50

    merci



    Mordiern
    Mordiern
    FémininAge : 47Messages : 285

    Lun 4 Mai 2015 - 18:02

    Merci du partage !

    C'est juste superbe !
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mar 5 Mai 2015 - 23:30

    Merci ^^



    :heart: :heart:
    pixelman
    pixelman
    FémininAge : 44Messages : 241

    Mer 6 Mai 2015 - 9:21

    Superbe graph' j'aime beaucoup. Merci pour le partage !




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    avatar
    Lupa
    FémininAge : 28Messages : 183

    Jeu 7 Mai 2015 - 0:52

    Merci, ça me semble magnifique !



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    avatar
    Angel Tiger
    MasculinAge : 24Messages : 76

    Ven 8 Mai 2015 - 13:23

    Merci pour le partage !
    Wanda Maximoff
    Wanda Maximoff
    FémininAge : 30Messages : 80

    Dim 10 Mai 2015 - 2:17

    J'adore ! ** Merci ! ♥
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Mer 13 Mai 2015 - 22:19

    merci beaucoup pour le partage
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 153

    Sam 16 Mai 2015 - 22:08

    merci !



    catkiller
    catkiller
    FémininAge : 29Messages : 70

    Mar 19 Mai 2015 - 12:17

    Alors vraiment, je suis sous le charme ! C'est superbe!
    AwenWolf
    AwenWolf
    FémininAge : 36Messages : 76

    Mar 19 Mai 2015 - 13:53

    Merci *_*
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 3:41