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.


    Liste de sujets Simplette

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Mer 26 Nov 2014 - 9:14

    Rappel du premier message :


    Liste des sujets Simplette


    Voici un petit LS d'une liste des sujets que j'ai fait pour accompagner ces Catégories Simplettes que j'avais fait à la demande de The One Pandemonium.

    Pour voir l'aperçu : cliquez ici.

    Ce LS est en deux parties.
    • Tout d'abord, nous allons installer la liste de sujets dans le template.
    • Puis, nous allons la mettre en forme à l'aide du CSS.


    Idéalement, les images de "Lien dernière réponse" et "Lien dernière réponse - Nouveau" dans vos mini icônes ne devraient pas faire plus de 24 x 14 pixels.
    Cela a une largeur de 850 pixels.
    La version du forum est PHPBB2.

    Mettre un crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    1. La liste des sujets (Topics_List_Box)


    Nous allons commencer par aller dans les templates, plus précisément dans le template "Topics_List_Box" .

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > GÉNÉRAL
    > > > > > Topics_List_Box

    Puis, on va entièrement remplacer le template "Topics_List_Box" par ceci :
    Code:
    <!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
    <script type="text/javascript">
    function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
       var all_checked = true;
       for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
          }
       }
       document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
    }
    function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
       for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
          if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
             document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
          }
       }
    }
    </script>
    <!-- END multi_selection -->
    <link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
    <table class="sujets" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="center" align="center">
          <span class="sujets_top_title">
            Liste des sujets
          </span>
        </td>
      </tr>
      <tr>
        <td valign="middle" align="center">
          <table class="sujets_list" cellspacing="0" cellpadding="0">
            <tbody>
    <!-- END header_table -->
    <!-- BEGIN header_row -->
    <!-- END header_row -->
    <!-- BEGIN topic -->
              <tr>
                <td valign="middle" align="center" colspan="2">
                  <table class="sujet" cellspacing="7" cellpadding="0">
                    <tbody>
                      <tr>
                        <td valign="middle" align="left" width="210">
                          Composé par
                          <span class="sujet_auteur">
                            {topics_list_box.row.TOPIC_AUTHOR}
                          </span>
                          <br />
                          <span class="sujet_stats">
                            Réponses: <em>{topics_list_box.row.REPLIES}</em> | Vues: <em>{topics_list_box.row.VIEWS}</em>
                          </span>
                        </td>
                        <td valign="middle" align="center" width="320">
                          <div class="sujet_type">{topics_list_box.row.TOPIC_TYPE}</div>
                          <a class="sujetlink" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                          {topics_list_box.row.PARTICIPATE_POST_IMG}
                        </td>
                        <td valign="middle" align="right" width="210">
                          {topics_list_box.row.LAST_POST_IMG} {topics_list_box.row.LAST_POST_TIME}
                          <br />
                          Répondu par
                          <span class="sujet_last_auteur">
                            {topics_list_box.row.LAST_POST_AUTHOR}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
    <!-- END topic -->
    <!-- BEGIN no_topics -->
         <tr>
                <td valign="middle" align="center" colspan="2">
                  <table class="sujet" cellspacing="7" cellpadding="0">
                    <tbody>
                      <tr>
                        <td valign="middle" align="center">
                          <span class="sujets_font">
                            {topics_list_box.row.L_NO_TOPICS}
                          </span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
              </td>
       </tr>
    <!-- END no_topics -->
    <!-- BEGIN bottom -->
       <tr>
         <td align="left">
                <span class="sujets_font">
                   {PAGINATION}
                </span>
              </td>
         <td align="right">
                <a href="#top" class="sujets_font">
                  {L_BACK_TO_TOP}
                </a>&nbsp;
              </td>
       </tr>
    <!-- END bottom -->
    <!-- BEGIN footer_table -->
            </tbody>
          </table>
        </td>
      </tr>
    </table>
    <!-- END footer_table -->
    <!-- BEGIN spacer -->
    <br class="gensmall" />
    <!-- END spacer -->
    <!-- END row -->
    <!-- END topics_list_box -->



    2. Mise en forme (CSS)


    Si vous regardez vote liste, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons la mettre en forme à 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 Sujets *******************************************************/

    /*Bloc des sujets*/
    .sujets {
      margin: auto;
      margin-bottom: 10px;
      background-color: #0f120f;
      border: 2px solid #1f1d1a;
      padding-bottom: 15px;
      width: 850px;
    }
    /*Titre du bloc des sujets*/
    .sujets_top_title {
      display: block;
      background-image: url('http://img4.hostingpics.net/pics/781032956965Sanstitre.png');
      width: 750px;
      margin-top: 15px;
      margin-bottom: 15px;
      padding: 5px;
      font-family: 'Great Vibes';
      font-size: 36px;
      text-shadow: 0px 0px 5px #000000;
      color: #23709e;
      font-weight: normal;
      letter-spacing: 1px;
    }

    /*Liste des sujets*/
    .sujets_list {
      width: 760px;
      margin: auto;
      padding: 10px;
      padding-bottom: 0px;
      background-image: url('http://image.noelshack.com/fichiers/2014/48/1416945713-pattern.png');
      text-align: left;
      color: #7b848f;
    }

    /*Polices des éléments hors sujets*/
    .sujets_font {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
      color: #7b848f;
    }

    /*Chaque sujet*/
    .sujet {
      position: relative;
      width: 740px;
      margin-bottom: 10px;
      background-color: #1f1d1a;
      border: 1px solid #161412;
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }

    /*Type de sujet*/
    .sujet_type {
      position: absolute;
      width: 740px;
      text-align: center;
      top: -7px;
      left: 0px;
      text-shadow: 1px 1px 1px #000000;
    }

    /*Titre du sujet*/
    a.sujetlink {
      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;
      text-decoration: none;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre du sujet survolé*/
    a.sujetlink:hover {
      text-decoration: none!important;
      letter-spacing: 4px;
    }

    /*Auteurs des sujets*/
    .sujet_auteur a strong, .sujet_last_auteur a strong, .sujet_auteur a, .sujet_last_auteur a {
      font-size: 12px!important;
      font-weight: normal!important;
      font-family: Arial, Helvetica, sans-serif!important;
    }

    /******************************************************* FIN SUJETS *******************************************************/

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

    À plus !


    Dernière édition par Onyx le Sam 5 Mai 2018 - 23:30, édité 7 fois



    avatar
    Psychotic Bitch
    FémininAge : 32Messages : 38

    le Mar 17 Fév 2015 - 19:07

    je trouve ça super pour organiser le tout :)
    avatar
    Kiwy Cat
    FémininAge : 26Messages : 19

    le Mar 17 Fév 2015 - 21:20

    J'adore, c'est simple et sobre mais on voit le travail, tout ce que j'aime

    Merci =)
    avatar
    Roots
    MasculinAge : 98Messages : 13

    le Mer 18 Fév 2015 - 21:50

    Merci :p
    avatar
    Doan Lavita
    FémininAge : 20Messages : 72

    le Dim 22 Fév 2015 - 9:33

    Superbe, merci beaucoup! :3



    avatar
    Invité

    le Dim 22 Fév 2015 - 12:58

    Merci Wink
    avatar
    Kovu
    FémininAge : 17Messages : 254

    le Lun 23 Fév 2015 - 3:12

    Merci, merci ^^



    avatar
    wonderfuling
    FémininAge : 18Messages : 26

    le Lun 23 Fév 2015 - 16:35

    Merci pour ce chouette partage. C'est vraiment topissime !
    avatar
    JEG Elo
    FémininAge : 27Messages : 42

    le Lun 23 Fév 2015 - 17:10

    Merci beaucoup *-* et bravo à toi pour ta création Very Happy
    avatar
    Stanislava
    FémininAge : 23Messages : 102

    le Lun 23 Fév 2015 - 18:15

    Merci ! o/



    avatar
    Irissia87
    FémininAge : 31Messages : 124

    le Jeu 26 Fév 2015 - 9:17

    merci pour le code :)
    avatar
    Shadaan
    FémininAge : 26Messages : 80

    le Sam 28 Fév 2015 - 11:30

    Merci <3



    Catblack
    FémininAge : 22Messages : 85

    le Dim 1 Mar 2015 - 19:59

    merci
    avatar
    Err0r
    FémininAge : 24Messages : 134

    le Mer 4 Mar 2015 - 12:23

    top ^^



    avatar
    Kirito
    MasculinAge : 22Messages : 200

    le Mer 4 Mar 2015 - 18:44

    joli, j'aime bien !
    avatar
    Prince Of Spades
    MasculinAge : 25Messages : 50

    le Ven 6 Mar 2015 - 23:07

    Arf, j'aimerais savoir faire des choses aussi jolies :3
    Merci ♥
    avatar
    James K. Lindley
    MasculinAge : 27Messages : 45

    le Mar 10 Mar 2015 - 20:16

    merci du partage !
    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Mer 11 Mar 2015 - 11:58

    Merci ^^
    avatar
    Kianda
    MasculinAge : 17Messages : 88

    le Mer 11 Mar 2015 - 14:04

    merci ^^



    avatar
    meolyne
    FémininAge : 34Messages : 70

    le Jeu 12 Mar 2015 - 17:08

    Géniale :)
    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Sam 14 Mar 2015 - 13:17

    Merci beaucoup pour le partage.
    avatar
    Alyz
    MasculinAge : 25Messages : 15

    le Sam 14 Mar 2015 - 22:08

    merci
    avatar
    Trisse
    FémininAge : 18Messages : 36

    le Dim 15 Mar 2015 - 10:01

    Merci!!
    avatar
    Elektra Kloo
    FémininAge : 29Messages : 156

    le Ven 20 Mar 2015 - 11:18

    merci
    avatar
    Moriarty
    FémininAge : 23Messages : 85

    le Ven 20 Mar 2015 - 20:13

    Merci beaucoup ♥
    avatar
    Kamui Kyuuji
    MasculinAge : 26Messages : 30

    le Sam 21 Mar 2015 - 10:22

    Merci beaucoup.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 16 Aoû 2018 - 15:42