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 :
SAMSUNG Galaxy A14 5G Noir 64 Go à 98,49€
Voir le deal
98.49 €

    Catégories simplettes

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 26 Nov 2014 - 3:06



    Catégories Simplettes


    Voici un petit LS de catégories que j'ai faites pour la demande de The One Pandemonium et que j'ai un peu remaniées. D'ailleurs, il y a un LS de Liste de sujets Simplette qui l'accompagne.

    Pour voir l'aperçu : cliquez ici.

    Effet : Au passage de la souris sur l'image de description de forum, les sous-forums apparaissent par-dessus sur fond noir semi-transparent (voir l'image de la première description de forum sur l'aperçu).

    Ce LS est en trois 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.
    • Finalement, nous allons mettre un code dans les descriptions de forums et voir où éditer l'image et la description des forums.


    - 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.
    - Les catégories ont une largeur de 850px.

    Mettre un crédit vers Never-Utopia est obligatoire.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





    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:
    <link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
      <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="cate" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody>
      <tr>
        <td width="100%" valign="middle" align="center">
          <span class="cate_title">
            {catrow.tablehead.L_FORUM}
          </span>
        </td>
      </tr>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <tr>
        <td align="center" valign="center">
          <div class="forum">
            <div class="forum_top">
              <div class="forum_top_left">
                <span class="forumlink">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
          </span>
                <br />
                <span class="forum_stats">
                  Sujets: <em>{catrow.forumrow.TOPICS}</em> | Messages: <em>{catrow.forumrow.POSTS}</em>
                </span>
              </div>
              <div class="forum_top_right">
                <span class="forum_last_mess">
                  <span id="forum_last_mess2">
                    {catrow.forumrow.LAST_POST}
                  </span>
                </span>
                <script type="text/javascript">
                  jQuery('#forum_last_mess2').html(jQuery('#forum_last_mess2').html().replace(/<br>/g,'')).removeAttr('id');
                </script>
              </div>
            </div>
            <div class="forum_bottom">
              <div class="forum_desc">
                {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="forum_bloc_sous_forums">
                <div class="forum_sous_forums">
                  <span id="forum_sous_forums2">
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                  </span>
                </div>
                <script type="text/javascript">
                  jQuery('#forum_sous_forums2').html(jQuery('#forum_sous_forums2').html().replace(/, /g,'<br />')).removeAttr('id');
                </script>
              </div>
            </div>
          </div>
        </td>
      </tr>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
      </tbody></table>
    <!-- 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 CATÉGORIES *******************************************************/


    /*Catégorie*/
    .cate {
      margin: auto;
      margin-bottom: 10px;
      padding-bottom: 5px;
      background-color: #0f120f;
      border: 2px solid #1f1d1a;
      width: 850px;
    }

    /*Fond du titre de la catégorie*/
    span.cate_title {
      display: block;
      background-image: url('http://img4.hostingpics.net/pics/781032956965Sanstitre.png');
      width: 750px;
      margin: 15px;
      padding: 5px;
    }
    /*Titre de la catégorie*/
    .cate_title h2 {
      display: block;
      margin: 0px;
      padding: 0px;
      font-family: 'Great Vibes';
      font-size: 36px;
      text-shadow: 0px 0px 5px #000000;
      color: #23709e;
      font-weight: normal;
      letter-spacing: 1px;
    }


    /*Bloc de chaque forum*/
    .forum {
      width: 740px;
      height: 199px;
      margin: auto;
      margin-bottom: 10px;
      padding: 10px;
      background-image: url('http://image.noelshack.com/fichiers/2014/48/1416945713-pattern.png');
      text-align: center;
      color: #7b848f;
    }


    /*Section du haut du forum*/
    .forum_top {
      width: 718px;
      height: 30px;
      margin: auto;
      padding: 10px;
      background-color: #1f1d1a;
      border: 1px solid #161412;
    }

    /*Section de gauche avec le titre et les stats*/
    .forum_top_left {
      float: left;
      width: 430px;
      text-align: left;
    }
    /*Titre du forum*/
    a.forumlink {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      text-shadow: 1px 1px 1px #000000;
      color: #23709e!important;
      font-style: italic;
      font-weight: normal;
      letter-spacing: 2px;
      padding-bottom: 5px;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre du forum survolé*/
    a.forumlink:hover {
      text-decoration: none!important;
      letter-spacing: 4px;
    }
    /*Statistiques*/
    .forum_stats {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }

    /*Section de gauche avec le dernier message*/
    .forum_top_right {
      position: relative;
      float: left;
      width: 278px;
      margin-left: 10px;
      text-align: left;
    }
    /*Dernier message*/
    .forum_last_mess {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #7b848f;
    }
    /*Placement du titre du dernier message*/
    .forum_last_mess a {
      display: block;
      margin-left: 28px;
      margin-bottom: 3px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
    }
    /*Placement de l'image du dernier message*/
    .forum_last_mess span > a:nth-last-of-type(1) img {
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 0px;
      margin-left: 0px;
      width: 24px;
      height: 14px;
    }
    /*Mise en forme de l'auteur du dernier message*/
    .forum_last_mess a.gensmall, .forum_last_mess a.gensmall strong {
      display: inline;
      margin-left: 5px;
      margin-bottom: 0px;
      font-family: arial;
      font-style: normal;
      font-weight: normal!important;
      font-variant: normal;
      font-size: 12px;
      text-shadow: 1px 1px 1px #101010;
    }


    /*Section du bas du forum*/
    .forum_bottom {
      position: relative;
      width: 740px;
      height: 137px;
      margin: auto;
      margin-top: 10px;
    }

    /*Bloc de la description du forum*/
    .forum_desc {
      float: left;
    }
    /*Cadre de l'image de la description*/
    .forum_desc_img_cadre {
      float: left;
      width: 250px;
      height: 125px;
      padding: 5px;
      background-color: #1f1d1a;
      border: 1px solid #161412;
    }
    /*Image de la description*/
    .forum_desc img {
      width: 250px;
      height: 125px;
    }
    /*Description du forum*/
    .forum_desc_desc {
      float: left;
      width: 452px;
      height: 125px;
      margin-top: 6px;
      padding-left: 20px;
      padding-right: 5px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      text-align: justify;
      overflow: auto;
    }

    /*Bloc sous les sous-forums*/
    .forum_bloc_sous_forums {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 250px;
      height: 125px;
      z-index: 1;
    }
    /*Sous-forums*/
    .forum_sous_forums {
      width: 240px;
      height: 115px;
      padding: 5px;
      text-align: justify;
      opacity: 0;
      background-color: rgba(0,0,0,0.8);
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Apparition des Sous-forums*/
    .forum_bloc_sous_forums:hover .forum_sous_forums {
      opacity: 1;
    }

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

    Voilà, c'était tout pour cette partie \o/




    3. Descriptions de forum



    C'est bien beau, mais il nous manque quand même des choses. Dans les descriptions des forums, il va y avoir l'image de la description et la description elle-même.

    Pour les mettre, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > GÉNÉRAL
    > > > FORUM
    > > > > CATÉGORIES ET FORUMS

    Puis, vous aller pouvoir mettre ce code à la place de vos descriptions de forum. L'image de chaque forum peut être modifiée et la description en elle-même va à la place du charabia en latin :
    Code:
    <div class="forum_desc_img_cadre"><img src="http://img4.hostingpics.net/pics/288541imagedescription.png" alt="Image de la description du forum" /></div><div class="forum_desc_desc">Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.</div>

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

    À plus !


    Dernière édition par Onyx le Ven 26 Juin 2020 - 22:10, édité 21 fois



    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 26 Nov 2014 - 3:26

    Je touche a rien promis !
    Mais j'ai une petite question concernant les catégories le forum de The One Pandemonium est en PHPBB3 est-ce qu'il y a moyen de les mettre en format PHPBB2 ?

    Sinon je voulais aussi ajouter qu'elles sont tout simplement sublime :)



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

    Mer 26 Nov 2014 - 3:50

    Il n'y a pas d'inversion par hasard? Tout est codé pour PHPBB2, pas PHPBB3 ^^

    Et merci beaucoup ^^



    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 26 Nov 2014 - 4:43

    C'est possible j'avais lu dans sa demande que c'était PHPBB3 mais remarque ce n'est pas moi la codeuse loin de la :) Et que veux dire par Il n'y a pas d'inversion par hasard? ?



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

    Mer 26 Nov 2014 - 5:18

    Je voulais dire inverser les deux versions ^^

    Tu as raison, il avait bien demandé PHPBB3 et comme une idiote, j'ai codé pour PHPBB2...
    Après vérifications, il s'était trompé en indiquant sa version parce que j'ai vérifié et il a bel et bien la version PHPBB2.

    Bref, tout cela pour dire que cela a été codé pour PHPBB2, pas PHPBB3.



    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mer 26 Nov 2014 - 5:24

    Les erreurs sa arrive a tout le monde :)
    Moi sa fais mon bonheur quand elles vont être prête a l'emploie c'est sur que je vais les prendre ^^ Encore une vois elles sont sublime Very Happy



    :heart: :heart:
    Aile
    Aile
    FémininAge : 36Messages : 134

    Dim 30 Nov 2014 - 20:39

    Tout comme la liste des sujets; c'est vraiment beau!!



    Catégories simplettes 799284Sanstitre1
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 1 Déc 2014 - 22:48

    Voilà, c'est terminé \o/

    Merci pour les commentaires ♥



    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Mar 2 Déc 2014 - 4:37

    Yapiii :)



    :heart: :heart:
    AwenWolf
    AwenWolf
    FémininAge : 36Messages : 76

    Jeu 4 Déc 2014 - 11:36

    Je trouve ça très jolie *_*
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Jeu 4 Déc 2014 - 21:26

    AAah je confirme, c'est vraiment super o_o



    Anonymous
    Invité

    Ven 5 Déc 2014 - 22:41

    Merci Wink
    cali60
    cali60
    FémininAge : 39Messages : 58

    Sam 6 Déc 2014 - 9:40

    merci :)
    EmYasmina
    EmYasmina
    FémininAge : 24Messages : 85

    Sam 6 Déc 2014 - 13:47

    Merci !
    Lutine
    Lutine
    FémininAge : 37Messages : 102

    Sam 6 Déc 2014 - 17:40

    Merci ! Très beau :)
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 33Messages : 131

    Lun 8 Déc 2014 - 9:32

    Je suis fan ! <3 Mici !




    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

    Darksoul666
    Darksoul666
    MasculinAge : 40Messages : 10

    Lun 8 Déc 2014 - 17:43

    merci
    Xperience
    Xperience
    FémininAge : 28Messages : 156

    Lun 8 Déc 2014 - 20:27

    Merci !



    Catégories simplettes 1453390429-tumblr-lv1fbrkxzh1qlnpia
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 8 Déc 2014 - 22:48

    J'adooore
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Mar 9 Déc 2014 - 8:15

    J'aime beaucoup merci
    Dydy
    Dydy
    FémininAge : 34Messages : 493

    Mar 9 Déc 2014 - 20:14

    Merci du partage ^^ c'est très beau ♥



    Catégories simplettes 27978_signature_never_utopia_dydy_2
    Stitch56
    Stitch56
    FémininAge : 31Messages : 209

    Mer 10 Déc 2014 - 12:50

    Merci
    Solitude
    Solitude
    FémininAge : 49Messages : 294

    Mer 10 Déc 2014 - 15:16

    Merci beaucoup



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Catégories simplettes Sign510
    Yumi-chan
    Yumi-chan
    FémininAge : 31Messages : 67

    Jeu 11 Déc 2014 - 4:25

    Trop beau ! *-*
    Merci !
    Alondite
    Alondite
    FémininAge : 32Messages : 40

    Jeu 11 Déc 2014 - 7:26

    Merci du partage !
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 8:02