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.

-60%
Le deal à ne pas rater :
OtterBox – Batterie externe avec chargement sans fil Qi 15000 mAh ...
19.99 € 49.99 €
Voir le deal

    Catégories simplettes

    Onyx
    Onyx
    FémininAge : 31Messages : 3350

    Mer 26 Nov 2014 - 2: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 Ven 26 Juin 2020 - 20:10, édité 21 fois



    Carmina
    Carmina
    FémininAge : 38Messages : 506

    Ven 12 Déc 2014 - 8:48

    waw j'adore!
    Ashem
    Ashem
    FémininAge : 39Messages : 255

    Ven 12 Déc 2014 - 14:37

    Merci
    ~Nodoka~
    ~Nodoka~
    FémininAge : 27Messages : 185

    Ven 12 Déc 2014 - 14:48

    merciii!
    0smose
    0smose
    FémininAge : 29Messages : 167

    Ven 12 Déc 2014 - 17:33

    JE PREND !! :3



    Catégories simplettes - Page 2 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Oror
    Oror
    FémininAge : 34Messages : 97

    Sam 13 Déc 2014 - 12:03

    Merci du partage ! =)



    Catégories simplettes - Page 2 351490minion
    Faraday
    Faraday
    FémininAge : 34Messages : 39

    Sam 13 Déc 2014 - 16:40

    Thank's
    Nyan-cat
    Nyan-cat
    FémininAge : 26Messages : 326

    Dim 14 Déc 2014 - 7:26

    merci c'est super !



    Catégories simplettes - Page 2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    SpicAsh
    SpicAsh
    FémininAge : 28Messages : 176

    Lun 15 Déc 2014 - 10:07

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

    Lun 15 Déc 2014 - 21:36

    très joli !!!
    DixieM.
    DixieM.
    FémininAge : 33Messages : 49

    Mer 17 Déc 2014 - 13:42

    C'est super beaaaaau *.*
    Crowley
    Crowley
    FémininAge : 28Messages : 68

    Mer 17 Déc 2014 - 18:05

    J'aime beaucoup, merci du partage :)
    Aeeklez
    Aeeklez
    FémininAge : 33Messages : 37

    Jeu 18 Déc 2014 - 14:15

    Vraiment sympa ! Merci :nanere:
    Nawak
    Nawak
    FémininAge : 27Messages : 112

    Sam 20 Déc 2014 - 14:14

    Merci beaucoup !



    Catégories simplettes - Page 2 Umbrel10
    missphan
    missphan
    FémininAge : 41Messages : 156

    Dim 21 Déc 2014 - 21:11

    ca collera parfaitement à mon forum merci
    Draly
    Draly
    FémininAge : 32Messages : 120

    Jeu 25 Déc 2014 - 13:45

    Merci beaucoup.:p
    petit lu
    petit lu
    FémininAge : 32Messages : 184

    Jeu 25 Déc 2014 - 18:54

    Très joli, merci ♥
    Candy Libertine
    Candy Libertine
    FémininAge : 26Messages : 136

    Ven 26 Déc 2014 - 17:57

    Merci :/3
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Ven 26 Déc 2014 - 18:14

    vraiment jolie, merci !
    Lyu
    Lyu
    FémininAge : 27Messages : 12

    Ven 26 Déc 2014 - 21:45

    Merci beaucoup, c'est magnifique. ♥
    Xélore
    Xélore
    MasculinAge : 28Messages : 55

    Ven 26 Déc 2014 - 23:57

    merci Very Happy
    So-chan
    So-chan
    FémininAge : 34Messages : 61

    Sam 27 Déc 2014 - 23:53

    C'est original comme création, et j'aime beaucoup le rendu. Merci du partage !
    Deadpoolio
    Deadpoolio
    MasculinAge : 34Messages : 277

    Dim 28 Déc 2014 - 10:27

    C'est très joli pour une catégorie dite "simplette"
    merci :)
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 26Messages : 110

    Dim 28 Déc 2014 - 17:08

    Wahou simple, mais bien fait.
    avatar
    Kakure
    FémininAge : 29Messages : 13

    Dim 28 Déc 2014 - 18:47

    MERCI!!! ^^
    Neithan
    Neithan
    MasculinAge : 28Messages : 28

    Lun 29 Déc 2014 - 1:41

    Merci !!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 7:30