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.


    Personnalisation du code de Cheshire Cat

    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 154

    le Mar 19 Juin 2018 - 14:52

    Bonjour à vous ! =)

    Je suis venu faire appel à vous, grand maîtres codeurs, pour m'aider à coder correctement une catégorie ^^. Sur recommandation de mes joueurs, j'ai decidé d'adopter le code de Chesirecat pour mon forum (juste ICI), maius j'aurai voulu lui apporter quelques petites modifications. Normalement, ce n'est rien de bien compliqué. Voici les modifs que je voudrais (à ma conaissance, c'est surtout du HTML, le CSS de toute façon je peux gérer tout seul)

    1. Supprimer le fond des catégories à gauche et à droite (pour le remplacer par une couleur de fond unie)
    2. déplacer l'image old/new en haut du bloc "inline catLast" (ça ferait un petit bandeau en haut de ce bloc)
    3. créer une DIV avec fond de coulur dans laquelle va se placer le titre
    4. Mettre la description dans la boîte de gauche (une image doit-être là en permenence et un effet de hover fait apparaître la description /!\ Je veux pouvoir personnaliser cette image pour chaque forum ! /!\)

    Voici maintenant un petit schéma explicatif plus clair ^^ (en bas le forum par défaut, en haut ce que j'aimerais avoir).

    Personnalisation du code de Cheshire Cat 1529412538-idee-de-categorie

    HTML:
    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 -->

    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;
        }

    Quand au code à mettre dans la description du forum (pour personnaliser l'image de ce dernier) comme je sais qu'il n'y en a pas, je vous laisse me le donner !Very Happy

    Merci d'avance ! Very Happy

    EDIT : J'ai commencé à bidouiller un peu le CSS de mon côté, voici donc la version actuelle, sachant que j'ai envie d'éviter de toucher le HTML tout seul, je n'ai pas posé un seul doigt dessus ! ^^

    New 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:10px 10px;
          background:#494949;
          width:780px;
          margin: 30px 0;
        }
        .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:370px;
          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:3px;
          padding:10px;
          overflow:auto;
          text-align:justify;
          box-sizing:border-box;
        }


    Dernière édition par Lone wanderer le Ven 6 Juil 2018 - 12:05, édité 1 fois
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 154

    le Dim 24 Juin 2018 - 14:30

    Hello !

    Bon, j'ia un peu avancé par moi même mais je dirais pas non à quelqu'un pour reviewer mon code et maider à le finaliser siouplait ! :)
    Lone wanderer
    Lone wanderer
    MasculinAge : 27Messages : 154

    le Ven 6 Juil 2018 - 12:04

    Bon... Finalement je l'ai fait tout seul.
    Contenu sponsorisé


      La date/heure actuelle est Lun 17 Juin 2019 - 14:38