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.


    The Lord of the Rings

    Partagez
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Lun 16 Fév 2015 - 18:39

    Rappel du premier message :



    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
    avatar
    LightGlace
    FémininAge : 25Messages : 43

    le Mar 22 Nov 2016 - 19:10

    mercii !
    avatar
    Kush-Live
    MasculinAge : 23Messages : 12

    le Mar 20 Déc 2016 - 6:54

    Merci :)
    avatar
    Egyfu
    FémininAge : 24Messages : 46

    le Sam 22 Avr 2017 - 11:11

    OH ! Mille mercis ! Exactement ce qu'il me fallait Very Happy
    avatar
    RigoloDiabolo_
    MasculinAge : 17Messages : 15

    le Dim 23 Avr 2017 - 12:07

    mrc
    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Jeu 1 Juin 2017 - 0:37

    mercii



    avatar
    Jujudu44
    FémininAge : 30Messages : 61

    le Lun 5 Juin 2017 - 14:51

    C'est magnifique, merci !
    avatar
    Destan
    MasculinAge : 39Messages : 37

    le Ven 4 Aoû 2017 - 23:36

    Merci
    avatar
    Offrande
    FémininAge : 27Messages : 194

    le Jeu 10 Aoû 2017 - 22:02

    Magnifique <3
    avatar
    Loo
    FémininAge : 23Messages : 22

    le Lun 28 Aoû 2017 - 1:58

    Merciiii ! Very Happy
    avatar
    Necrolythia
    FémininAge : 30Messages : 514

    le Mar 26 Sep 2017 - 22:17

    classe, j'aime

    merciiiiiiiiiiiiiiiiiii



    avatar
    Titi | Luna
    FémininAge : 13Messages : 46

    le Mar 10 Oct 2017 - 18:52

    Coucou !
    J'adore ton code (comment que vous faite... moi connais que bbcode...)
    avatar
    MadSushi
    FémininAge : 22Messages : 25

    le Mer 18 Oct 2017 - 15:06

    Merci :)
    avatar
    benficagirl
    FémininAge : 32Messages : 375

    le Mar 28 Nov 2017 - 15:32

    C'est super beau :)
    avatar
    Kokola
    FémininAge : 24Messages : 23

    le Ven 12 Jan 2018 - 19:33

    Merci beaucoup ! ham1 ham1
    avatar
    Fawadja
    MasculinAge : 23Messages : 32

    le Ven 9 Mar 2018 - 15:59

    Merci à toi :)
    avatar
    Shide
    FémininAge : 29Messages : 60

    le Dim 18 Mar 2018 - 21:27

    merçi
    avatar
    Abby Reever
    FémininAge : 26Messages : 131

    le Jeu 10 Mai 2018 - 13:04

    C'est magnifique ! ** J'adore ! Bravo à toi !
    avatar
    Vanessa sassa
    FémininAge : 27Messages : 21

    le Sam 26 Mai 2018 - 20:58

    merci
    avatar
    Idril Palanén
    FémininAge : 25Messages : 77

    le Jeu 14 Juin 2018 - 16:42

    Magnifique ! Je prends pour un futur projet qui sait ! :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 2:10