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.

-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

    [hallow] Demande de mise en forme de catégories d'après un tuto

    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Dim 13 Avr 2014 - 18:37

    Ma demande



       Bonjour!
    J'ai hésité à poster dans personnalisation, mais selon moi les modifications sont assez conséquentes, je préfère donc poster ici...
    Le modèle est d'Onyx https://www.never-utopia.com/t46680-css-et-template-simples-categories

       Schéma(s) et Eléments
       Schémas : https://www.never-utopia.com/t46680-css-et-template-simples-categories
    Ce que je souhaite modifier :
    -laisser les liens des sous-forum en bas de la description (leur place normale en somme, pas dans le rectangle)
    -Que ce rectangle à gauche devienne l'endroit où je vais mettre mes images New, No New, Verr (en laissant les bordures)
    -toujours concernant ces rectangles : qu'ils soient moins grands que le cadre des descriptions (je vais de toute manière donner les dimensions en dessous =)).
    -Enlever le "old" à droite
    -si possible, que les animations des titres lorsque l'on passe la souris soient moins prononcées ( par ex: que "Première catégorie" aille moins à droite et que "1er forum" se distende moins)

       Tailles des éléments :
    Largeur entière des catégories : 860px
    La hauteur est bien dans le tuto
    La taille de l'écriture : j'aimerais la diminuée, car elle me parait énorme.
    Pour le nom des catégories : vers les 30px
    Pour le nom des forums : 23-24px
    Pour le rectangle à gauche : mes boutons font 75x75px, il faudrait donc un cadre un tout petit peu plus grand

       Ressources
       Je ne sais pas si je dois mettre mes images New, No New et verr? Car de toute manière elles sont mises dans mon panneau de configuration dans 'images'

       Autres précisions ?
       Pour les couleurs...
    Je vous mets ici le lien de mon forum pour que vous voyez les couleurs à utiliser (si vous pouviez reprendre les même ça serait super)
    http://occupation1940.forumactif.org/


    Merci d'avance!
       


    Dernière édition par Elrohir le Lun 5 Mai 2014 - 13:06, édité 2 fois
    • Revenir en haut
    Anonymous
    Invité

    Ven 18 Avr 2014 - 19:52

    Plop !

    Je vais tenter x)

    EDIT : ça donne ceci
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Sam 19 Avr 2014 - 0:18

    Waho, merci Halloween!

    Il y a cependant deux petites choses qui me chiffonnent :
    -Je me rends compte qu'avec mes couleurs, l'ombre autour des boutons No New, New, Verr est pas terrible... serait-il possible de l'enlever?
    -Serait-il possible d'augmenter la hauteur de la partie où sont les descriptions (et du coup coller un peu plus les sous-forums au cadre de la catégorie)? Car j'ai vraiment du mal avec les déroulés, je voudrais donc gagner le plus de place pour mes descriptions xP

    Mais sinon merci mille fois!
    • Revenir en haut
    Anonymous
    Invité

    Sam 19 Avr 2014 - 10:16

    Plop !

    L'ombre a été enlevé, par contre du coup pour les descriptions j'aimerais avoir une taille précise s'il te plait, car à chaque fois que je l'augmente je dois repositionner chaque élément et tu te doutes bien qu'à la longue ça peut vite devenir casse bonbon xD
    Par contre pour coller les sous-forum au cadre, le soucis c'est que j'ai mis un déroulé (que tu n'aimes pas, j'ai bien compris xD) car si tu as plus de sous-forum que ne le permet la ligne, ils vont sortir du cadre et empiéter sur les autres forum =$
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Sam 19 Avr 2014 - 18:48

    Pour les dimensions, 450 de largeur et 100 de hauteur ça serait parfait. Après, si mes descriptions sont trop grandes, je me débrouillerai, je tronquerai =)
    Pour les sous-forums, j'en ai jamais plus de trois, donc ne t'inquiète pas!

    Ah, et je viens de voir un truc, j'avais enlevé la colonne avec les nombres de sujets et de messages, penses-tu qu'il y seront malgré tout dans cette version? Car si c'est le cas, je veux bien que tu les enlèves ^^' (désolée de n'y avoir pensé que maintenant...)
    • Revenir en haut
    Anonymous
    Invité

    Sam 19 Avr 2014 - 19:06

    Ca donne ceci : www.
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Sam 19 Avr 2014 - 19:35

    Ah, je suis désolée, je t'ai mal comprise >< les dimensions que je t'ai données sont pour le cadre contenant l'écriture des descriptions, car les dimensions du cadre d'avant étaient parfaites.
    • Revenir en haut
    Anonymous
    Invité

    Lun 21 Avr 2014 - 11:36

    On va y arriver xD
    Modifié, les descriptions font maintenant 450*100px x)
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Dim 4 Mai 2014 - 17:22

    Bonjour!

    Je suis désolée de mon temps de réponse, je n'ai pas eu internet pendant deux semaines. J'avais pourtant demandé à ma soeur de te prévenir via mon compte, mais elle ne l'a apparemment pas fait -_-'

    Je suppose que tu as modifié un peu ton forum test pour d'autres commandes du coup ?
    • Revenir en haut
    Anonymous
    Invité

    Dim 4 Mai 2014 - 18:18

    Hey !

    Effectivement, je n'ai eu aucune nouvelle j'ai cru que c'était abandonné. Du coup je ne sais plus vraiment ce que tu voulais, je crois que le code est toujours sur le forum test que je t'ai passé.
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Dim 4 Mai 2014 - 18:37

    Rah, c'est vraiment bête, elle m'a pourtant dit qu'elle l'avait fait, mais elle a du se tromper de sujet, c'est pas possible...

    Par rapport à ton forum test, j'ai l'impression que les catégories sont plus larges qu'avant, mais je peux me tromper vu que de l'eau a coulé sous les ponts depuis que je l'ai vu..!
    • Revenir en haut
    Anonymous
    Invité

    Dim 4 Mai 2014 - 18:39

    Ben il me semble que j'avais modifié selon tes désirs. Que dois-je faire alors ?
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Dim 4 Mai 2014 - 18:59

    Oui oui en effet, c'est moi, ne t'inquiète pas =)

    Et juste une dernière petite chose : pourrais-je avoir le même sigle " >> " devant le nom des forums ? Car je vois que pour le deuxième, c'est un tiret.

    Après cette dernière modif', je ne t'embêterai plus =)
    • Revenir en haut
    Anonymous
    Invité

    Dim 4 Mai 2014 - 19:36

    Pour les ">>" il faut les ajouter manuellement à chaque titre, sans quoi ça ne s'affiche pas correctement.
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Dim 4 Mai 2014 - 19:55

    Ok, je le ferai !
    • Revenir en haut
    Anonymous
    Invité

    Dim 4 Mai 2014 - 20:33

    Donc pour les codes, dans le template index_box :

    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 -->
          <table class="global_cate" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr><td class="title_cate">
                {catrow.tablehead.L_FORUM}
                </td></tr>
          <!-- END tablehead -->
          <!-- BEGIN forumrow -->
          <tr>
                <td>
                <table align="center" class="global_forum" cellspacing="15" width="100%">
          <tr>
          <td align="left" valign="middle" style="padding-top: 24px;" width="95%">
            <div class="genimg_forum" align="center">
               
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
               
                   
                  </div>
                 
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="gendesc_forum">
                    <div class="desc_forum">{catrow.forumrow.FORUM_DESC}</div>
                    <div class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                  </div>
          </td>
          <td align="center" valign="middle" width="5%">
            <div class="stats_forum">
            {catrow.forumrow.LAST_POST}
            </div>
          </td>
          </tr>
          </table>
          </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->



    Et le CSS :
    Code:
    /*DÉBUT DES CATÉGORIES*/
        /*Corps de Catégorie*/
        .global_cate {
          background-color: #C7BB9D;
          border: solid 1px #1B2836;
          border-bottom: double 8px #1B2836;
          border-top: none;
        }

        /*Titre de la Catégorie*/
        .title_cate span {
          display: block;
          margin-top: -10px;
          padding-left: 40px;
          background-color: #80734F;
          font-size: 30px;
          font-family: monotype corsiva;
          color: #221F15;
          border-bottom: double 8px #221F15;
          transition: 0.8s;
          -moz-transition: 0.8s;
          -o-transition: 0.8s;
          -webkit-transition: 0.8s;
        }
        .title_cate span:hover {
          padding-left: 80px;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -webkit-transition: 1s;
        }

        /*Corps de Forum*/
        .global_forum {
          margin-top: 15px;
          margin-bottom: 15px;
          padding-right: 20px;
          padding-left: 20px;
          font-family: Times New Roman;
          color: #221F15;
        }

        .global_forum a {
          color: #221F15 !important;
        }

        /*image new, no new, lock*/
        .genimg_forum {
          position: relative;
          left: 20px;
          top: -2px;
          overflow: auto;
          z-index: 1;
          padding: 5px;
          background-color: #EBDFCE;
          width: 95px;
          border: solid 1px #80734F;
          border-bottom: solid 5px #80734F;
          border-top: solid 5px #80734F;
          text-align: center;
        }

        /*Bloc de la description du forum*/
        .gendesc_forum {
          background-color: #EBDFCE;
          padding-right: 40px;
          position: relative;
          top: 0.3em;
          height: 145px;
          border: solid 1px #80734F;
          border-left: solid 5px #80734F;
          border-right: solid 5px #80734F;
        }

        /*Description du forum*/
        .desc_forum {
          position: relative;
          top: 15px;
          right: -30px;
          height: 100px;
          padding-left: 110px;
          padding-right: 10px;
          text-align: justify;
          font-family: Times New Roman;
          font-size: 13px;
        }

    /* Sous-forum*/
        .sous_forums {
          position: relative;
          top: 25px;
          right: -30px;
          padding-left: 110px;
          padding-right: 10px;
          text-align: justify;
          font-family: Times New Roman;
          font-size: 13px;
        }

        /*Titre de forum*/
        .forumlink {
          display: block;
          margin-top: -140px;
          margin-bottom: -17px;
          position: relative;
          z-index: 1;
          padding-left: 50px;
          text-align: center;
          font-family: Monotype Corsiva;
          font-size: 24px;
          color: #221F15!important;
          letter-spacing: 2px;
          transition: all 0.5s;
          -moz-transition: all 0.5s;
          -o-transition: all 0.5s;
          -webkit-transition: all 0.5s;
        }
        .forumlink:hover {
          letter-spacing: 5px;
          text-decoration: none!important;
          transition: all 0.5s;
          -moz-transition: all 0.5s;
          -o-transition: all 0.5s;
          -webkit-transition: all 0.5s;
        }

        /*Bloc du Dernier Message*/
        .stats_forum {
          padding: 5px;
          padding-top: 10px;
          border: solid 1px #80734F;
          border-bottom: solid 5px #80734F;
          border-top: solid 5px #80734F;
          background-color: #EBDFCE;
          width: 140px;
          height: 70px;
          font-family: Times New Roman;
          font-size: 13px;
        }
        /*Nb de Topics et Messages*/
        .stat_forum {
          font-family: Times New Roman;
          font-size: 11px;
        }
          /*FIN DES CATÉGORIES*/
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Lun 5 Mai 2014 - 13:06

    Merci!
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 13:10

    Tout fonctionne ? =3
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Lun 5 Mai 2014 - 13:51

    Arf, malheureusement non, il y a un soucis au niveau des titres des catégories x_x (et du coup du contour des bloques des catégories)
    Après il y a quelques soucis de couleur, mais ça je vais pouvoir m'en occuper je pense!
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 13:58

    C'est-à-dire ?
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Lun 5 Mai 2014 - 14:05

    Par exemple, pour "Saint-Junien", il n'est pas dans son cadre, ce qui ne ferme pas l'ensemble du bloc (il y a bien les deux lignes qui sont restées bleues en dessous, mais rien au dessus du bloc)

    Spoiler:
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 14:10

    ... J'ai oublié un bout du code xD
    Dans tes titres de catégories, ajoute un "span", de cette façon :

    Code:
    <span>Titre catégorie</span>
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Lun 5 Mai 2014 - 14:19

    Ok super, merci!
    • Revenir en haut
    Anonymous
    Invité

    Lun 5 Mai 2014 - 14:22

    Du coup tout est bon ?
    • Revenir en haut
    avatar
    Elrohir
    FémininAge : 31Messages : 69

    Lun 5 Mai 2014 - 15:03

    Oui, tout est bon ! =) Merci encore!
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 2 Mai 2024 - 6:41