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.


    Boîte de messagerie originale

    Partagez
    avatar
    Onyx
    FémininAge : 24Messages : 3134

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



    avatar
    Euterpe
    FémininAge : 32Messages : 313

    le Lun 14 Mai 2018 - 9:41

    Classe merci!
    avatar
    Printips
    MasculinAge : 20Messages : 14

    le Jeu 7 Juin 2018 - 19:00

    Très utile, et très agréable. J'adore.
    avatar
    Kelalin
    FémininAge : 26Messages : 1957

    le Ven 8 Juin 2018 - 0:01

    Merci pour le partage :)
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Ven 15 Juin 2018 - 11:23

    Merci beaucoup pour ce superbe partage !



    avatar
    P'tit loup
    MasculinAge : 35Messages : 445

    le Lun 24 Sep 2018 - 17:14

    Merci o/



    avatar
    Sadja
    MasculinAge : 20Messages : 75

    le Sam 29 Sep 2018 - 11:20

    Merci c'est très sympa l'effet que ça rend ! :coeur:
    Contenu sponsorisé


      La date/heure actuelle est Lun 15 Oct 2018 - 11:40