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.

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.99 €
Voir le deal

    (Cheshire) [Catégorie] Refaire les catégories et forums

    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Mar 12 Avr 2016 - 16:31

    Rappel du premier message :

    Ma demande



    Bonjour et merci de votre lecture :)

    Je suis actuellement entrain de créer un forum. Etant terriblement nulle en codage je préfère vous demander de l'aide afin de modifier l'apparence de mes forums et catégories qui pour l'instant sont... horriblement basiques :s (Vraiment, vous avez vu ça? c'est pas terrible :'( ça vend tout sauf du rêve. )

    Alors pouvez-vous m'aider s'il vous plaît?  :love:  

    Schéma(s) et Eléments
    Schémas: J'aimerais que le final ressemble à ceci: cliquez ici
    Effets voulus : Comme indiqué que le schéma j'aimerais
    - un effet sur le nom des catégories et des forums (les lettres s'espaçant au passage de la souris, désolée j'ignore comment cela s'appel ^^')
    - une image au dessus de la description, qui s'efface au passage de la souris pour laisser place au texte
    Version de votre forum : PHPBB2,  

    Ressources
    Aucune en particulier étant donné qu'elles changeront à chaque fois, mais les tailles sont indiquées

    Autres précisions ?
    Merci d'avoir lu jusqu'ici, j’espère que cette idée intéressera un codeur (ou deux, ou trois). Si vous avez des questions je me tiens (bien évidemment) à votre disposition! Very Happy

    Merci d'avance!
    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Mer 20 Avr 2016 - 16:10

    J'ai essayé mais cela ne semble pas fonctionner. Voici les codes (je n'ai peut-être pas fait ça correctement :s)

    Templates Index-box:
    Code:
    <link href='https://fonts.googleapis.com/css?family=Montserrat|Raleway' rel='stylesheet' type='text/css' />
    <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="fondcat" width="100%" border="0" cellspacing="1" cellpadding="0">
         <tr>
              <th colspan="4" nowrap="nowrap" class="titrecat">{catrow.tablehead.L_FORUM}<div class="barrecat"></div></th>
        </tr>
       <!-- END tablehead -->
       <!-- BEGIN forumrow -->
       <!-- BEGIN cathead -->
         <tr>
               <!-- BEGIN inc -->
           <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
           <!-- END inc -->
          <td colspan="4">
                <h1 class="titrecat">{catrow.cathead.CAT_TITLE}</h1>
          </td>
       </tr>
       <!-- END cathead -->
       <tr>
          <td>
             <img class="imgcat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td>
             <h2 class="titrefrm">
                <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
             </h2>
             <div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
             <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
          </td>
                    <td>
                            <div class="catderniermessage">
                              <span class="topics">{catrow.forumrow.TOPICS}</span>
                              <span class="messages">{catrow.forumrow.POSTS}</span><br />
                              <span>{catrow.forumrow.LAST_POST}</span>
                            </div>
                    </td>
          <td>
                      
                        <div class="avatardernierposter">
                              <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
                         </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

    Côté CSS:
    Code:
      /****************************Début Catégories par Cheshire Cat****************************/
    .fondcat{
      width:932px;
      margin-top:10px;
      margin-bottom:5px;
      padding-top:7px;
      padding-bottom:13px;
      background-color:#12203d;
      border-left:5px solid #0393da;
      border-right:5px solid #0393da;
      padding-left:30px;
      padding-right:25px;
      margin:auto;
    }
    .imgcat{
      position:relative;
      top:1px;
      width:100px;
      height:100px;
      margin-left:5px;
      border:1px solid #0393da;
    }
    .titrecat h2{
      position:relative;
      z-index:2;
      color:#12203d;
      font-size:25px;
      font-family: Impact;
      font-weight:normal;
      letter-spacing:2px;
      font-style:italic;
      text-shadow:0px 0px 5px #0393da;
      text-transform:uppercase;
      text-align:center;
    }
    .barrecat{
      z-index;1;
      position:relative;
      bottom:25px;
      width:850px;
      height:10px;
      margin:-15px auto -15px auto;
      background-color:#0393da;
      border-radius: 100% 100%;
      box-shadow:0px 0px 2px #0393da;
    }
    .titrefrm{
      position:relative;
      top:5px;
      font-size:18px;
      font-family: Impact;
      text-align:center;
      text-transform:uppercase;
      font-style:italic;
      font-weight:normal;
    }
    .titrefrm a{
      color:#0393da; /*Couleur du texte du forum*/
      text-decoration:none;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .titrefrm a:hover{
      color:#FFFFFF; /*Couleur du texte du forum au survol*/
      letter-spacing:5px;
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .descricat{
      position:relative;
      bottom:5px;
      left:5px;
      width:500px;
      height:80px;
      border:1px solid #0393da;
    }
    .descricat img{
      width:500px;
      height:80px;
    }
    .descricat .texte{
      position:absolute;
      top:0px;
      width:480px;
      height:59px;
      margin:5px;
      padding:5px;
      background-color:#e4efef;
      border:1px solid #0393da;
      overflow:auto;
      text-align:justify;
      font-family: 'Raleway', sans-serif;
      font-size:12px;
      color:#304f8c;
      opacity:0;
      transition:all 0.4s ease-out;
      -webkit-transition:all 0.4s ease-out;
    }
    .descricat .texte:hover{
      opacity:1;
      transition:all 0.4s ease-in;
      -webkit-transition:all 0.4s ease-in;
    }
    .sousforum{
      position:relative;
      bottom:5px;
      left:5px;
      width:502px;
      min-height:18px;
      padding-top:2px;
      background-color:#0393da;
      border-bottom-left-radius:50% 75%;
      border-bottom-right-radius:50% 75%;
      text-align:center;
      font-size:0px;
    }
    .sousforum a{
      padding-right:10px;
      font-size:11px;
      color:#FFFFFF; /*Couleur des liens des sous-forum*/
      font-family: 'Montserrat', sans-serif;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .sousforum a:hover{
      color:#304f8c; /*Couleur des liens du sous-forum au survol*/
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .catderniermessage{
      width:140px;
      height:80px;
      margin-top:1px;
      margin-left:5px;
      padding:10px;
      background-color:#12203d;
      border:1px solid #12203d;
      text-align:center;
      font-family:'Raleway', sans-serif;
      font-size: 10px;
      color:#304f8c;
      line-height:20px;
    }
    .topics{
      padding-right:30px;
      font-size:20px;
      font-family: Impact;
      color:#2c4068; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0b1730; /*Couleur pour afficher le texte*/
    }
    .messages{
      padding-left:5px;
      font-size:20px;
      font-family: Impact;
      color:#2c4068; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0b1730; /*Couleur pour afficher le texte*/
    }
    .catderniermessage a{
      text-decoration:none;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .catderniermessage a:hover{
      color:#727bc4; /*COuleur du liens du sujet au survol*/
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .avatardernierposter{
      width:66px;
      height:100px;
      margin-top:1px;
      margin-left:4px;
      margin-right:5px;
      border:1px solid #0393da;
      background-color:#12203d;
      overflow:hidden;
      visibility:visible;
    }
    .avatardernierposter img{ /*Redimenssion de l'avatar du dernier posteur*/
      margin-top:-5px;
      width:66px;
    }
        /****************************Fin Catégories par Cheshire Cat****************************/

    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Ven 22 Avr 2016 - 20:48

    Petit up du sujet, j'ai essayé de revoir le code mais je n'ai toujours pas réussi à corriger ce bug je ne vois pas d'où il vient Sad



    Arkaline
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Ven 22 Avr 2016 - 20:56

    Ah fuck je t'ai oubliée >.>
    Je vais faire ça !

    EDIT: Je te redonne tout :)

    Code:
    /*Début Catégories par Cheshire Cat*/
    .fondcat{
      width:932px;
      margin-top:10px;
      margin-bottom:5px;
      padding-top:7px;
      padding-bottom:13px;
      margin:auto;
      padding-left:33px;
      padding-right:22px;
      background-color:#142342;
      border-left:5px solid #0393da;
      border-right:5px solid #0393da;
    }
    .imgcat{
      position:relative;
      top:1px;
      width:100px;
      height:100px;
      margin-left:5px;
      border:1px solid #0393da;
    }
    .titrecat h2{
      position:relative;
      z-index:2;
      color:#142342;
      font-size:25px;
      font-family: Impact;
      font-weight:normal;
      letter-spacing:2px;
      font-style:italic;
      text-shadow:0px 0px 5px #0393da;
      text-transform:uppercase;
      text-align:center;
    }
    .barrecat{
      z-index;1;
      position:relative;
      bottom:25px;
      width:850px;
      height:10px;
      margin:-15px auto -15px auto;
      background-color:#0393da;
      border-radius: 100% 100%;
      box-shadow:0px 0px 2px #0393da;
    }
    .titrefrm{
      position:relative;
      top:5px;
      font-size:18px;
      font-family: Impact;
      text-align:center;
      text-transform:uppercase;
      font-style:italic;
      font-weight:normal;
    }
    .titrefrm a{
      color:#0393da; /*Couleur du texte du forum*/
      text-decoration:none;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .titrefrm a:hover{
      color:#FFFFFF; /*Couleur du texte du forum au survol*/
      letter-spacing:5px;
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .descricat{
      position:relative;
      bottom:5px;
      left:5px;
      width:500px;
      height:80px;
      border:1px solid #0393da;
    }
    .descricat img{
      width:500px;
      height:80px;
    }
    .descricat .texte{
      position:absolute;
      top:0px;
      width:480px;
      height:59px;
      margin:5px;
      padding:5px;
      background-color:#FFFFFF;
      border:1px solid #0393da;
      overflow:auto;
      text-align:justify;
      font-family: 'Raleway', sans-serif;
      font-size:12px;
      color:#304f8c;
      opacity:0;
      transition:all 0.4s ease-out;
      -webkit-transition:all 0.4s ease-out;
    }
    .descricat .texte:hover{
      opacity:1;
      transition:all 0.4s ease-in;
      -webkit-transition:all 0.4s ease-in;
    }
    .sousforum{
      position:relative;
      bottom:5px;
      left:5px;
      width:502px;
      min-height:18px;
      padding-top:2px;
      background-color:#0393da;
      border-bottom-left-radius:50% 75%;
      border-bottom-right-radius:50% 75%;
      text-align:center;
      font-size:0px;
    }
    .sousforum a{
      padding-right:10px;
      font-size:11px;
      color:#FFFFFF; /*Couleur des liens des sous-forum*/
      font-family: 'Montserrat', sans-serif;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .sousforum a:hover{
      color:#304f8c; /*Couleur des liens du sous-forum au survol*/
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .catderniermessage{
      width:140px;
      height:80px;
      margin-top:1px;
      margin-left:5px;
      padding:10px;
      background-color:#FFFFFF;
      border:1px solid #0393da;
      text-align:center;
      font-family:'Raleway', sans-serif;
      font-size:11px;
      color:#304f8c;
      line-height:20px;
    }
    .topics{
      padding-right:30px;
      font-size:30px;
      font-family: Impact;
      color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
    }
    .messages{
      padding-left:5px;
      font-size:25px;
      font-family: Impact;
      color:#FFFFFF; /*Mettre la couleur de fond du cadre derniermessage*/
      text-shadow:1px 1px 0px #0393da; /*Couleur pour afficher le texte*/
    }
    .catderniermessage a{
      text-decoration:none;
      transition:all 0.5s ease-out;
      -webkit-transition:all 0.5s ease-out;
    }
    .catderniermessage a:hover{
      color:#727bc4; /*COuleur du liens du sujet au survol*/
      text-decoration:none !important;
      transition:all 0.5s ease-in;
      -webkit-transition:all 0.5s ease-in;
    }
    .avatardernierposter{
      width:63px;
      height:100px;
      margin-top:1px;
      margin-left:4px;
      margin-right:5px;
      border:1px solid #0393da;
      background-color:#FFFFFF;
      overflow:hidden;
      visibility:visible;
    }
    .avatardernierposter img{ /*Redimenssion de l'avatar du dernier posteur*/
      margin-top:-5px;
      width:63px;
    }
    /*Fin Catégories par Cheshire Cat*/

    Code:
    <link href='https://fonts.googleapis.com/css?family=Montserrat|Raleway' rel='stylesheet' type='text/css' />
    <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="fondcat" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
         <th colspan="4" nowrap="nowrap" class="titrecat">{catrow.tablehead.L_FORUM}<div class="barrecat"></div></th>
     </tr>
     <!-- END tablehead -->
     <!-- BEGIN forumrow -->
     <!-- BEGIN cathead -->
       <tr>
             <!-- BEGIN inc -->
     <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td colspan="4">
     <h1 class="titrecat">{catrow.cathead.CAT_TITLE}</h1>
     </td>
     </tr>
     <!-- END cathead -->
     <tr>
     <td>
     <img class="imgcat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
     </td>
     <td>
     <h2 class="titrefrm">
     <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     </h2>
     <div class="descricat">{catrow.forumrow.FORUM_DESC}</div>
     <div class="sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
     </td>
                    <td>
                            <div class="catderniermessage">
                              <span class="topics">{catrow.forumrow.TOPICS}</span>
                              <span class="messages">{catrow.forumrow.POSTS}</span><br />
                              {catrow.forumrow.LAST_POST}
                            </div>
                    </td>
     <td>
                
                   <div class="avatardernierposter">
                              <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
                       </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Mar 26 Avr 2016 - 16:29

    Salut!

    Pas de souci, tu es déjà bien gentille de m'aider :)

    Hélas après remplacement des codes ça ne fonctionne toujours pas. J'ai toujours le même soucis avec le texte qui dépasse: https://2img.net/r/hpimg15/pics/135084newbug.jpg



    Arkaline
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Mar 26 Avr 2016 - 20:42

    Mince alors :/
    Je regarde encore ça si tu veux.
    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Mer 27 Avr 2016 - 14:13

    Si tu en as le temps et l'envie oui :)

    J'essaye de trouver une solution de mon côté également ^^



    Arkaline
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Ven 29 Avr 2016 - 15:08

    C'est un peu compliqué pour moi en ce moment car je n'ai plus mon ordinateur actuellement. Il a eu des problèmes et du coup il est en réparation.
    Aujourd'hui je me focalise sur autre chose et je verrais en début de semaine prochaine pour toi t'inquiète pas.
    Encore désolée :/
    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Lun 2 Mai 2016 - 10:27

    Aucun souci, prends tout ton temps ^^

    De mon côté tout les essais sont un échec... mais il reste la possibilité de changer le format de la date, et là ça passe @_@



    Arkaline
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Mar 3 Mai 2016 - 20:32

    Tu peux faire ça à la limite pour le moment :p
    Demain chez moi je regarde ça
    • Revenir en haut
    Arkaline
    Arkaline
    FémininAge : 33Messages : 195

    Ven 6 Mai 2016 - 12:58

    Je poste un petit message pour te dire que j'ai trouvé la solution :) (et même deux, au choix :p)

    La première consiste à permettre un retour à la ligne du texte en ajoutant ceci au css:
    Code:
    td.row3Right {
      white-space: normal;
    }

    Mais elle ne me plaisait aps trop (cela aggrandissait la taille de la case à cause du retour à la ligne) alors on m'a donné un code pour modifier précisément lat aille de ce texte (toujours dans le CSS):
    Code:
    td.row3Right .postdetails {
      font-size: 10px;
    }

    Et là tout est parfait! :coeur:

    Encore merci pour ton aide (et ta patience pour les petits bugs qui ont fait surface par la suite), ce thème est vraiment superbe!

    Cette fois je pense qu'on peut enfin dire que tout fonctionne! :) :friends:



    Arkaline
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Ven 6 Mai 2016 - 20:18

    Haha parfait alors !

    A archiver du coup Razz
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 21:44