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 simplettes

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Mer 26 Nov 2014 - 3:06

    Rappel du premier message :




    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 Mer 30 Mai 2018 - 20:46, édité 20 fois



    avatar
    Nyusu97
    FémininAge : 21Messages : 60

    le Mer 8 Avr 2015 - 14:11

    Merci ! ♥



    avatar
    Sweetdead
    FémininAge : 22Messages : 38

    le Ven 10 Avr 2015 - 18:01

    Wow o_o Merci beaucoup !
    avatar
    alex24d
    FémininAge : 30Messages : 95

    le Ven 10 Avr 2015 - 18:44

    j'aime beaucoup
    avatar
    Saphire
    FémininAge : 21Messages : 146

    le Sam 11 Avr 2015 - 9:34

    merci !!
    avatar
    Nyusu97
    FémininAge : 21Messages : 60

    le Lun 13 Avr 2015 - 14:25

    Bonjour,

    Je me permet de poster ici car j'ai un petit soucis avec le code. Lorsqu'un nouveau message est posté, la petite enveloppe/image que je souhaite mettre n’apparaît pas. J'ai essayé diverses possibilité comme mettre l'image dans les mini icone, mais il n'y a rien à faire. J'ai pourtant fait tout ce que vous avez décrit.
    Mon forum est en PHBB2.

    Voilà, pardonnez-moi de poster ici, j'espère que cela ne posera pas de soucis, sinon, je posterais un message d'aide.

    Je vous remercie d'avance pour votre aide.

    Cordialement,
    Nyusu97.



    Catblack
    FémininAge : 22Messages : 85

    le Lun 13 Avr 2015 - 18:43

    merci
    avatar
    MLD
    FémininAge : 25Messages : 87

    le Sam 18 Avr 2015 - 9:54

    Merci du partage !
    avatar
    Ab0utxMe
    FémininAge : 23Messages : 185

    le Sam 18 Avr 2015 - 11:38

    Merci :3



    avatar
    Ronron
    FémininAge : 22Messages : 68

    le Mer 22 Avr 2015 - 15:05

    Merci !
    avatar
    servity
    MasculinAge : 46Messages : 82

    le Ven 24 Avr 2015 - 18:18

    merci beaucoup



    avatar
    Susu-chan
    FémininAge : 28Messages : 78

    le Ven 24 Avr 2015 - 21:48

    C'est très jolie, merci beaucoup !
    avatar
    misssrubi
    FémininAge : 27Messages : 66

    le Dim 26 Avr 2015 - 2:34

    C'est bien fait ♥ merci :brille:



    avatar
    AQW
    FémininAge : 24Messages : 224

    le Dim 26 Avr 2015 - 11:15

    Merci beaucoup o/



    Blblbl. ♥
    avatar
    Lal
    FémininAge : 27Messages : 48

    le Ven 1 Mai 2015 - 13:45

    Trop cool ! C'est superbe, je prend sans hésitation, encore une fois merci beaucoup ! =)
    avatar
    Izaya Orihara
    FémininAge : 17Messages : 105

    le Lun 4 Mai 2015 - 11:03

    Merci pour le partage.
    avatar
    Amasis
    FémininAge : 45Messages : 307

    le Mer 6 Mai 2015 - 17:27

    Merci pour ce code simple et efficace. :)
    avatar
    Mystick
    FémininAge : 33Messages : 100

    le Jeu 7 Mai 2015 - 14:51

    merci du partage
    Hop80
    MasculinAge : 29Messages : 138

    le Ven 8 Mai 2015 - 0:44

    trop bien
    avatar
    summerby
    FémininAge : 24Messages : 36

    le Mar 12 Mai 2015 - 9:58

    super sympa (a)
    avatar
    fancy
    MasculinAge : 28Messages : 34

    le Mar 12 Mai 2015 - 13:30

    Merci infiniment du partage Very Happy
    Malbe
    FémininAge : 22Messages : 27

    le Mar 12 Mai 2015 - 17:45

    Merci beaucoup ! :gene:
    Alancar
    MasculinAge : 21Messages : 57

    le Mar 12 Mai 2015 - 18:50

    Très jolie :) merci beaucoup
    avatar
    .SaKou.
    FémininAge : 22Messages : 57

    le Mer 13 Mai 2015 - 17:00

    merci



    avatar
    Llariarith
    FémininAge : 33Messages : 217

    le Jeu 14 Mai 2015 - 12:01

    Merci !
    avatar
    LyN[ss]
    FémininAge : 26Messages : 105

    le Jeu 14 Mai 2015 - 19:00

    Très jolies catégories ! Merci infiniment pour ce partage. Comme leur nom l'indique, elles sont toutes simplounettes et facilement personnalisable je trouve. En bref du bon boulot =)
    Contenu sponsorisé


      La date/heure actuelle est Lun 22 Oct 2018 - 23:15