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 style steampunk

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

    le Dim 19 Fév 2017 - 14:49



    Bonjour ou bonsoir !
    Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de catégories avec un style plutôt steampunk ^-^
    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    Un aperçu en image:
    Spoiler:

    Optimisé pour tous les navigateurs - Version PHPBB2

    Installer vos nouvelles catégories:
    Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant.

    Code:
    <div class="catLiens">
      <!-- BEGIN switch_user_logged_in -->
      <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
      <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
      <!-- END switch_user_logged_in -->
      <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </div>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="categorie">
     {catrow.tablehead.L_FORUM}
     <!-- END tablehead -->
     <!-- BEGIN forumrow -->
      <div class="catCentre">
      <div class="inline catGauche">
              <div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
              <div class="inline catLast">
                      <img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
      {catrow.forumrow.LAST_POST}
              </div>
              <div class="inline catAvatar">
     <!-- BEGIN avatar -->
                      {catrow.forumrow.avatar.LAST_POST_AVATAR}
      <!-- END avatar -->
              </div>
      <div class="inline sousForums">{catrow.forumrow.LINKS}</div>
      </div>
      <div class="inline catDroite">
      <a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      <div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
            </div>
      </div>
     <!-- END forumrow -->
     <!-- BEGIN tablefoot -->
      <img src="http://zupimages.net/up/17/13/mt9t.png" />
    </div><!-- END tablefoot --><!-- END catrow -->

    Une fois cela fait, enregistrez et validez votre template.

    Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

    Code:
    /* Catégories réalisées par Cheshire Cat */
    .catLiens{
      text-align:center;
    }
    .categorie{
      width:800px;
      margin:0 auto;
      font-family:calibri;
      font-size:12px;
    }
    .inline{
      display:inline-block;
      vertical-align:top;
    }
    .categorie h2{
      margin:20px 0 0;
      padding:30px 0;
      box-sizing:border-box;
      background-image:url('http://zupimages.net/up/17/13/mt9t.png');
      font-size:30px;
      font-weight:normal;
      text-align:center;
      color: #523e32;
      text-shadow: 0 0 3px #55493f;
    }
    .catCentre{
      padding:0 20px 40px 20px;
      background:#21130d;
    }
    .categorie h2 + .catCentre{
      padding-top:40px;
    }
    .catGauche{
      width:400px;
      background-color:#a9a08b;
      margin-right:10px;
      padding:10px;
      box-sizing:border-box;
    }
    .catStats{
      color:#654f3f;
      font-size:15px;
      margin-bottom:3px;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .catLast{
      width:130px;
      height:120px;
      padding:5px;
      box-sizing:border-box;
      background-color:#ccc6b8;
      text-align:center;
      line-height:20px;
      overflow:auto;
    }
    .catAvatar{
      width:80px;
      height:120px;
      margin:0 10px;
      overflow:hidden;
      background-color:#ccc6b8;
    }
    .catAvatar img{
      width:100%;
    }
    .sousForums{
      width:150px;
      height:120px;
      background-color:#ccc6b8;
      font-size:0;
      overflow: auto;
    }
    .sousForums a{
      display:block;
      background:#fff;
      font-size:12px;
      text-align:center;
      margin-bottom:5px;
    }
    .catDroite{
      width:350px;
      background-color:#a9a08b;
      padding:10px;
      box-sizing:border-box;
    }
    .catTitreForum {
      font-size:15px;
      text-transform:uppercase;
      letter-spacing:1px;
    }
    .catDescrip{
      height:120px;
      background-color:#ccc6b8;
      margin-top:5px;
      padding:10px;
      overflow:auto;
      text-align:justify;
      box-sizing:border-box;
    }

    N'hésitez pas à poster un petit message, ça fait toujours plaisir !



    avatar
    Onyx
    FémininAge : 23Messages : 3047

    le Lun 18 Sep 2017 - 16:03

    Salut!

    Ça m'a l'air parfait, je mets le tout en libre service ^^
    Merci du partage !



    avatar
    rosebleudu10
    FémininAge : 27Messages : 188

    le Jeu 2 Nov 2017 - 11:07

    merci pour ce codage
    avatar
    Kelalin
    FémininAge : 25Messages : 1707

    le Jeu 2 Nov 2017 - 17:30

    Merci pour le partage !
    avatar
    Dixy
    FémininAge : 23Messages : 224

    le Dim 5 Nov 2017 - 1:42

    Merci !



    avatar
    AMYROSSLEDGER
    FémininAge : 23Messages : 36

    le Mer 15 Nov 2017 - 21:51

    quel talent tu as là, c'est magnifique, j'adore !
    excellent travail :love:
    avatar
    AriusMart
    MasculinAge : 30Messages : 1

    Hier à 13:47

    Merci Beaucoup, j'adore se style Steam Punk ! Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mer 22 Nov 2017 - 13:47