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 - 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



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

    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le Dim 14 Déc 2014 - 0:39

    merci



    avatar
    Kitty Kat.
    FémininAge : 24Messages : 86

    le Dim 14 Déc 2014 - 1:44

    J'aime beaucoup, je te l'empreinte. :)
    avatar
    Nyan-cat
    FémininAge : 19Messages : 326

    le Dim 14 Déc 2014 - 8:49

    autant dire merci aussi ici <3



    avatar
    Stitch56
    FémininAge : 24Messages : 200

    le Dim 14 Déc 2014 - 9:32

    Merci
    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Lun 15 Déc 2014 - 22:49

    merci ^^
    avatar
    Tropik
    MasculinAge : 24Messages : 58

    le Ven 19 Déc 2014 - 14:04

    Merci !




    lovedesign

    avatar
    G U E R L A I N
    FémininAge : 27Messages : 154

    le Dim 21 Déc 2014 - 5:52

    chouette presentation! merci Very Happy



    avatar
    Roitatan
    MasculinAge : 19Messages : 50

    le Dim 21 Déc 2014 - 15:06

    C'est la Classe
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Jeu 25 Déc 2014 - 20:22

    Merci beaucoup ! *^*
    avatar
    Lyu
    FémininAge : 21Messages : 12

    le Sam 27 Déc 2014 - 18:55

    Merci pour les sujets.. *-* ♥
    avatar
    ♕ William
    MasculinAge : 20Messages : 72

    le Dim 28 Déc 2014 - 15:36

    f




    William
    Kakure
    FémininAge : 23Messages : 13

    le Dim 28 Déc 2014 - 15:40

    merci ! ^^
    avatar
    Neithan
    MasculinAge : 22Messages : 28

    le Lun 29 Déc 2014 - 2:46

    Merci !
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 714

    le Mar 30 Déc 2014 - 14:43

    merci c'est super^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Antithée
    FémininAge : 21Messages : 69

    le Mar 30 Déc 2014 - 16:13

    Merci !
    avatar
    Kendall
    FémininAge : 26Messages : 118

    le Mer 31 Déc 2014 - 0:17

    Merci !




    avatar
    Kahlan
    FémininAge : 31Messages : 371

    le Ven 2 Jan 2015 - 0:19

    Merci beaucoup pour ce partage.
    avatar
    hirondelle
    FémininAge : 28Messages : 134

    le Lun 5 Jan 2015 - 12:22

    Merci beaucoup ♥
    avatar
    AMIANTE
    FémininAge : 22Messages : 36

    le Jeu 8 Jan 2015 - 10:02

    merci bien !



    uc
    avatar
    Nanachu ♥
    FémininAge : 21Messages : 108

    le Jeu 8 Jan 2015 - 20:48

    J'aime beaucoup, mercii ♥
    avatar
    SweetieBay
    FémininAge : 26Messages : 143

    le Jeu 8 Jan 2015 - 22:12

    merci du partage
    avatar
    XaLis
    FémininAge : 20Messages : 43

    le Sam 10 Jan 2015 - 21:30

    j'aime beaucoup **





    avatar
    poussette59
    FémininAge : 33Messages : 158

    le Jeu 15 Jan 2015 - 14:19

    mercii pour le partage <3
    avatar
    Ysamar
    FémininAge : 38Messages : 37

    le Ven 16 Jan 2015 - 2:13

    merci!
    avatar
    Soulless Witch
    FémininAge : 21Messages : 5

    le Ven 16 Jan 2015 - 16:43

    Merci beaucoup, c'est trop beau!
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 17:57