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 :
Dates stocks PS5 : stocks imminents chez Amazon et Carrefour
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



    DixieM.
    DixieM.
    FémininAge : 29Messages : 49

    le Sam 17 Jan 2015 - 11:13

    C'est trop stylé :love: merciiii !
    Dastan
    Dastan
    MasculinAge : 36Messages : 111

    le Sam 17 Jan 2015 - 13:36

    Merci!
    24nono38
    24nono38
    FémininAge : 30Messages : 68

    le Sam 17 Jan 2015 - 21:41

    Super sympa comme présentation Very Happy



    Liste de sujets Simplette - Page 3 230763kratossign1
    Saphire
    Saphire
    FémininAge : 23Messages : 146

    le Sam 17 Jan 2015 - 22:24

    Super classe
    Merci
    Drygee
    Drygee
    FémininAge : 25Messages : 6

    le Dim 18 Jan 2015 - 12:36

    super, merci ! *^*
    Honeey L.
    Honeey L.
    FémininAge : 28Messages : 79

    le Dim 18 Jan 2015 - 14:17

    J'aime beaucoup, merci du partage :)
    avatar
    Lucrèce
    FémininAge : 31Messages : 68

    le Dim 18 Jan 2015 - 15:05

    Merci beaucoup !
    Cissy
    Cissy
    FémininAge : 28Messages : 63

    le Dim 18 Jan 2015 - 23:38

    merciii!
    Akiyuki
    Akiyuki
    MasculinAge : 22Messages : 89

    le Jeu 22 Jan 2015 - 3:48

    Merciii **
    Nat
    Nat
    FémininAge : 26Messages : 42

    le Ven 23 Jan 2015 - 23:30

    Très joli... je prends et merci pour ce partage ! ^_^
    Trych
    Trych
    FémininAge : 25Messages : 81

    le Lun 26 Jan 2015 - 3:29

    Merci beaucoup c'est très beau



    Liste de sujets Simplette - Page 3 Just_k10
    Miyoko
    Miyoko
    FémininAge : 28Messages : 213

    le Mar 27 Jan 2015 - 14:36

    so nice



    Liste de sujets Simplette - Page 3 641359838739
    pinkwinee
    pinkwinee
    FémininAge : 26Messages : 44

    le Mer 28 Jan 2015 - 2:07

    merci !
    Malf Claymore
    Malf Claymore
    FémininAge : 26Messages : 126

    le Dim 1 Fév 2015 - 20:30

    merci
    okeane
    okeane
    FémininAge : 30Messages : 93

    le Mer 4 Fév 2015 - 9:35

    merci =)
    Sasha57
    Sasha57
    FémininAge : 26Messages : 35

    le Jeu 5 Fév 2015 - 19:08

    Merci *-*
    reshiram44
    reshiram44
    MasculinAge : 22Messages : 380

    le Lun 9 Fév 2015 - 18:57

    merci



    CharlieAryaneSmith
    CharlieAryaneSmith
    FémininAge : 22Messages : 8

    le Mar 10 Fév 2015 - 12:55

    Super joli :)
    Ananké
    Ananké
    FémininAge : 34Messages : 45

    le Mar 10 Fév 2015 - 16:49

    Merci pour ce tuto Wink
    Sachem
    Sachem
    FémininAge : 24Messages : 51

    le Mer 11 Fév 2015 - 9:22

    Merci pour le partage! :hug2:
    Reliane
    Reliane
    MasculinAge : 27Messages : 31

    le Mer 11 Fév 2015 - 9:27

    Je vais essayer , c'est plutot sympa ! merci
    Feeline
    Feeline
    FémininAge : 35Messages : 17

    le Mer 11 Fév 2015 - 13:52

    Comme dit sur le sujet des catégories, travail magnifique ! Encore merci à toi pour ce partage. :hug:
    kreou
    kreou
    FémininAge : 30Messages : 50

    le Jeu 12 Fév 2015 - 3:02

    Merci :hug:
    Natsumi13
    Natsumi13
    FémininAge : 25Messages : 64

    le Jeu 12 Fév 2015 - 21:17

    Love it! Merci!! Very Happy
    Drysfer
    Drysfer
    MasculinAge : 31Messages : 71

    le Sam 14 Fév 2015 - 17:46

    Merci



    Liste de sujets Simplette - Page 3 Gc001
    Contenu sponsorisé


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