Boîte de réception

Créditez-moi quelque part sur votre forum si vous utilisez ces codes

phpBB2

Dans votre panneau d'administration, Affichage > Templates > Général > overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Roboto" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Poster & Messages Privés > privmsgs_bodyr, remplacez l'intégralité du template par le suivant :

Code:

<div id="mp">
  <div class="mp-header">
    <div class="mp-links">
      <div>{INBOX}</div>
      <div>{SENTBOX}</div>
      <div>{OUTBOX}</div>
      <div>{SAVEBOX}</div>
    </div>
    <!-- BEGIN switch_box_size_notice -->
    <div class="mp-percent">
      {BOX_SIZE_STATUS}
      <div><div><img src="{PATH_IMG_FA}empty.gif" alt="{INBOX_LIMIT_PERCENT}" height="8" width="{INBOX_LIMIT_IMG_WIDTH}" /></div></div>
    </div>
    <!-- END switch_box_size_notice -->
  </div>
  <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
  <div class="mp-body">
    <div class="mp-body-head">
      {POST_PM_IMG}
      <span class="gensmall">{L_DISPLAY_MESSAGES}: 
                    <select name="msgdays">
                        {S_SELECT_MSG_DAYS}
                    </select> 
                    <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
                </span>
    </div>
                
    <!-- BEGIN listrow -->
    <div class="mp-item">
      <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
      <div>
        <div><a href="{listrow.U_READ}">{listrow.SUBJECT}</a>Par {listrow.FROM}</div>
        <div>{listrow.DATE}</div>
      </div>
      <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
    </div>
    <!-- END listrow -->
    <!-- BEGIN switch_no_messages -->
    <div class="mp-empty">{L_NO_MESSAGES}</div>
    <!-- END switch_no_messages -->
  </div>
    <div class="mp-bottom-btn">
      {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>
    <div class="mp-bottom">
      {POST_PM_IMG}
      <div>{PAGE_NUMBER}</div>
      <div>
        <a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a>
        <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
      </div>
                <span class="nav">{PAGINATION}</span>
      </div>
  </form>
</div>
<script>
  $(document).ready(function(){
   $('.mp-body').find('img[title="Message Non-lu"]').closest('.mp-item').addClass('new-mp');
  });
</script>
<table width="100%" border="0">
    <tr>
        <td align="right" valign="top">{JUMPBOX}</td>
    </tr>
</table>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*CUSTOMISATION DE LA BOITE DE RÉCEPTION PAR AWFUL*/
/*Boite MP*/
#mp {
     font-family: 'Roboto', sans-serif;
     background: #ccc;
}
/*Header*/
 .mp-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
     padding: 10px;
     background: #323232;
     color: #e7e7e7;
}
/*Liens du header*/
 .mp-links {
     display: flex;
}
 .mp-links div {
     margin-right: 10px;
     text-transform: uppercase;
     font-size: 10px;
     font-weight: bold;
}
 .mp-links div:last-child {
     margin-right: 0px;
}
 .mp-links div a {
     font-weight: normal;
     color: #757575;
     transition: color 0.3s ease-in-out;
}
 .mp-links div a:hover {
     color: #ccc;
}
/*Barre de pourcentage*/
 .mp-percent {
     font-size: 10px;
     width: 250px;
}
 .mp-percent > div {
     background: #444;
     width: 100%;
     margin-top: 5px;
}
 .mp-percent > div > div {
     background: #a16bdb;
     display: inline-block;
}
/*Corps de la boîte*/
 .mp-body {
     padding: 15px;
}
 .mp-body-head {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
}
 .mp-body-head select {
     border: 1px solid #aaa;
}
 .mp-body-head input{
     font-size: 11px!important;
}
/*Bouton nouveau*/
 #mp a[href="/privmsg?mode=post"]::before {
     content: "Nouveau";
     font-family: "Montserrat", sans-serif;
     font-size: 16px;
     font-weight: 900;
     text-transform: uppercase;
     transition: color 0.3s ease-in-out;
     color: #323232;
}
 #mp a[href="/privmsg?mode=post"]:hover::before {
     color: #5d5c5c;
}
 #mp a[href="/privmsg?mode=post"] img {
     display: none;
}
/*Item MP*/
 .mp-item {
     background: #fefefe;
     padding: 10px;
     box-sizing: border-box;
     position: relative;
     display: flex;
     justify-content: space-between;
     border-left: 3px solid #b0b0b0;
}
 .mp-item + .mp-item {
     margin-top: 8px;
}
 .mp-item.new-mp {
     border-left: 3px solid #a16bdb;
}
 .mp-item > img {
     display: none;
}
 .mp-item > div > div:first-child {
     font-size: 11px;
     margin-bottom: 5px;
}
 .mp-item > div > div:first-child > a:first-child {
     margin-right: 5px;
     color: #1d1d1d;
     font-weight: bold;
     border-right: 1px solid #ccc;
     padding-right: 5px;
}
 .mp-item > div > div:nth-child(2) {
     text-transform: uppercase;
     color: #aaa;
     font-size: 9px;
     letter-spacing: 1px;
}
 .mp-bottom-btn {
     padding: 10px 10px 0px;
     display: flex;
     justify-content: flex-end;
}
 .mp-bottom-btn input, .mp-body-head input{
     transition: all 0.3s ease-in-out;
     border: 1px solid #aaa;
     font-family: inherit;
     text-transform: uppercase;
     font-size: 9px;
     color: #414141;
     cursor: pointer;
     background: #e9e9e9;
}
 .mp-bottom-btn input:hover, .mp-body-head input:hover{
     border: 1px solid #848080;
}
 .mp-bottom {
     align-items: center;
     padding: 10px;
     display: flex;
     font-size: 10px;
}
 .mp-bottom a + div {
     margin-left: 10px;
}
 .mp-bottom a + div strong {
     color: #a16bdb;
}
 .mp-bottom div:last-of-type {
     margin-left: auto;
}
 .mp-bottom div:last-of-type a {
     color: #575757;
     transition: all 0.3s ease-in-out;
}
 .mp-bottom div:last-of-type a:hover {
     color: #999;
}
 .mp-bottom div:last-of-type a:last-child {
     margin-left: 10px;
}
 .mp-empty {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #969696;
}


