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.


    Catégories Grises en Tableau

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Jeu 11 Fév 2016 - 0: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.



    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 31 Mai 2018 - 2:42, édité 5 fois



    avatar
    Kelalin
    FémininAge : 25Messages : 1945

    le Jeu 11 Fév 2016 - 0:24

    Merci pour le partage !
    avatar
    Cruelly
    FémininAge : 25Messages : 2571

    le Jeu 11 Fév 2016 - 1:21

    Youupii ma super commande en LS cheers
    Les autres vont pouvoir enfin profiter de ces belles catégorie :love:



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Jeu 11 Fév 2016 - 1: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



    avatar
    Cruelly
    FémininAge : 25Messages : 2571

    le Jeu 11 Fév 2016 - 3: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 :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Inwë
    FémininAge : 19Messages : 36

    le Jeu 14 Avr 2016 - 17:42

    C'est bien classe tout ça *^* ! Merci du partage !
    avatar
    Margaux E.
    FémininAge : 15Messages : 25

    le Sam 16 Avr 2016 - 15:28

    Merci
    avatar
    ceschosesetranges
    MasculinAge : 25Messages : 13

    le Sam 23 Avr 2016 - 18:25

    Wow comme c'est beau oxo ! Ca a un côté sérieux et classe très agréable, j'adore !
    Merci !
    avatar
    Knobul
    MasculinAge : 20Messages : 28

    le Lun 9 Mai 2016 - 13:30

    Merci
    avatar
    RapContenderswb
    MasculinAge : 22Messages : 4

    le Jeu 19 Mai 2016 - 23:42

    merci :)
    avatar
    Discorde
    FémininAge : 18Messages : 58

    le Ven 3 Juin 2016 - 16:47

    Merci
    avatar
    Amaliiah
    FémininAge : 19Messages : 50

    le Mar 21 Juin 2016 - 9:57

    Merci ! Very Happy
    avatar
    Kâ Lys
    MasculinAge : 55Messages : 299

    le Jeu 18 Aoû 2016 - 6:19

    C'est bien jolie tout ça, bravo. ^^



    avatar
    Sestren
    FémininAge : 26Messages : 35

    le Dim 18 Sep 2016 - 21:10

    Merchi :3
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Lun 19 Sep 2016 - 13:30

    Merci !
    avatar
    Ombresia
    FémininAge : 22Messages : 46

    le Sam 8 Oct 2016 - 16:27

    Merci ^_^
    avatar
    Seano'k
    MasculinAge : 21Messages : 20

    le Lun 17 Oct 2016 - 17:47

    Sympa Very Happy
    avatar
    ByWammer
    MasculinAge : 48Messages : 3

    le Sam 5 Nov 2016 - 18:11

    Merci beaucoup!
    avatar
    Safaya
    FémininAge : 20Messages : 23

    le Dim 12 Fév 2017 - 21:59

    merci ^-^
    avatar
    Marianinna
    FémininAge : 26Messages : 18

    le Mar 25 Avr 2017 - 16:39

    merci
    avatar
    Roxye
    FémininAge : 25Messages : 42

    le Lun 12 Fév 2018 - 13:11

    Merci ♥
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Ven 16 Mar 2018 - 8:24

    Merci beaucoup pour ce partage ! Wink



    avatar
    Insane paper-plane
    FémininAge : 22Messages : 139

    le Ven 20 Avr 2018 - 1:04

    Merci beaucoup :)
    avatar
    Pedio
    MasculinAge : 20Messages : 4

    le Sam 28 Avr 2018 - 14:29

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 18:54