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 : -13%
APPLE AirPods 4 2024 à 129€ (119€ ...
Voir le deal
129 €

    Catégories Grises en Tableau

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

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



    Anonymous
    Invité

    Jeu 11 Fév 2016 - 0:24

    Merci pour le partage !
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    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:



    :heart: :heart:
    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    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



    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    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 :)



    :heart: :heart:
    Inwë
    Inwë
    FémininAge : 25Messages : 36

    Jeu 14 Avr 2016 - 17:42

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

    Sam 16 Avr 2016 - 15:28

    Merci
    ceschosesetranges
    ceschosesetranges
    MasculinAge : 31Messages : 14

    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 !
    Knobul
    Knobul
    MasculinAge : 26Messages : 30

    Lun 9 Mai 2016 - 13:30

    Merci
    RapContenderswb
    RapContenderswb
    MasculinAge : 29Messages : 4

    Jeu 19 Mai 2016 - 23:42

    merci :)
    Discorde
    Discorde
    FémininAge : 24Messages : 63

    Ven 3 Juin 2016 - 16:47

    Merci



    Recherche d'avatar ! Ça se passe ici : www
    Amaliiah
    Amaliiah
    FémininAge : 26Messages : 50

    Mar 21 Juin 2016 - 9:57

    Merci ! Very Happy
    Kâ Lys
    Kâ Lys
    MasculinAge : 32Messages : 299

    Jeu 18 Aoû 2016 - 6:19

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



    Catégories Grises en Tableau Bug
    Sestren
    Sestren
    Autre / Ne pas divulguerAge : 32Messages : 36

    Dim 18 Sep 2016 - 21:10

    Merchi :3
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Lun 19 Sep 2016 - 13:30

    Merci !
    Ombresia
    Ombresia
    FémininAge : 29Messages : 46

    Sam 8 Oct 2016 - 16:27

    Merci ^_^
    Seano'k
    Seano'k
    MasculinAge : 28Messages : 20

    Lun 17 Oct 2016 - 17:47

    Sympa Very Happy
    ByWammer
    ByWammer
    MasculinAge : 54Messages : 3

    Sam 5 Nov 2016 - 18:11

    Merci beaucoup!
    Safaya
    Safaya
    FémininAge : 27Messages : 23

    Dim 12 Fév 2017 - 21:59

    merci ^-^
    Marianinna
    Marianinna
    FémininAge : 33Messages : 19

    Mar 25 Avr 2017 - 16:39

    merci
    Roxye
    Roxye
    FémininAge : 31Messages : 59

    Lun 12 Fév 2018 - 13:11

    Merci ♥
    .Lucifer.
    .Lucifer.
    MasculinAge : 51Messages : 184

    Ven 16 Mar 2018 - 8:24

    Merci beaucoup pour ce partage ! Wink



    Catégories Grises en Tableau 978358Divine
    Insane paper-plane
    Insane paper-plane
    FémininAge : 28Messages : 140

    Ven 20 Avr 2018 - 1:04

    Merci beaucoup :)
    Pedio
    Pedio
    MasculinAge : 26Messages : 4

    Sam 28 Avr 2018 - 14:29

    Merci :)
    Niyhla66
    Niyhla66
    FémininAge : 31Messages : 9

    Mar 22 Oct 2019 - 20:58

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 23:33