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.


    Catégories Grises/Noires plutôt basiques

    Onyx
    Onyx
    FémininAge : 27Messages : 3321

    Dim 3 Mai 2015 - 3:39



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



    Professeur Felyne
    Professeur Felyne
    MasculinAge : 35Messages : 85

    Ven 6 Nov 2015 - 23:53

    Merci ^^



    .
    Cruelly
    Cruelly
    FémininAge : 27Messages : 2605

    Lun 16 Nov 2015 - 22:06

    Merci <3



    :heart: :heart:
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2425

    Lun 16 Nov 2015 - 22:18

    Merci pour le partage !
    Allison01
    Allison01
    FémininAge : 36Messages : 225

    Ven 11 Mar 2016 - 16:11

    merci ^^
    Whit
    Whit
    FémininAge : 23Messages : 154

    Ven 11 Mar 2016 - 16:37

    Merci !
    Clémentine
    Clémentine
    FémininAge : 28Messages : 223

    Sam 12 Mar 2016 - 21:46

    Merci *_*



    Catégories Grises/Noires plutôt basiques 9w9t
    Fame
    Fame
    MasculinAge : 30Messages : 240

    Sam 9 Avr 2016 - 16:58

    merci
    Madras
    Madras
    FémininAge : 35Messages : 282

    Dim 5 Juin 2016 - 21:47

    Merci
    cali60
    cali60
    FémininAge : 35Messages : 58

    Dim 19 Juin 2016 - 21:01

    :) :)
    dean winchester
    dean winchester
    MasculinAge : 26Messages : 85

    Dim 17 Juil 2016 - 20:39

    merci
    Thanos
    Thanos
    MasculinAge : 25Messages : 84

    Jeu 21 Juil 2016 - 0:54

    merci
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 29Messages : 131

    Lun 8 Aoû 2016 - 14:41

    C'est super, merci à toi ! J'adore !




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    megb59
    megb59
    FémininAge : 26Messages : 111

    Sam 13 Aoû 2016 - 10:30

    Ce code est super bien! Very Happy Merci a toi!
    Wavy
    Wavy
    FémininAge : 19Messages : 39

    Lun 15 Aoû 2016 - 21:50

    Merci pour ces codages ! Simple mais très beau ! :coeur:
    charly45700
    charly45700
    MasculinAge : 24Messages : 31

    Ven 2 Sep 2016 - 11:37

    merci
    Ohana Firefly
    Ohana Firefly
    FémininAge : 25Messages : 43

    Sam 17 Sep 2016 - 19:19

    Merci Very Happy
    SuperSpaceCab
    SuperSpaceCab
    MasculinAge : 36Messages : 36

    Mer 21 Sep 2016 - 6:26

    Merci !
    Féhéla
    Féhéla
    FémininAge : 47Messages : 238

    Dim 25 Sep 2016 - 19:53

    merci du partage !
    Dacina moe
    Dacina moe
    FémininAge : 42Messages : 171

    Mar 11 Oct 2016 - 19:36

    Merci Wink <3
    Seano'k
    Seano'k
    MasculinAge : 24Messages : 20

    Lun 17 Oct 2016 - 17:44

    Merci :) !
    Donquichotte
    Donquichotte
    MasculinAge : 25Messages : 48

    Jeu 3 Nov 2016 - 1:09

    merci
    Géranium
    Géranium
    FémininAge : 20Messages : 56

    Dim 13 Nov 2016 - 16:47

    Merci ! Very Happy
    Eime
    Eime
    FémininAge : 24Messages : 15

    Mar 15 Nov 2016 - 18:25

    Merci
    avatar
    Alancar
    MasculinAge : 23Messages : 57

    Jeu 17 Nov 2016 - 18:12

    Merci beaucoup :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 7 Mar 2021 - 16:42