phpBB3

Dans votre panneau d'administration, Affichage > Templates > Général > overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Roboto" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Poster & Messages Privés > privmsgs_bodyr, remplacez l'intégralité du template par le suivant :

Code:

<div id="mp">
  <div class="mp-header">
    <div class="mp-links">
      <div>{INBOX}</div>
      <div>{SENTBOX}</div>
      <div>{OUTBOX}</div>
      <div>{SAVEBOX}</div>
    </div>
    <!-- BEGIN switch_box_size_notice -->
    <div class="mp-percent">
      {BOX_SIZE_STATUS}
      <div><div><img src="{PATH_IMG_FA}empty.gif" alt="{INBOX_LIMIT_PERCENT}" height="8" width="{INBOX_LIMIT_IMG_WIDTH}" /></div></div>
    </div>
    <!-- END switch_box_size_notice -->
  </div>
  <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
  <div class="mp-body">
    <div class="mp-body-head">
      {POST_PM_IMG}
      <span class="gensmall">{L_DISPLAY_MESSAGES}: 
                    <select name="msgdays">
                        {S_SELECT_MSG_DAYS}
                    </select> 
                    <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
                </span>
    </div>
                
    <!-- BEGIN listrow -->
    <div class="mp-item">
      <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
      <div>
        <div><a href="{listrow.U_READ}">{listrow.SUBJECT}</a>Par {listrow.FROM}</div>
        <div>{listrow.DATE}</div>
      </div>
      <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
    </div>
    <!-- END listrow -->
    <!-- BEGIN switch_no_messages -->
    <div class="mp-empty">{L_NO_MESSAGES}</div>
    <!-- END switch_no_messages -->
  </div>
    <div class="mp-bottom-btn">
      {S_HIDDEN_FIELDS}
                <!-- BEGIN switch_save -->
 <input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />  
 <!-- END switch_save -->
 <!-- BEGIN switch_move_profile -->
 <input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
 <!-- END switch_move_profile -->
 <input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" />  
 <input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" />
    </div>
    <div class="mp-bottom">
      {POST_PM_IMG}
      <div>{PAGE_NUMBER}</div>
      <div>
        <a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a>
        <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
      </div>
                <span class="nav">{PAGINATION}</span>
      </div>
  </form>
