Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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 Grises en Tableau

    Partagez
    FémininAge : 22Message(s) : 2466

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Mer 10 Fév 2016 - 23:14

    Catégories Grises en Tableau


    Voici un petit LS de catégories que j'ai faites pour la demande de Cruelly. Il y a un aussi un LS de Profil/Message qui l'accompagne.

    Pour voir l'aperçu : cliquez ici.

    Effet : Au passage de la souris sur les sous-forums, il y a un effet "buzz" sur les liens.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer les catégories dans le template.
    • Puis, nous allons mettre en forme les catégories à l'aide du CSS.


    - Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer les catégories sur l'index : Moyen".
    - La version du forum est PHPBB2.

    Mettre un crédit vers Never-Utopia est obligatoire. Donc si vous enlevez le crédit sur la PA, assurez-vous de le mettre ailleurs.


    Pour voir le reste, il va falloir un petit merci ^^

    1. Les catégories (Template Index_Box)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > INDEX_BOX

    Puis, on va entièrement remplacer le template "Index_Box" par ceci :
    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="categorie" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td class="cate_title" align="center" valign="top">
            {catrow.tablehead.L_FORUM}
          </td>
        </tr>
        <tr>
          <td class="bloc_ensemble_forum" align="center" valign="top">
          <!-- END tablehead -->
          <!-- BEGIN cathead -->
          <!-- END cathead -->
          <!-- BEGIN forumrow -->
            <table class="bloc_un_forum" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td class="forum_left_bloc" align="center" valign="top">
                    <img class="forum_newoldlock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    <div class="forum_sf_bloc">
                      <span id="forumsfid">
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                      </span>
                    </div>
                  </td>
                  <td class="forum_sep">
                  </td>
                  <td class="forum_right_bloc" align="center" valign="top">
                    <table cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td class="forum_title_stats_bloc" align="center" valign="top">
                            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                            <span class="forum_stats">
                              {catrow.forumrow.POSTS} messages / {catrow.forumrow.TOPICS} sujets.
                            </span>
                            <div style="clear: both;"></div>
                          </td>
                        </tr>
                        <tr>
                          <td height="2">
                          </td>
                        </tr>
                        <tr>
                          <td class="forum_lastmess_bloc" align="center" valign="top">
                            <span id="lastmessid">
                              {catrow.forumrow.LAST_POST}&nbsp;
                            </span>
                          </td>
                        </tr>
                        <tr>
                          <td height="2">
                          </td>
                        </tr>
                        <tr>
                          <td class="forum_description_bloc" align="center" valign="top">
                            <div class="forum_description">
                              {catrow.forumrow.FORUM_DESC}
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <div style="height: 2px;"></div>
          <!-- END forumrow -->
          <!-- BEGIN catfoot -->
          <!-- END catfoot -->
          <!-- BEGIN tablefoot -->
          </td>
        </tr>
      </tbody>
    </table>
    <div style="height: 15px;"></div>
    <!-- END tablefoot -->
    <script type="text/javascript">
      jQuery('#forumsfid').html(jQuery('#forumsfid').html().replace(/, /g,'<br /> ')).removeAttr('id');
    </script>
    <script type="text/javascript">
      jQuery('#lastmessid').html(jQuery('#lastmessid').html().replace(/<br>/g,' ~ ')).removeAttr('id');
    </script>
    <!-- END catrow -->



    2. Mise en forme (CSS)


    Si vous regardez vos catégories, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme nos catégories à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /* -------------------------------------------------- DÉBUT DES CATÉGORIES -------------------------------------------------- */

    /*Bloc de catégorie*/
    .categorie {
      width: 100%; /*LARGEUR DES CATÉGORIES À AJUSTER COMME TU VEUX*/
      margin: auto;
      margin-top: 15px;
    }
    .categorie table {
      width: 100%;
    }


    /*Titre de catégorie*/
    .cate_title h2 {
      display: block;
      background-color: #929292;
      border: 1px solid #6d6d6d;
      max-height: 74px;
      margin: 0px;
      margin-bottom: 2px;
      padding: 5px;
      font-family: 'Verdana';
      font-size: 32px;
      text-align: center;
      font-weight: normal!important;
      color: #545454;
      text-shadow: 1px 1px 2px #dfdfdf;
    }
    .cate_title h2 img {
      margin: -6px;
    }
    /*Réduire le titre de la catégorie dans les autres pages*/
    a.nav img {
      display: inline-block;
      margin-bottom: -5px;
      width: 218px;
      height: 20px;
    }


    /*Bloc paquet de forum*/
    .bloc_ensemble_forum {
      background-color: #a4a4a4;
      border: 1px solid #78787a;
      padding-top: 2px;
      padding-left: 2px;
      padding-right: 2px;
    }

    /*Un seul forum*/
    .bloc_un_forum {
      margin: auto;
      background-color: #929292;
      border: 1px solid #6d6d6d;
      padding: 2px;
    }

    /*Partie gauche du forum*/
    .forum_left_bloc {
      padding-top: 1px;
      width: 179px;
      padding-bottom: 1px;
      padding-right: 2px;
      text-align: center;
    }
    /*Bloc de sous-forums*/
    .forum_sf_bloc {
      background-image: url('http://i19.servimg.com/u/f19/17/10/65/34/untit103.jpg');
      width: 159px;
      height: 124px;
      padding: 10px;
      text-align: left;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Sous-forums*/
    .forum_sf_block span {
      display: block;
      overflow: auto;
      padding-right: 5px;
      margin-right: -5px;
      height: 124px;
    }
    /*Police de sous-forums*/
    .forum_sf_bloc .gensmall {
      font-size: 13px;
      font-family: 'Verdana';
      color: #202020;
      display: inline-block;
      margin: 1px;
      transition: 0.6s;
      -webkit-transition: 0.6s;
      text-shadow: 10px 0px transparent, -10px 0px transparent;
    }
    /*Police de sous-forums - Effet au survol*/
    .forum_sf_bloc .gensmall:hover {
      color: #000000;
      text-shadow: 0px 0px #000000, 0px 0px #000000;
    }

    /*Séparation du forum*/
    .forum_sep {
      width: 2px;
      border-left: 1px solid #747474;
      border-right: 1px solid #747474;
    }

    /*Partie droite du forum*/
    .forum_right_bloc {
      padding-left: 2px;
      padding-bottom: 1px;
      padding-top: 1px;
      text-align: center;
    }
    /*Bloc titre et stats*/
    .forum_title_stats_bloc {
      margin: auto;
      background-color: #7f7f7f;
      border: 1px solid #5f5e5c;
    }
    /*Titre de forum*/
    a.forumlink {
      display: inline-block;
      float: left;
      font-size: 13px;
      font-family: 'Verdana';
      color: #ffffff!important;
      margin-left: 5px;
      font-weight: normal;
    }
    /*Stats*/
    .forum_stats {
      display: inline-block;
      float: right;
      font-size: 12px;
      font-family: 'Verdana';
      color: #ffffff;
      margin-right: 2px;
    }

    /*Bloc du dernier message*/
    .forum_lastmess_bloc {
      margin: auto;
      min-height: 12px;
      backgorund-color: #929292;
      border: 1px solid #6c6c6a;
      padding: 1px;
      padding-right: 2px;
      font-size: 12px;
      font-family: 'Verdana';
      color: #ffffff;
      font-size: 11px;
      text-align: right;
    }
    /*Police des liens du dernier message*/
    .forum_lastmess_bloc .gensmall, .forum_lastmess_bloc a {
      font-family: 'Verdana'!important;
      color: #ffffff!important;
      font-size: 11px!important;
    }

    /*Bloc de description de forum*/
    .forum_description_bloc {
      background-image: url('http://i19.servimg.com/u/f19/17/10/65/34/untit104.jpg');
      height: 120px;
      padding: 5px;
    }
    /*Description de forum*/
    .forum_description {
      font-size: 13px;
      font-family: 'Verdana';
      color: #202020;
      padding: 2px;
      text-align: justify;
      height: 120px;
      padding-right: 3px;
      margin-right: -3px;
      overflow: auto;
    }

    /* -------------------------------------------------- FIN DES CATÉGORIES -------------------------------------------------- */


    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier les catégories et avez besoin d'aide.

    À plus !


    Dernière édition par Onyx le Jeu 11 Fév 2016 - 0:39, édité 4 fois


    FémininAge : 24Message(s) : 1354

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Mer 10 Fév 2016 - 23:24
    Merci pour le partage !
    FémininAge : 23Message(s) : 2327

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Jeu 11 Fév 2016 - 0:21
    Youupii ma super commande en LS cheers
    Les autres vont pouvoir enfin profiter de ces belles catégorie :love:


    Absente pour une durée indéterminée.
    FémininAge : 22Message(s) : 2466

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Jeu 11 Fév 2016 - 0:38
    Ouais, disons que je suis en retard, j'ai fait plusieurs commandes sans avoir eu le temps de faire le LS, alors j'essaie de me rattraper u_u


    FémininAge : 23Message(s) : 2327

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Jeu 11 Fév 2016 - 2:43
    Hihi je t'envoie tout plein d'onde positive et du chocolat pour le courage :cow:

    EDIT : Je viens de me souvenir que j'ai découvert un bogue avec les catégories ^^
    Si le texte ne dépasse une ligne la catégorie ne prend pas toute la longueur. Voilà le sujet qui explique le problème plus en profondeur et l'aide apporter par Nihil :)


    Absente pour une durée indéterminée.
    FémininAge : 17Message(s) : 31
    Inwë
    le Jeu 14 Avr 2016 - 15:42
    C'est bien classe tout ça *^* ! Merci du partage !
    FémininAge : 13Message(s) : 25

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Margaux E.
    le Sam 16 Avr 2016 - 13:28
    Merci
    MasculinAge : 23Message(s) : 13
    ceschosesetranges
    le Sam 23 Avr 2016 - 16:25
    Wow comme c'est beau oxo ! Ca a un côté sérieux et classe très agréable, j'adore !
    Merci !
    MasculinAge : 18Message(s) : 27
    Knobul
    le Lun 9 Mai 2016 - 11:30
    Merci
    MasculinAge : 20Message(s) : 4
    RapContenderswb
    le Jeu 19 Mai 2016 - 21:42
    merci :)
    FémininAge : 19Message(s) : 47
    Discorde
    le Ven 3 Juin 2016 - 14:47
    Merci
    FémininAge : 17Message(s) : 44
    Amaliiah
    le Mar 21 Juin 2016 - 7:57
    Merci ! Very Happy
    MasculinAge : 53Message(s) : 297

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kâ Lys
    le Jeu 18 Aoû 2016 - 4:19
    C'est bien jolie tout ça, bravo. ^^


    FémininAge : 24Message(s) : 30
    Sestren
    le Dim 18 Sep 2016 - 19:10
    Merchi :3
    FémininAge : 35Message(s) : 163
    Eshon
    le Lun 19 Sep 2016 - 11:30
    Merci !
    Contenu sponsorisé
    Aujourd'hui à 23:48

      La date/heure actuelle est Jeu 29 Sep 2016 - 23:48