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.

Le Deal du moment :
Enceinte portable JBL Clip 4 Bluetooth Noir à ...
Voir le deal
29 €

    Catégories Grises en Tableau

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Jeu 11 Fév 2016 - 0:14

    Rappel du premier message :

    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.





    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 Ven 26 Juin 2020 - 22:30, édité 6 fois



    Titotte
    Titotte
    FémininAge : 29Messages : 9

    Sam 28 Nov 2020 - 14:26

    Vraiment sympa ces catégories. Simple comme j'aime :) ça fait trois plombes que je galère à personnaliser seule mes catégories, j'ai l'impression de tout le temps tout casser XD ça m'a du coup aidée à mieux comprendre comment que ça fonctionne. Merci du partage :)

      La date/heure actuelle est Jeu 12 Déc 2024 - 9:20