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



    Samiro
    Samiro
    MasculinAge : 27Messages : 52

    Sam 17 Sep 2016 - 15:06

    D'accord avec ma vdd *-*
    Panzerblitz-1
    Panzerblitz-1
    MasculinAge : 25Messages : 63

    Sam 17 Sep 2016 - 18:31

    Merci :)
    Ozsi
    Ozsi
    MasculinAge : 27Messages : 27

    Lun 19 Sep 2016 - 17:03

    Cela change de la dispositions des sujet de bases beaucoup plus épuré et simple. Bravo :)
    Sestren
    Sestren
    Autre / Ne pas divulguerAge : 31Messages : 36

    Lun 19 Sep 2016 - 20:50

    Merci !
    avatar
    Yunroxas
    FémininAge : 30Messages : 37

    Sam 24 Sep 2016 - 20:34

    Merci du partage
    Usolia Naviento
    Usolia Naviento
    FémininAge : 31Messages : 25

    Dim 25 Sep 2016 - 13:42

    Hé, c'est cool! Merci (l)
    Snowbell
    Snowbell
    MasculinAge : 31Messages : 312

    Mar 27 Sep 2016 - 22:34

    Merci ♥
    Liintu
    Liintu
    FémininAge : 34Messages : 67

    Sam 1 Oct 2016 - 16:40

    merci !!
    Praecursator
    Praecursator
    MasculinAge : 21Messages : 77

    Sam 1 Oct 2016 - 22:36

    Merci !
    SweetDreams
    SweetDreams
    FémininAge : 26Messages : 32

    Sam 22 Oct 2016 - 11:43

    Magnifique merci :3
    Victor-57
    Victor-57
    MasculinAge : 33Messages : 13

    Sam 22 Oct 2016 - 11:57

    Thanks !
    Likau
    Likau
    MasculinAge : 29Messages : 353

    Lun 24 Oct 2016 - 13:37

    Oohw, c'est la génialitude !
    Merci beaucoup ^^
    Darouine Lius
    Darouine Lius
    MasculinAge : 34Messages : 76

    Mer 26 Oct 2016 - 12:17

    merci
    Lexucio
    Lexucio
    MasculinAge : 29Messages : 33

    Jeu 27 Oct 2016 - 19:59

    Merci beaucoup ^^
    Voyageur-B21E3
    Voyageur-B21E3
    MasculinAge : 29Messages : 35

    Sam 5 Nov 2016 - 17:15

    Merci !
    ( Lou' )
    ( Lou' )
    FémininAge : 28Messages : 108

    Dim 13 Nov 2016 - 17:59

    Merci beaucoup =D
    Lulus
    Lulus
    FémininAge : 33Messages : 143

    Ven 18 Nov 2016 - 22:32

    merci :)
    Dariel
    Dariel
    FémininAge : 54Messages : 69

    Mar 22 Nov 2016 - 7:44

    Merci pour ton partage Onyx


    :cow:



    C'est la vie Invité ! Pas le paradis.
    Ju' de fruits
    Ju' de fruits
    FémininAge : 30Messages : 82

    Sam 26 Nov 2016 - 0:26

    Superbe, merci !



    Madras
    Madras
    FémininAge : 39Messages : 285

    Dim 11 Déc 2016 - 14:52

    Merci
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Dim 11 Déc 2016 - 16:10

    Wow, c'est beau ! O.o (comme presque toutes tes créas d'ailleurs Onys)

    Merci beaucoup pour le partage !

    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Mer 14 Déc 2016 - 12:36

    merci
    br6668lo
    br6668lo
    MasculinAge : 29Messages : 7

    Dim 25 Déc 2016 - 12:50

    merci
    Adou6928
    Adou6928
    MasculinAge : 32Messages : 19

    Lun 26 Déc 2016 - 12:30

    Un énorme merci pour tout ce travail effectué :)
    mijako
    mijako
    FémininAge : 31Messages : 83

    Lun 2 Jan 2017 - 7:30

    Merci *--*
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:01