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 :
Aliexpress : codes promo valables sur tout le site
Voir le deal
-50%
Le deal à ne pas rater :
-50% Baskets Nike Dunk Low
64.99 € 129.99 €
Voir le deal

    Boîte de messagerie originale

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 17 Oct 2017 - 17:24




    Boîte de réception originale



    Salut !

    Voici un LS de boîte de réception qui a été fait pour la demande de R.Falsworth.

    Voilà l'aperçu de la boîte de réception : cliquez ici pour voir.
    Voilà l'aperçu des MPs : cliquez ici pour voir.


    Ce LS est en quatre parties.
    • Tout d'abord, nous allons installer la boîte de réception dans le template.
    • Ensuite, nous allons installer la revue de MPs dans le template.
    • Puis, nous allons installer l'affichage des MPS dans le template.
    • Enfin, nous allons mettre en forme les catégories à l'aide du CSS.


    Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.





    1. La boîte de réception (Template Privmsgs_Body)



    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > POSTER & MESSAGES PRIVÉS
    > > > > > PRIVMSGS_BODY

    On met le code suivant et on enregistre :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
    <div class="main_mp">
      <div class="mp_new_post">{POST_PM_IMG}</div>
      <div class="mp_types">
        <div class="mp_type">{INBOX}</div>
        <div class="mp_type">{SENTBOX}</div>
        <div class="mp_type">{OUTBOX}</div>
        <div class="mp_type">{SAVEBOX}</div>
      </div>
      <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list" class="mp_list_form">
        <div class="mp_list">
          <div class="mp_list_top">
            <!-- BEGIN switch_box_size_notice -->
            <div class="mp_list_100">{BOX_SIZE_STATUS}</div>
            <!-- END switch_box_size_notice -->
            <div class="mp_list_select">
              {L_DISPLAY_MESSAGES}: 
              <select name="msgdays">
                {S_SELECT_MSG_DAYS}
              </select> 
              <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
            </div>
            <div style="clear: both;"></div>
          </div>
          <!-- BEGIN listrow -->
          <div class="mp_list_one">
            <span class="mp_list_img">
              <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
            </span>
            <span class="mp_list_title">
              <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> par {listrow.FROM} le {listrow.DATE}
            </span>
            <span class="mp_list_one_select">
              <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
            </span>
            <div style="clear: both;"></div>
          </div>
          <!-- END listrow -->
          <!-- BEGIN switch_no_messages -->
          <div class="mp_nothing">{L_NO_MESSAGES}</div>
          <!-- END switch_no_messages -->
          <div class="mp_pagination">
            <span class="nav">{PAGE_NUMBER} {PAGINATION}</span>
          </div>
        </div>
        <div class="mp_list_bottom">
          {S_HIDDEN_FIELDS}
          <!-- BEGIN switch_save -->
          <input class="mainoption" type="submit" name="save" value="{L_SAVE_MARKED}" />  
          <!-- END switch_save -->
          <!-- BEGIN switch_move_profile -->
          <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
          <!-- END switch_move_profile -->
          <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MARKED}" />  
          <input class="liteoption" type="submit" name="deleteall" value="{L_DELETE_ALL}" />  
          <div class="mp_bottom_right">
            <a class="gensmall" href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: 
            <a class="gensmall" href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
          </div>
          <div style="clear: both;"></div>
        </div>
      </form>
      <div style="clear: both;"></div>
    </div>

    <table width="100%" border="0">
        <tr>
            <td align="right" valign="top">{JUMPBOX}</td>
        </tr>
    </table>




    2. Revue des messages privés (Template Privmsg_Topic_Review)



    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > POSTER & MESSAGES PRIVÉS
    > > > > > PRIVMSGS_TOPIC_REVIEW

    On met le code suivant et on enregistre :
    Code:
    <div class="me_review_bloc">
      <div class="mp_sent_boite">Revue des messages</div>
      <!-- BEGIN postrow -->
      <div class="mp_revue_space"></div>
      <div class="mp_sent_pseudo_title">
        <div class="mp_sent_pseudo">{postrow.POSTER_NAME}</div>
        <div class="mp_sent_title">{postrow.POST_SUBJECT} / {postrow.POST_DATE}</div>
        <div style="clear: both;"></div>
      </div>
      <div class="mp_sent_ava_mess">
        <div class="mp_sent_ava">
          {postrow.POSTER_AVATAR}
        </div>
        <div class="mp_sent_mess">
          {postrow.MESSAGE}
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- END postrow -->
    </div>




    3. Affichage du message privé (Template Privmsgs_Read_Body)



    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > TEMPLATES
    > > > > POSTER & MESSAGES PRIVÉS
    > > > > > PRIVMSGS_READ_BODY

    On met le code suivant et on enregistre :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
    <div class="mp_sent_topbloc">
      <div class="mp_sent_types">
        <div class="mp_sent_type">{INBOX}</div>
        <div class="mp_sent_type">{SENTBOX}</div>
        <div class="mp_sent_type">{OUTBOX}</div>
        <div class="mp_sent_type">{SAVEBOX}</div>
        <div class="clear: both;"></div>
      </div>
      <!-- BEGIN switch_post_reply -->
      <div class="mp_sent_reply">{REPLY_PM_IMG}</div>
      <!-- END switch_post_reply -->
      <div style="clear: both;"></div>
    </div>

    <form action="{S_PRIVMSGS_ACTION}" method="post" class="mp_sent_bloc">
      <div class="mp_sent_boite">{BOX_NAME}</div>
      <div class="mp_sent_pseudo_title">
        <div class="mp_sent_pseudo">{MESSAGE_FROM}</div>
        <div class="mp_sent_title">{POST_SUBJECT} / {POST_DATE}</div>
        <div class="mp_sent_quote_edit">
        <!-- BEGIN switch_quote -->{QUOTE_PM_IMG} <!-- END switch_quote -->{EDIT_PM_IMG}
        </div>
        <div style="clear: both;"></div>
      </div>
      <div class="mp_sent_ava_mess">
        <div class="mp_sent_ava">
          {AVATAR_FROM}
        </div>
        <div class="mp_sent_mess">
          <div class="mp__sent_message">
            {MESSAGE}
          </div>
          <!-- BEGIN switch_user_contact -->
          <div class="mp__sent_contact">
            {PROFILE_IMG} {PM_IMG} {EMAIL_IMG} {WWW_IMG} {AIM_IMG} {YIM_IMG} {MSN_IMG} {SKYPE_IMG}
          </div>
          <!-- END switch_user_contact -->
        </div>
        <div style="clear: both;"></div>
      </div>
      <div class="mp_sent_bottom">
        {S_HIDDEN_FIELDS}
        <!-- BEGIN switch_save -->
        <input class="liteoption" type="submit" name="save" value="{L_SAVE_MSG}" />  
        <!-- END switch_save -->
        <!-- BEGIN switch_move_profile -->
        <input class="liteoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE}" /> &nbsp;
        <!-- END switch_move_profile -->
        <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MSG}" />
      </div>
      <br />
      <br />
      <!-- BEGIN switch_review_box -->
      <div class="mp_sent_review">
        {TOPIC_REVIEW_BOX}
      </div>
      <!-- END switch_review_box -->
    </form>
    <table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
       <tr>
          <td align="right" valign="top"><span class="gensmall">{JUMPBOX}</span></td>
       </tr>
    </table>

    <!-- BEGIN switch_image_resize -->
    <script type="text/javascript">
    //<![CDATA[
    $(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
    //]]>
    </script>
    <!-- END switch_image_resize -->




    4. Mise en forme (CSS)



    Si vous regardez votre boîte de messagerie, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre le totu 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 :
    Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
    Code:
    /*** Bloc de tous les mps ***/
    .main_mp {
      width: 95%;
      margin: auto;
      margin-bottom: 10px;
      font-size: 12px;
      font-family: verdana;
      color: white;
    }
    .mp_new_post {
      text-align: right;
      padding-bottom: 5px;
    }

    /** Bloc des types de boite **/
    .mp_types {
      background: #56739a;
      float: left;
      width: 20%;
      box-sizing: border-box;
      margin-right: 1%;
    }
    /*Type de boite*/
    .mp_type {
      margin: 5px;
      display: block;
      background: #24445c;
      color: #e67e30;
      text-align: center;
      padding: 2px;
      font-family: 'Bangers', cursive;
      font-size: 16px;
      padding-top: 5px;
    }
    /*Type de boite pas choisi*/
    .mp_type a {
      display: block;
      margin: -5px -2px -2px -2px;
      padding: 2px;
      color: white;
      text-align: center;
      text-decoration: none!important;
      font-family: 'Bangers', cursive;
      font-size: 16px;
      padding-top: 5px;
    }
    /*Type de boite pas choisi au survol*/
    .mp_type a:hover {
      color: #e67e30;
      font-family: 'Bangers', cursive;
      font-size: 16px;
      padding-top: 5px;
    }

    /**Section de droite**/
    .mp_list_form {
      float: left;
      width: 79%;
      box-sizing: border-box;
    }

    /*Bloc de droite avec la liste*/
    .mp_list {
      background: #56739a;
    }
    /*Top de la liste*/
    .mp_list_top {
      padding: 5px;
      text-align: left;
      font-size: 11px;
      margin-bottom: 5px;
    }
    /*Pourcentage de la boite*/
    .mp_list_100 {
      float: left;
      padding-top: 2px;
      width: 235px;
    }
    /*Selectionner date message*/
    .mp_list_select {
      float: right;
      text-align: right;
    }

    /** Un message prive **/
    .mp_list_one {
      margin: 5px;
      background: #24445c;
      padding: 2px;
      text-align: left;
      height: 20px;
      line-height: 20px;
      vertical_align: middle;
      font-size: 12px;
      font-family: verdana;
    }
    /*Bloc image*/
    .mp_list_img {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      vertical_align: middle;
      float: left;
      padding-right: 5px;
      width: 20px;
    }
    /*Image*/
    .mp_list_img img {
      width: 20px;
      height: 20px;
    }
    /*Bloc info*/
    .mp_list_title {
      display: inline-block;
      height: 20px;
      line-height: 20px;
      vertical_align: middle;
      float: left;
      padding-right: 5px;
    }
    /*Titre à la bonne taille*/
    .mp_list_title .topictitle {
      font-size: 12px;
    }
    /*Select droite*/
    .mp_list_one_select {
      float: right;
    }
    /*Pagination*/
    .mp_pagination {
      padding: 0px 2px 2px 2px;
      text-align: left;
    }
    .mp_pagination .nav {
      color: white;
    }

    /*En bas de la liste des mp*/
    .mp_list_bottom {
      margin-top: 5px;
    }
    /*Mettre les selectionner a droite*/
    .mp_bottom_right {
      float: right;
    }



    /*Top message envoye*/
    .mp_sent_topbloc {
      width: 95%;
      margin: auto;
      margin-bottom: 10px;
      font-size: 12px;
      font-family: verdana;
    }
    /*Bloc type de boite*/
    .mp_sent_types {
      float: left;
      text-align: left;
    }
    /*Type de boite*/
    .mp_sent_type {
      float: left;
      margin-right: 5px;
      width: 150px;
      background: #56739a;
      color: #e67e30;
      font-family: 'Bangers', cursive;
      font-size: 16px;
      text-align: center;
    }
    /*Lien Type de boite*/
    .mp_sent_type a {
      display: block;
      padding: 2px;
      padding-top: 5px;
      color: white;
      background: #56739a;
      text-align: center;
      text-decoration: none!important;
    }
    /*Lien Type de boite pas choisi au survol*/
    .mp_sent_type a:hover {
      background: #24445c;
      color: #e67e30;
    }
    /*Bouton repondre*/
    .mp_sent_reply {
      float: right;
    }

    /*Bloc message envoye*/
    .mp_sent_bloc {
      width: 95%;
      margin: auto;
      margin-bottom: 10px;
      font-size: 12px;
      font-family: verdana;
      color: white;
    }
    /*Boite message envoye*/
    .mp_sent_boite {
      box-sizing: border-box;
      background: #24445c;
      color: #e67e30;
      font-family: 'Bangers', cursive;
      font-size: 22px;
      width: 100%;
      margin: 5px 0px;
      padding: 5px;
      padding-top: 10px;
      text-align: center;
    }
    /*Bloc pseudo et titre*/
    .mp_sent_pseudo_title {
      box-sizing: border-box;
      background: #56739a;
      width: 100%;
      margin: 5px 0px;
      color: #ffffff;
      padding: 5px;
      font-size: 13px;
      text-left: center;
    }
    /*Bloc pseudo*/
    .mp_sent_pseudo {
      float: left;
      width: 200px;
      padding: 0px 5px;
      text-align: center;
    }
    /*Bloc titre*/
    .mp_sent_title {
      float: left;
      padding-left: 5px;
      text-align: left;
    }
    /*Bloc citer et éditer*/
    .mp_sent_quote_edit {
      width: 150px;
      float: right;
      padding-right: 5px;
      text-align: right;
    }

    /*Bloc avatar et message*/
    .mp_sent_ava_mess {
      width: 100%;
      margin: 5px 0px;
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
    }
    /*Avatar message envoye*/
    .mp_sent_ava {
      order: 1;
      flex-grow: 1;
      flex-shrink: 1;
      background: #56739a;
      width: 200px;
      margin-right: 5px;
      color: #ffffff;
      padding: 5px;
      font-size: 12px;
      text-align: center;
    }
    /*Bloc message*/
    .mp_sent_mess {
      order: 2;
      flex-grow: 10;
      flex-shrink: 10;
      flex-basis: 100%;
      box-sizing: border-box;
      background: #56739a;
      color: #ffffff;
      padding: 5px;
      font-size: 12px;
      text-align: left;
    }
    /*Bloc contacts*/
    .mp__sent_contact {
      margin-top: 10px;
    }
    /*mp_sent_bottom*/
    .mp_sent_bottom {
      box-sizing: border-box;
      background: #56739a;
      width: 100%;
      margin: 5px 0px;
      color: #ffffff;
      padding: 5px;
      font-size: 11px;
      text-align: center;
    }

    /*Bloc espace entre posts*/
    .mp_revue_space {
      box-sizing: border-box;
      background: #56739a;
      width: 100%;
      margin: 5px 0px;
      color: #ffffff;
      padding: 5px;
      font-size: 11px;
      text-align: center;
    }



    C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous avez besoin d'aide pour personnaliser le code.

    À plus !


    Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^


    Dernière édition par Onyx le Ven 19 Juin 2020 - 20:22, édité 3 fois



    Carmina
    Carmina
    FémininAge : 37Messages : 506

    Lun 14 Mai 2018 - 9:41

    Classe merci!
    Printips
    Printips
    MasculinAge : 25Messages : 15

    Jeu 7 Juin 2018 - 19:00

    Très utile, et très agréable. J'adore.
    Anonymous
    Invité

    Ven 8 Juin 2018 - 0:01

    Merci pour le partage :)
    .Lucifer.
    .Lucifer.
    MasculinAge : 50Messages : 184

    Ven 15 Juin 2018 - 11:23

    Merci beaucoup pour ce superbe partage !



    Boîte de messagerie originale 978358Divine
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Lun 24 Sep 2018 - 17:14

    Merci o/



    Boîte de messagerie originale 30xivrd
    Sadja
    Sadja
    MasculinAge : 26Messages : 79

    Sam 29 Sep 2018 - 11:20

    Merci c'est très sympa l'effet que ça rend ! :coeur:
    lelie25
    lelie25
    FémininAge : 31Messages : 160

    Ven 7 Juin 2019 - 19:52

    très sympa je vais tenter de l'installer
    Loupiio
    Loupiio
    FémininAge : 27Messages : 34

    Ven 3 Avr 2020 - 18:16

    Merci du partage ! :love:
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 32Messages : 90

    Mar 28 Avr 2020 - 18:32

    Merci pour ce codage Wink
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:48