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
    En ligne
    avatar
    Onyx
    FémininAge : 24Messages : 3091

    le Mer 26 Nov 2014 - 8: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 - 21:30, édité 7 fois



    Je suis absente pour une durée indéterminée.

    avatar
    EOS
    MasculinAge : 25Messages : 34

    le Jeu 14 Juil 2016 - 18:05

    merci
    avatar
    Kim Jae Yoon
    FémininAge : 27Messages : 128

    le Ven 15 Juil 2016 - 13:55

    Merci !
    avatar
    LazuliNight
    MasculinAge : 24Messages : 52

    le Sam 16 Juil 2016 - 16:30

    Pile ce que je recherche ! C'est classe et sobre **



    avatar
    Tweety
    FémininAge : 24Messages : 48

    le Dim 17 Juil 2016 - 12:03

    Merci pour le partage :hug:
    avatar
    Tamashia
    FémininAge : 16Messages : 45

    le Dim 17 Juil 2016 - 23:04

    Nyu merci ! <3



    avatar
    Bambi's logic
    FémininAge : 21Messages : 25

    le Jeu 21 Juil 2016 - 15:25

    Mercii ! Very Happy
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Ven 22 Juil 2016 - 12:41

    Merci merci ♥



    Just want to be yours.
    avatar
    Argimpasa
    FémininAge : 26Messages : 92

    le Sam 23 Juil 2016 - 12:06

    Merci Very Happy
    avatar
    Souky Mitsu
    FémininAge : 27Messages : 116

    le Lun 25 Juil 2016 - 0:15

    Simplette, mais grandement en demande ! Merciiii
    avatar
    Helvelina
    FémininAge : 26Messages : 80

    le Lun 25 Juil 2016 - 13:59

    Merciiiii trop joli
    avatar
    Dayaxa
    FémininAge : 24Messages : 60

    le Mar 26 Juil 2016 - 13:50

    Merci :DDD



    Bloup.
    avatar
    Reyneur
    MasculinAge : 25Messages : 7

    le Jeu 28 Juil 2016 - 0:18

    Merci à toi!
    avatar
    Xona
    FémininAge : 29Messages : 32

    le Ven 5 Aoû 2016 - 14:54

    Merci beaucoup !
    avatar
    Aubenaissante
    MasculinAge : 32Messages : 15

    le Lun 8 Aoû 2016 - 20:26

    up !
    avatar
    Azalia
    FémininAge : 26Messages : 17

    le Mer 10 Aoû 2016 - 14:47

    merci



    la patience est une vertue
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 176

    le Jeu 18 Aoû 2016 - 16:14

    Merci beaucoup !Wink



    avatar
    Deveata
    MasculinAge : 22Messages : 23

    le Jeu 18 Aoû 2016 - 19:20

    Très joli, merci beaucoup !
    avatar
    shiranui
    MasculinAge : 19Messages : 14

    le Dim 21 Aoû 2016 - 9:33

    merci :heart:
    avatar
    KimmyKinder
    FémininAge : 16Messages : 181

    le Lun 22 Aoû 2016 - 7:14

    Merci **
    avatar
    Valou712
    FémininAge : 34Messages : 23

    le Lun 22 Aoû 2016 - 10:01

    J'aime beaucoup ton travail, merci beaucoup !!
    avatar
    Neko Mimi
    FémininAge : 27Messages : 162

    le Mar 23 Aoû 2016 - 11:16

    Merci ♥



    avatar
    Thessia
    FémininAge : 28Messages : 74

    le Dim 4 Sep 2016 - 22:50

    Merci ^^



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Lena Choux
    FémininAge : 21Messages : 29

    le Ven 9 Sep 2016 - 18:30

    J'adore c'est tout joli, merci **
    avatar
    Angy38
    FémininAge : 48Messages : 212

    le Ven 16 Sep 2016 - 12:19

    Merci



    avatar
    Laya
    FémininAge : 18Messages : 19

    le Ven 16 Sep 2016 - 16:42

    merci :3
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 15:59