AccueilRechercherS'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 : -28%
Ventilateur ROWENTA VU5640 TURBO SILENCE EXTRÊME
Voir le deal
71 €

    Catégories Grises/Noires plutôt basiques

    Onyx
    Onyx
    FémininAge : 26Messages : 3311

    le Dim 3 Mai 2015 - 3:39

    Rappel du premier message :




    Catégories Grises/Noires plutôt basiques


    Voici un petit LS de catégories très simples que j'ai faites pour la demande de Shakespeare.

    Pour voir l'aperçu : cliquez ici.

    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.


    - La version du forum doit être PhpBB2.
    - Pour ce qui est de l'hiérarchie et la structure des catégories, il faut choisir "Séparer sur l'index : Moyen".
    - Les catégories ont une largeur d'environ 800 pixels.
    - Ce LS est fait pour des forums avec des noms assez courts parce qu'il n'y a pas beaucoup d'espace pour le nom.

    Mettre un crédit vers Never-Utopia est obligatoire.



    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 -->
    <div class="categorie">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <div class="forum_bloc">
        <div class="forum_title">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
            {catrow.forumrow.FORUM_NAME}
          </a>
        </div>
        <div class="forum_stats">
          {catrow.forumrow.POSTS} messages et {catrow.forumrow.TOPICS}&nbsp;sujets
        </div>
        <div style="clear: both;"></div>
        <div class="forum_desc">
          <div class="forum_desc_desc">
            {catrow.forumrow.FORUM_DESC}
          </div>
        </div>
        <div class="forum_middle_bloc">
          <div class="forum_old_new_lock_img">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </div>
          <div class="forum_last_mess">
            {catrow.forumrow.LAST_POST}
          </div>
        </div>
        <div class="forum_sous_forums">
          <div class="forum_sous_forums_over">
            <span id="forum_sf">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <script type="text/javascript">jQuery('#forum_sf').html(jQuery('#forum_sf').html().replace(/, /g,',<br />')).removeAttr('id');</script>
          </div>
        </div>
        <div style="clear: both;">
        </div>
      </div>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
    <!-- 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: 790px;
      margin: auto;
      margin-bottom: 15px;
      color: #656565;
    }

    /*Liens des catégories*/
    .categorie a, .categorie a.gensmall, .categorie .gensmall a {
      text-decoration: none!important;
      color: #757575;
    }
    /*Liens survolés des catégories*/
    .categorie a:hover, .categorie a.gensmall:hover, .categorie .gensmall a:hover {
      text-decoration: none!important;
      color: #a5a5a5;
    }

    /*Bloc du titre de catégorie*/
    .cate_title {
      margin: auto;
      border-bottom: 8px double black;
      margin-bottom: 10px;
      text-align: center;
    }
    /*Titre de catégorie*/
    .cate_title h2 {
      display: inline-block;
      margin: 0px;
      margin-bottom: 5px;
      padding: 0px;
      font-family: verdana;
      font-weight: normal;
      font-size: 30px;
      text-align: center;
      color: #656565;
    }


    /*Bloc de forum*/
    .forum_bloc {
      width: 790px;
      height: 144px;
    }

    /*Bloc de titre de forum*/
    .forum_title {
      float: left;
      width: 360px;
      border-bottom: 2px solid black;
      height: 29px;
      text-align: left;
    }
    /*Titre de forum*/
    a.forumlink {
      display: inline-block;
      font-family: Verdana;
      color: #757575!important;
      font-size: 24px;
      font-weight: normal;
    }
    /*Titre survolé de forum*/
    a.forumlink:hover {
      color: #a5a5a5!important;
    }

    /*Statistiques*/
    .forum_stats {
      float: left;
      width: 440px;
      border-bottom: 2px solid black;
      height: 12px;
      padding-top: 17px;
      margin-left: -20px;
      margin-top: -3px;
      text-align: right;
      font-family: Verdana;
      font-size: 10px;
    }

    /*Bloc de description de forum*/
    .forum_desc {
      float: left;
      margin-top: 10px;
      padding: 1px;
      padding-right: 0px;
      width: 349px;
      height: 98px;
      background-color: black;
    }
    /*Description de forum*/
    .forum_desc_desc {
      height: 98px;
      width: 348px;
      padding-right: 1px;
      text-align: justify;
      overflow: auto;
      color: #d5d5d5;
      font-family: verdana;
      font-size: 10px;
    }

    /*Bloc image new old lock et dernier message*/
    .forum_middle_bloc {
      float: left;
      margin-top: 10px;
      margin-left: 15px;
      width: 205px;
      height: 100px;
      text-align: center;
    }
    /*Bloc image new old lock*/
    .forum_old_new_lock_img {
      width: 205px;
      margin-bottom: 10px;
    }

    /*Bloc dernier message*/
    .forum_last_mess {
      color: #656565;
      height: 50px;
      width: 205px;
      font-family: verdana;
      font-size: 10px;
    }

    /*Bloc des sous-forums*/
    .forum_sous_forums {
      float: left;
      margin-top: 10px;
      margin-left: 15px;
      width: 205px;
      height: 100px;
    }
    .forum_sous_forums_over {
      width: 200px;
      height: 100px;
      overflow: auto;
      padding-right: 5px;
      font-family: verdana;
      font-size: 10px;
    }

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


    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code" ou dans "Personnalisations" pour recevoir de l'aide.

    À plus !


    Dernière édition par Onyx le Jeu 31 Mai 2018 - 2:41, édité 1 fois



    PrincesseÔ
    PrincesseÔ
    FémininAge : 22Messages : 220

    le Mer 7 Déc 2016 - 15:33

    Merci beaucoup pour ce partage! ♥
    Adou6928
    Adou6928
    MasculinAge : 28Messages : 19

    le Mar 27 Déc 2016 - 9:27

    Bravo
    picka234
    picka234
    FémininAge : 55Messages : 547

    le Dim 8 Jan 2017 - 6:43

    cheers merci



    Catégories Grises/Noires plutôt basiques - Page 2 Signpi11
    Pull en Laine qui Gratte
    Pull en Laine qui Gratte
    FémininAge : 15Messages : 71

    le Mer 1 Fév 2017 - 13:49

    merci!
    Maxine Evans
    Maxine Evans
    FémininAge : 25Messages : 94

    le Mer 15 Fév 2017 - 21:24

    merci
    Likilou
    Likilou
    MasculinAge : 26Messages : 307

    le Lun 20 Mar 2017 - 18:18

    merci



    Catégories Grises/Noires plutôt basiques - Page 2 707828SignArthur2
    ArgelTown
    ArgelTown
    MasculinAge : 20Messages : 23

    le Mar 4 Avr 2017 - 19:53

    Merci beaucoup, c'est très jolie
    Adélia
    Adélia
    FémininAge : 22Messages : 21

    le Dim 14 Mai 2017 - 19:18

    merci :)
    PATAGON
    PATAGON
    FémininAge : 21Messages : 6

    le Sam 12 Aoû 2017 - 14:25

    merci !
    avatar
    Hop80
    MasculinAge : 30Messages : 138

    le Ven 20 Oct 2017 - 22:52

    Merci pour le partage
    icequeen38
    icequeen38
    FémininAge : 27Messages : 49

    le Ven 27 Oct 2017 - 10:54

    Bonjour,
    Merci pour ce partage.. puis-je m'en servir mon les mettres sur mon forum ? si j'ai bien tout compris ? d'avance merci de votre réponse
    icequeen38
    Lilypops
    Lilypops
    FémininAge : 34Messages : 32

    le Dim 25 Mar 2018 - 12:16

    Merci :love:



    Catégories Grises/Noires plutôt basiques - Page 2 Lison_10:euh:
    Niyhla66
    Niyhla66
    FémininAge : 26Messages : 9

    le Mar 22 Oct 2019 - 20:56

    MERCI
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mai 2020 - 13:11