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/Noires plutôt basiques

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le 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 Jeu 31 Mai 2018 - 2:41, édité 1 fois



    avatar
    Professeur Felyne
    MasculinAge : 32Messages : 84

    le Ven 6 Nov 2015 - 23:53

    Merci ^^



    .
    avatar
    Cruelly
    FémininAge : 25Messages : 2570

    le Lun 16 Nov 2015 - 22:06

    Merci <3



    Présence réduite pour le moment.
    avatar
    Kelalin
    FémininAge : 25Messages : 1938

    le Lun 16 Nov 2015 - 22:18

    Merci pour le partage !
    avatar
    Allison01
    FémininAge : 34Messages : 199

    le Ven 11 Mar 2016 - 16:11

    merci ^^
    avatar
    Whit
    FémininAge : 20Messages : 154

    le Ven 11 Mar 2016 - 16:37

    Merci !
    avatar
    Clémentine
    FémininAge : 26Messages : 223

    le Sam 12 Mar 2016 - 21:46

    Merci *_*



    avatar
    Fame
    MasculinAge : 28Messages : 231

    le Sam 9 Avr 2016 - 16:58

    merci
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Dim 5 Juin 2016 - 21:47

    Merci
    avatar
    cali60
    FémininAge : 33Messages : 58

    le Dim 19 Juin 2016 - 21:01

    :) :)
    avatar
    dean winchester
    MasculinAge : 24Messages : 85

    le Dim 17 Juil 2016 - 20:39

    merci
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Jeu 21 Juil 2016 - 0:54

    merci
    avatar
    Crazy-Sweet
    FémininAge : 27Messages : 128

    le Lun 8 Aoû 2016 - 14:41

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



    What if I need you baby?
    I PROMISE THAT ONE DAY I’LL BE AROUND, I’LL KEEP YOU SAFE ! IT'S SUCH A CRUEL WORLD BUT I FOUND SOMETHING GOOD.. ‘CAUSE IN ALL THIS BITTERNESS YOU STAY SO SWEET ...
    avatar
    megb59
    FémininAge : 24Messages : 105

    le Sam 13 Aoû 2016 - 10:30

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

    le Lun 15 Aoû 2016 - 21:50

    Merci pour ces codages ! Simple mais très beau ! :coeur:
    avatar
    charly45700
    MasculinAge : 21Messages : 30

    le Ven 2 Sep 2016 - 11:37

    merci
    avatar
    Ohana Firefly
    FémininAge : 23Messages : 43

    le Sam 17 Sep 2016 - 19:19

    Merci Very Happy
    avatar
    SuperSpaceCab
    MasculinAge : 33Messages : 36

    le Mer 21 Sep 2016 - 6:26

    Merci !
    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Dim 25 Sep 2016 - 19:53

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

    le Mar 11 Oct 2016 - 19:36

    Merci Wink <3
    avatar
    Seano'k
    MasculinAge : 21Messages : 20

    le Lun 17 Oct 2016 - 17:44

    Merci :) !
    avatar
    Donquichotte
    MasculinAge : 22Messages : 48

    le Jeu 3 Nov 2016 - 1:09

    merci
    avatar
    Géranium
    FémininAge : 18Messages : 56

    le Dim 13 Nov 2016 - 16:47

    Merci ! Very Happy
    avatar
    Eime
    FémininAge : 21Messages : 15

    le Mar 15 Nov 2016 - 18:25

    Merci
    Alancar
    MasculinAge : 21Messages : 57

    le Jeu 17 Nov 2016 - 18:12

    Merci beaucoup :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Juil 2018 - 12:45