</div>
<script>
  $(document).ready(function(){
   $('.mp-body').find('img[title="Message Non-lu"]').closest('.mp-item').addClass('new-mp');
  });
</script>


<div class="clear"></div>
{JUMPBOX}

<br style="clear:both" />

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*CUSTOMISATION DE LA BOITE DE RECEPTION PAR AWFUL*/
/*Boite de réception*/
#mp {
     font-family: 'Roboto', sans-serif;
     background: #ccc;
}
/*Header*/
 .mp-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
     padding: 10px;
     background: #323232;
     color: #e7e7e7;
}
/*Liens du header*/
 .mp-links {
     display: flex;
}
 .mp-links div {
     margin-right: 10px;
     text-transform: uppercase;
     font-size: 10px;
     font-weight: bold;
}
 .mp-links div:last-child {
     margin-right: 0px;
}
 .mp-links div a {
     font-weight: normal;
     color: #757575;
     transition: color 0.3s ease-in-out;
}
 .mp-links div a:hover {
     color: #ccc;
}
/*Barre de pourcentage*/
 .mp-percent {
     font-size: 10px;
     width: 250px;
}
 .mp-percent > div {
     background: #444;
     width: 100%;
     margin-top: 5px;
}
 .mp-percent > div > div {
     background: #a16bdb;
     display: inline-block;
}
/*Corps de la boîte*/
 .mp-body {
     padding: 15px;
}
 .mp-body-head {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
}
 .mp-body-head select {
     border: 1px solid #aaa;
}
 .mp-body-head input{
     font-size: 11px!important;
     padding: 2px!important;
}
/*Bouton nouveau*/
 #mp a[href="/privmsg?mode=post"]::before {
     content: "Nouveau";
     font-family: "Montserrat", sans-serif;
     font-size: 16px;
     font-weight: 900;
     text-transform: uppercase;
     transition: color 0.3s ease-in-out;
     color: #323232;
}
 #mp a[href="/privmsg?mode=post"]:hover::before {
     color: #5d5c5c;
}
 #mp a[href="/privmsg?mode=post"] img {
     display: none;
}
/*Item MP*/
 .mp-item {
     background: #fefefe;
     padding: 10px;
     box-sizing: border-box;
     position: relative;
     display: flex;
     justify-content: space-between;
     border-left: 3px solid #b0b0b0;
}
 .mp-item + .mp-item {
     margin-top: 8px;
}
/*Item MP nouveau message*/
 .mp-item.new-mp {
     border-left: 3px solid #a16bdb;
}
 .mp-item > img {
     display: none;
}
 .mp-item > div > div:first-child {
     font-size: 11px;
     margin-bottom: 5px;
}
 .mp-item > div > div:first-child > a:first-child {
     margin-right: 5px;
     color: #1d1d1d;
     font-weight: bold;
     border-right: 1px solid #ccc;
     padding-right: 5px;
}
 .mp-item > div > div:nth-child(2) {
     text-transform: uppercase;
     color: #aaa;
     font-size: 9px;
     letter-spacing: 1px;
}
 .mp-bottom-btn {
     padding: 10px 10px 0px;
     display: flex;
     justify-content: flex-end;
}
 .mp-bottom-btn input, .mp-body-head input{
     transition: all 0.3s ease-in-out;
     border: 1px solid #aaa;
     font-family: inherit;
     text-transform: uppercase;
     font-size: 9px;
     color: #414141;
     cursor: pointer;
     background: #e9e9e9;
     padding: 5px;
}
 .mp-bottom-btn input:hover, .mp-body-head input:hover{
     border: 1px solid #848080;
     color: #414141;
}
 .mp-bottom {
     align-items: center;
     padding: 10px;
     display: flex;
     font-size: 10px;
}
 .mp-bottom a + div {
     margin-left: 10px;
}
 .mp-bottom a + div strong {
     color: #a16bdb;
}
 .mp-bottom div:last-of-type {
     margin-left: auto;
}
 .mp-bottom div:last-of-type a {
     color: #575757;
     transition: all 0.3s ease-in-out;
}
 .mp-bottom div:last-of-type a:hover {
     color: #999;
}
 .mp-bottom div:last-of-type a:last-child {
     margin-left: 10px;
}
 .mp-empty {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #969696;
}

Merci, c'est trop beau