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

    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



    avatar
    Nyhnn
    FémininAge : 18Messages : 15

    le Sam 12 Mar 2016 - 12:40

    C'est bien fait! Merci!
    avatar
    Fraise •
    FémininAge : 19Messages : 20

    le Dim 13 Mar 2016 - 14:38

    C'est très beau, merci **
    avatar
    erika02
    FémininAge : 21Messages : 262

    le Dim 13 Mar 2016 - 23:27

    merci



    avatar
    One..
    MasculinAge : 19Messages : 54

    le Sam 19 Mar 2016 - 21:59

    Merci!
    avatar
    Vetrox
    MasculinAge : 17Messages : 36

    le Dim 20 Mar 2016 - 11:11

    merci
    avatar
    Lovelymp
    FémininAge : 38Messages : 58

    le Mer 23 Mar 2016 - 14:58

    Merci ^^
    avatar
    KinThoa
    FémininAge : 22Messages : 28

    le Ven 25 Mar 2016 - 11:40

    Merci !
    avatar
    Tinkky
    FémininAge : 27Messages : 89

    le Ven 25 Mar 2016 - 22:55

    Merci ^^
    avatar
    EvaneaLee
    FémininAge : 30Messages : 11

    le Jeu 31 Mar 2016 - 13:00

    Merci beaucoup !
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Ven 1 Avr 2016 - 20:32

    Merci beaucoup !
    avatar
    Jibaku
    FémininAge : 19Messages : 13

    le Ven 1 Avr 2016 - 20:38

    Merci
    avatar
    Maestro
    MasculinAge : 25Messages : 14

    le Sam 2 Avr 2016 - 15:57

    Merci, c'est superbe!
    avatar
    Madness of Wonderland
    FémininAge : 18Messages : 59

    le Dim 3 Avr 2016 - 15:56

    merci
    avatar
    Fuyuka
    FémininAge : 23Messages : 62

    le Lun 4 Avr 2016 - 19:47

    Merci beaucoup !
    avatar
    Fiery Aura
    FémininAge : 19Messages : 56

    le Mar 5 Avr 2016 - 16:29

    En attendant, ça feras l'affaire, merci !
    avatar
    beza
    FémininAge : 22Messages : 47

    le Jeu 7 Avr 2016 - 3:01

    Meri!
    avatar
    Mystborn
    FémininAge : 18Messages : 66

    le Dim 10 Avr 2016 - 21:15

    Merchi beaucoup, ça va faire plus beau que mon truc tout moche ;3



    avatar
    Filou
    FémininAge : 26Messages : 139

    le Mar 12 Avr 2016 - 23:14

    Je viens de découvrir qu'il était possible de modeler l'affichage des sujets. La découverte du siècle !

    Merci de m'avoir ouvrer les yeux et encore plus de partager ta création.
    Joli affichage Very Happy
    avatar
    Milkie
    MasculinAge : 29Messages : 8

    le Ven 22 Avr 2016 - 11:37

    Merci bien ^^
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Mer 27 Avr 2016 - 22:24

    Merci beaucoup Razz
    avatar
    Eerie Ange's
    FémininAge : 17Messages : 166

    le Dim 1 Mai 2016 - 16:15

    Merci :3
    avatar
    Scandalucia
    FémininAge : 27Messages : 154

    le Lun 2 Mai 2016 - 18:09

    Superbe codage ! Merci beaucoup du partage ♥

    avatar
    Mr Yo
    MasculinAge : 43Messages : 37

    le Mar 3 Mai 2016 - 21:23

    Pour voir afin de compléter un thème personnalisé Very Happy

    Merci
    avatar
    Iguolta
    MasculinAge : 18Messages : 101

    le Jeu 5 Mai 2016 - 20:23

    Merci ^^




    Merci à Cruelly pour le kit Very Happy
    Merci beaucoup ^^:

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    avatar
    MARLEY SMITH.
    FémininAge : 24Messages : 152

    le Mer 11 Mai 2016 - 13:20

    J'aime beaucoup, merci du travail réalisé :love:
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 9:57