AccueilRechercherS'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

    Cheshire Cat
    Cheshire Cat
    FémininAge : 22Messages : 999

    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:
    Catégories style steampunk 1b8e922c7a

    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 !
    Onyx
    Onyx
    FémininAge : 25Messages : 3289

    le Lun 18 Sep 2017 - 16:03

    Salut!

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



    rosebleudu10
    rosebleudu10
    FémininAge : 29Messages : 189

    le Jeu 2 Nov 2017 - 11:07

    merci pour ce codage
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2085

    le Jeu 2 Nov 2017 - 17:30

    Merci pour le partage !
    Dixy
    Dixy
    FémininAge : 25Messages : 231

    le Dim 5 Nov 2017 - 1:42

    Merci !



    Catégories style steampunk ?c=isi&im=%2F8762%2F84558762%2Fpics%2F3210667051_1_13_DkYrqtSL
    AMYROSSLEDGER
    AMYROSSLEDGER
    FémininAge : 25Messages : 37

    le Mer 15 Nov 2017 - 21:51

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

    le Mar 21 Nov 2017 - 13:47

    Merci Beaucoup, j'adore se style Steam Punk ! Very Happy
    Celuna
    Celuna
    FémininAge : 29Messages : 133

    le Jeu 22 Mar 2018 - 8:58

    Merci pour ce magnifique partage
    Alouarn
    Alouarn
    MasculinAge : 28Messages : 130

    le Ven 30 Mar 2018 - 18:10

    Merci beaucoup ! **

    Ces catégories sont trop cool ! **
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 154

    le Lun 18 Juin 2018 - 0:04

    merci ! :)
    Dawn_sentences
    Dawn_sentences
    FémininAge : 38Messages : 1

    le Jeu 22 Nov 2018 - 21:37

    merci !
    Gieve
    Gieve
    FémininAge : 30Messages : 115

    le Mer 1 Mai 2019 - 14:57

    Merci ^^
    Sophia Howarth
    Sophia Howarth
    FémininAge : 20Messages : 15

    le Mer 16 Oct 2019 - 16:28

    Merci !

    Je te le pique, il est trop sublime !
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Oct 2019 - 17:15