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

    le Mer 26 Nov 2014 - 9:14


    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
    Cruelly
    FémininAge : 25Messages : 2572

    le Mer 26 Nov 2014 - 9:15

    Superbe comme les cats qui vont avec :) merrcii :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Mer 26 Nov 2014 - 9:23

    Bon sang, mais t'as répondu moins de deux minutes après mon post O_o

    Je commence à avoir peur XD



    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Mer 26 Nov 2014 - 9:26

    Je te suis MOUAHAHHAH Twisted Evil
    Non sincèrement c'est seulement un adonc xD J'ai refresher la page pour voir les nouveaux messages et j'ai tomber dessus xD



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Rozenbrez
    FémininAge : 27Messages : 1383

    le Mer 26 Nov 2014 - 20:52

    Sublime *o* J'ai hâte que tu es fini pour te l’emprunter, cela terminera le codage de mon forum <3

    avatar
    Halloween
    FémininAge : 24Messages : 9756

    le Ven 28 Nov 2014 - 14:34

    Hey !

    Pourquoi "en cours", il me semble terminé, non ? :O

    L'idée est sublime en tout cas, j'adore *-*




    < / Libre service codage >
    avatar
    damon w salvatore
    FémininAge : 30Messages : 109

    le Dim 30 Nov 2014 - 7:57

    tres jolie
    avatar
    Aile
    FémininAge : 30Messages : 134

    le Dim 30 Nov 2014 - 20:31

    Magnifique *o*



    avatar
    Onyx
    FémininAge : 24Messages : 3134

    le Lun 1 Déc 2014 - 22:48

    Voilà, c'est terminé \o/

    Merci pour les commentaires ♥

    Halloween: Je n'avais pas encore fait tous les tests pour voir si ça bug, alors je voulais vérifier quelques trucs avant ^^



    avatar
    Grande
    FémininAge : 30Messages : 207

    le Jeu 4 Déc 2014 - 21:52

    Merci =D



    avatar
    Halloween
    FémininAge : 24Messages : 9756

    le Ven 5 Déc 2014 - 22:30

    Oh, c'est tout à ton honneur Onyx *-*

    Merci beaucoup :)




    < / Libre service codage >
    avatar
    AwenWolf
    FémininAge : 30Messages : 76

    le Sam 6 Déc 2014 - 0:10

    Merci *_*
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Sam 6 Déc 2014 - 2:06

    Merci !
    avatar
    kyoichii
    MasculinAge : 24Messages : 32

    le Dim 7 Déc 2014 - 6:06

    merci!
    avatar
    BloodyMoony
    FémininAge : 26Messages : 76

    le Dim 7 Déc 2014 - 18:03

    Merci pour le partage :3
    avatar
    ClaryF
    FémininAge : 28Messages : 137

    le Dim 7 Déc 2014 - 22:17

    Merci !
    avatar
    webs
    MasculinAge : 25Messages : 1097

    le Lun 8 Déc 2014 - 20:26

    merci



    avatar
    Darksoul666
    MasculinAge : 34Messages : 10

    le Mer 10 Déc 2014 - 11:18

    merci ^^
    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Jeu 11 Déc 2014 - 4:23

    Merciiiiiii ! ♥
    avatar
    Lux Caellis
    FémininAge : 25Messages : 23

    le Jeu 11 Déc 2014 - 4:58

      Merci c'est très joli =)
    avatar
    Euterpe
    FémininAge : 32Messages : 317

    le Ven 12 Déc 2014 - 10:00

    Superbe
    avatar
    0smose
    FémininAge : 23Messages : 165

    le Ven 12 Déc 2014 - 19:23

    Puisque je continue sur ma lancée... Merci énormément ! C'est très beau !





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Oror
    FémininAge : 28Messages : 95

    le Sam 13 Déc 2014 - 13:02

    Merci du partage ! =)



    avatar
    Solitude
    FémininAge : 43Messages : 286

    le Sam 13 Déc 2014 - 16:46

    Merrci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Skyleen
    FémininAge : 26Messages : 476

    le Dim 14 Déc 2014 - 0:33

    Huan j'adore le rendu ** merci **



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Contenu sponsorisé


      La date/heure actuelle est Mer 14 Nov 2018 - 7:49