AccueilRechercherS'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.

Le deal à ne pas rater :
Clé licence Windows 10 professionnel 32/64 bits – Français
14.90 €
Voir le deal

    Liste de sujets Simplette

    Onyx
    Onyx
    FémininAge : 27Messages : 3318

    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 "Problème avec mon code".

    À plus !


    Dernière édition par Onyx le Jeu 25 Juin 2020 - 18:07, édité 8 fois



    Mitsu'ki
    Mitsu'ki
    FémininAge : 31Messages : 31

    le Mar 5 Mai 2015 - 13:51

    merci



    Liste de sujets Simplette - Page 6 1o27SvUHjU
    avatar
    Lupa
    FémininAge : 24Messages : 183

    le Mer 6 Mai 2015 - 16:41

    Superbe *o*



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Amasis
    Amasis
    FémininAge : 47Messages : 307

    le Jeu 7 Mai 2015 - 10:53

    Merci pour le partage!
    SIXE
    SIXE
    FémininAge : 29Messages : 39

    le Jeu 7 Mai 2015 - 19:50

    J'adore !
    Jibunnie
    Jibunnie
    FémininAge : 23Messages : 106

    le Ven 8 Mai 2015 - 13:04

    Merci ! C'est génial !
    Bellabimbo444
    Bellabimbo444
    FémininAge : 22Messages : 61

    le Sam 9 Mai 2015 - 11:59

    Oh, merci j'adore !



    Glow
    Glow
    FémininAge : 21Messages : 94

    le Sam 9 Mai 2015 - 12:29

    Merci, ça va être super pratique!
    Kira de Shola
    Kira de Shola
    FémininAge : 23Messages : 60

    le Sam 9 Mai 2015 - 20:24

    merciii
    Ssinn
    Ssinn
    FémininAge : 28Messages : 33

    le Lun 11 Mai 2015 - 21:41

    Merci!!
    Yuuki Emna
    Yuuki Emna
    FémininAge : 24Messages : 38

    le Mer 13 Mai 2015 - 22:34

    meci beaucoup!
    Zarwins
    Zarwins
    FémininAge : 24Messages : 155

    le Jeu 14 Mai 2015 - 4:47

    Merciiii !



    Liste de sujets Simplette - Page 6 121217030106243656
    Gabriielle
    Gabriielle
    FémininAge : 29Messages : 42

    le Dim 17 Mai 2015 - 18:34

    merci
    Le Panda.
    Le Panda.
    FémininAge : 24Messages : 34

    le Dim 17 Mai 2015 - 18:41

    Je remercie fort, parce que c'est jolie et tout *w* ♥
    naah
    naah
    MasculinAge : 26Messages : 80

    le Mer 20 Mai 2015 - 12:15

    Merci c:
    Melaly
    Melaly
    FémininAge : 26Messages : 91

    le Ven 22 Mai 2015 - 20:07

    Merci :)
    Kraft
    Kraft
    FémininAge : 22Messages : 37

    le Sam 23 Mai 2015 - 21:39

    Merci ! (:
    Yooachte
    Yooachte
    FémininAge : 28Messages : 54

    le Lun 25 Mai 2015 - 1:19

    Trop bien ! Merci *_*
    Little Ghost
    Little Ghost
    FémininAge : 30Messages : 87

    le Lun 25 Mai 2015 - 17:05

    Merci ♥
    Ishyyn
    Ishyyn
    FémininAge : 25Messages : 90

    le Jeu 28 Mai 2015 - 13:33

    Merci :)
    Mordred Ghost
    Mordred Ghost
    FémininAge : 34Messages : 65

    le Sam 30 Mai 2015 - 12:26

    Ca le fait! c'est sobre, efficace!
    Ouat
    Ouat
    FémininAge : 36Messages : 74

    le Sam 30 Mai 2015 - 18:29

    Merci^^
    Ashouille
    Ashouille
    FémininAge : 31Messages : 47

    le Dim 31 Mai 2015 - 17:46

    blop
    Aoi Kiseki
    Aoi Kiseki
    FémininAge : 28Messages : 105

    le Dim 31 Mai 2015 - 19:36

    Merci pour le partage :3
    Ackey
    Ackey
    FémininAge : 25Messages : 9

    le Dim 31 Mai 2015 - 20:32

    Blop !
    Imari
    Imari
    FémininAge : 37Messages : 68

    le Lun 1 Juin 2015 - 15:55

    Merci beaucoup ^^



    Liste de sujets Simplette - Page 6 2mzbax4
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Jan 2021 - 12:19