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
    Onyx
    Onyx
    FémininAge : 25Messages : 3211

    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



    Hana Evali
    Hana Evali
    FémininAge : 28Messages : 177

    le Lun 23 Mar 2015 - 22:05

    Merci beaucoup ^^





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    AQW
    AQW
    FémininAge : 24Messages : 224

    le Ven 27 Mar 2015 - 19:03

    Merci beaucoup o/



    Blblbl. ♥
    Minze
    Minze
    FémininAge : 24Messages : 39

    le Dim 29 Mar 2015 - 0:10

    merci ♥
    Trizomere
    Trizomere
    FémininAge : 24Messages : 12

    le Lun 30 Mar 2015 - 13:20

    C'est très beau! Merci beaucoup pour le partage!
    Eden.
    Eden.
    FémininAge : 26Messages : 201

    le Mar 31 Mar 2015 - 14:16

    Merci !!
    Uther
    Uther
    MasculinAge : 22Messages : 93

    le Mer 1 Avr 2015 - 20:13

    Parfait ! Merci Onyx
    Milka
    Milka
    FémininAge : 30Messages : 112

    le Jeu 2 Avr 2015 - 10:43

    Merci bien :)
    Patdrue
    Patdrue
    FémininAge : 29Messages : 157

    le Jeu 2 Avr 2015 - 14:03

    c'est cool merci merci
    FeliceFelicis
    FeliceFelicis
    FémininAge : 28Messages : 89

    le Jeu 2 Avr 2015 - 19:27

    perfect Very Happy
    LOUVE ☽
    LOUVE ☽
    FémininAge : 28Messages : 53

    le Dim 5 Avr 2015 - 19:56

    merci
    Edana
    Edana
    FémininAge : 28Messages : 173

    le Lun 6 Avr 2015 - 16:59

    très très joli code!^^
    Merci pour le partage! =D
    Mecat
    Mecat
    FémininAge : 30Messages : 55

    le Jeu 9 Avr 2015 - 18:30

    Merci Very Happy



    Clémentine
    Clémentine
    FémininAge : 26Messages : 223

    le Jeu 9 Avr 2015 - 23:23

    Merciiiii ^^



    remrem
    remrem
    MasculinAge : 21Messages : 48

    le Sam 11 Avr 2015 - 11:48

    Merci !
    xMermaids
    xMermaids
    FémininAge : 19Messages : 19

    le Ven 17 Avr 2015 - 14:31

    Merci ^_^
    Candy Libertine
    Candy Libertine
    FémininAge : 20Messages : 136

    le Ven 17 Avr 2015 - 21:13

    J'aime. Meurchiii ♥
    Kanra
    Kanra
    FémininAge : 18Messages : 113

    le Ven 17 Avr 2015 - 21:50

    Merci
    Anonymous
    Invité

    le Sam 18 Avr 2015 - 8:43

    Merci du partage !
    Anonymous
    Invité

    le Sam 18 Avr 2015 - 14:57

    Very Happy
    Izaya Orihara
    Izaya Orihara
    FémininAge : 17Messages : 105

    le Dim 19 Avr 2015 - 16:39

    Merci pour le partage ^.^
    Oïa
    Oïa
    FémininAge : 28Messages : 57

    le Dim 19 Avr 2015 - 16:47

    merci merci merci Very Happy



    Aishitteru
    Aishitteru
    FémininAge : 23Messages : 68

    le Mar 28 Avr 2015 - 12:58

    Merci ! ^^
    Leyaa
    Leyaa
    FémininAge : 22Messages : 27

    le Mer 29 Avr 2015 - 18:39

    merci beaucoup !
    BlueGhost
    BlueGhost
    MasculinAge : 17Messages : 125

    le Sam 2 Mai 2015 - 13:53

    Merci, sublime o:





    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    Nonze
    Nonze
    MasculinAge : 25Messages : 85

    le Dim 3 Mai 2015 - 23:50

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 24 Mar 2019 - 2:14