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.

Le Deal du moment : -15%
(Adhérents Fnac) LEGO® Star Wars™ ...
Voir le deal
552.49 €

    Liste de sujets Simplette

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    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



    Sylphyde
    Sylphyde
    FémininAge : 32Messages : 18

    Sam 29 Juil 2017 - 0:51

    Merci :)
    Malizia.
    Malizia.
    FémininAge : 28Messages : 90

    Mer 2 Aoû 2017 - 16:27

    Merci !
    Nyuu
    Nyuu
    FémininAge : 29Messages : 161

    Jeu 10 Aoû 2017 - 21:23

    Merci beaucoup !
    Darth Bogus
    Darth Bogus
    MasculinAge : 34Messages : 46

    Jeu 17 Aoû 2017 - 18:04

    Merci
    Jigsaw.
    Jigsaw.
    FémininAge : 32Messages : 19

    Jeu 17 Aoû 2017 - 18:46

    Merci beaucoup pour le partage ! Very Happy
    Biditoche
    Biditoche
    FémininAge : 31Messages : 32

    Jeu 17 Aoû 2017 - 20:26

    Merci Very Happy
    Hancok
    Hancok
    FémininAge : 39Messages : 1466

    Sam 19 Aoû 2017 - 12:40

    Hello, merci pour ce code :)




    Liste de sujets Simplette - Page 19 A67g
    Cythère
    Cythère
    FémininAge : 35Messages : 39

    Mer 23 Aoû 2017 - 0:07

    Merci :)
    Aiyx.
    Aiyx.
    FémininAge : 26Messages : 4

    Mer 23 Aoû 2017 - 8:23

    Un second, gros merci. :o
    Anonymous
    Invité

    Jeu 24 Aoû 2017 - 8:26

    merci o/
    Nyls
    Nyls
    MasculinAge : 23Messages : 28

    Jeu 24 Aoû 2017 - 18:31

    trop trop trop ce qu'il me fallait, merci <3
    Delena
    Delena
    FémininAge : 40Messages : 100

    Ven 25 Aoû 2017 - 21:49

    Merci !



    Liste de sujets Simplette - Page 19 8s6x
    Lunatic Café
    Lunatic Café
    FémininAge : 33Messages : 27

    Ven 8 Sep 2017 - 11:41

    Merci beaucoup!!! :love:
    Lénalee01
    Lénalee01
    FémininAge : 34Messages : 20

    Lun 11 Sep 2017 - 9:49

    merci beaucoup pour le partage
    nuanciel
    nuanciel
    FémininAge : 32Messages : 139

    Mer 13 Sep 2017 - 13:25

    merci du partage !
    Synchro
    Synchro
    MasculinAge : 51Messages : 13

    Jeu 14 Sep 2017 - 13:32

    Merci Sympa comme style :)
    Bull
    Bull
    FémininAge : 26Messages : 8

    Mar 19 Sep 2017 - 19:40

    Coucou, comme prévu je viens te remercier pour ce code !
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Jeu 21 Sep 2017 - 19:07

    Merci Onyx Wink



    ....
    ThunderTB
    ThunderTB
    MasculinAge : 40Messages : 15

    Jeu 21 Sep 2017 - 22:59

    Merci beaucoup !!!
    Lixies
    Lixies
    FémininAge : 31Messages : 13

    Dim 24 Sep 2017 - 20:34

    Merci ! Very Happy
    Raynold
    Raynold
    MasculinAge : 24Messages : 39

    Lun 25 Sep 2017 - 22:35

    ANWW !! :omg: :omg:
    Démo
    Démo
    FémininAge : 24Messages : 57

    Mar 3 Oct 2017 - 18:37

    Merci :3
    ptite_perle
    ptite_perle
    FémininAge : 60Messages : 127

    Dim 8 Oct 2017 - 19:36

    Merci



    Liste de sujets Simplette - Page 19 Signature
    Titi | Luna
    Titi | Luna
    FémininAge : 18Messages : 51

    Mar 10 Oct 2017 - 19:27

    Merci pour le code !
    Mirony
    Mirony
    FémininAge : 36Messages : 44

    Jeu 12 Oct 2017 - 23:09

    J'adore c'est littéralement magnifique! :love: :hug: Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:05