Private message menu [phpBB2, phpBB3, PunBB, Invision, ModernBB]

Working versions: phpBB2, phpBB3, PunBB, Invision, ModernBB
Licence: Licence Free
Description: In case you want to change your private message menu (appearance of inbox, sentbox, outbox, savebox) this tutorial is perfect for you. Let me show you the default one from each version:











This is how it will look after the change:



Steps to follow.

Step 1
Go to AP > Display > Pictures and Colors > Colors & CSS > CSS Stylesheet and paste this code:

Code:

#privmsgs-container {
  display: flex;
  justify-content: space-around; /* Evenly spaces the items */
  align-items: center;
  width: 90%;                    /* Container width set to 80% */
  margin: 0 auto;                /* Centers container in the parent */
  padding: 10px;
  background-color: #f0f0f0;     /* Optional: Light background for container */
  border-radius: 8px;            /* Optional: Rounds corners */
}

.privmsg-item {
  flex: 1;                       /* Each item takes equal space */
  text-align: center;            /* Centers text within each item */
      font-size: 15px;
    font-weight: 600;
    font-family: monospace;
}

.privmsg-item a {
  display: block;                /* Makes the link fill the entire item */
  padding: 10px 20px;            /* Adds space around the text */
  color: #333;                   /* Default link color */
  text-decoration: none;         /* Removes underline */
  transition: background-color 0.3s, color 0.3s; /* Smooth hover transition */
}

/* Styling for the active tab (without link) */
.privmsg-item.active {
  background-color: #0075ff;
  color: #fff;
  padding: 10px 20px;
}

.privmsg-item a:hover {
  background-color: #0075ff;     /* Background color on hover */
  color: #fff;                   /* Text color on hover */
}

Step 2

Go to AP > Modules > HTML & JAVASCRIPT > Javascript codes management and click to create a new script.
Name it "PM Menu active styling" and set for placement "In all the pages"

Paste this code there and save the script:

Code:

$(document).ready(function() {
// Select all tab items
const tabItems = document.querySelectorAll('#privmsgs-container .privmsg-item');

tabItems.forEach(item => {
  // Check if the item does NOT contain an <a> tag
  if (!item.querySelector('a')) {
    item.classList.add('active'); // Apply the active class to the item without a link
  }
});

});

Step 3 - PhpBB2

Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:

Code:

<table border="0" cellspacing="2" cellpadding="0" height="40">
                <tr valign="middle">
                    <td>{INBOX_IMG}</td>
                    <td><span class="gen"><b>{INBOX}</b>&nbsp;&nbsp;</span></td>
                    <td>{SENTBOX_IMG}</td>
                    <td><span class="gen"><b>{SENTBOX}</b>&nbsp;&nbsp;</span></td>
                    <td>{OUTBOX_IMG}</td>
                    <td><span class="gen"><b>{OUTBOX}</b>&nbsp;&nbsp;</span></td>
                    <td>{SAVEBOX_IMG}</td>
                    <td><span class="gen"><b>{SAVEBOX}</b></span></td>
                </tr>
            </table>

Step 3 - PhpBB3
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:

Code:

<ul id="privmsgs-menu">
 <li>{INBOX_IMG} {INBOX}</li>
 <li>{SENTBOX_IMG} {SENTBOX}</li>
 <li>{OUTBOX_IMG} {OUTBOX}</li>
 <li>{SAVEBOX_IMG} {SAVEBOX}</li>
</ul>

Step 3 - PunBB
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:

Code:

<ul class="pun-privmsg">
 <li>{INBOX_IMG} {INBOX}</li>
 <li>{SENTBOX_IMG} {SENTBOX}</li>
 <li>{OUTBOX_IMG} {OUTBOX}</li>
 <li>{SAVEBOX_IMG} {SAVEBOX}</li>
</ul>

Step 3 - Invision
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:

Code:

<ul class="privmsg clearfix">
   <li><div class="tabitem">{INBOX}</div></li>
   <li><div class="tabitem">{SENTBOX}</div></li>
   <li><div class="tabitem">{OUTBOX}</div></li>
   <li><div class="tabitem">{SAVEBOX}</div></li>
</ul>

Step 3 - ModernBB

Code:

<ul id="privmsgs-menu">
   <li><i class="ion-archive"></i>{INBOX}<div class="active"></div></li>
   <li><i class="ion-paper-airplane"></i>{SENTBOX}<div class="active"></div></li>
   <li><i class="ion-share"></i>{OUTBOX}<div class="active"></div></li>
   <li><i class="ion-bookmark"></i>{SAVEBOX}<div class="active"></div></li>
</ul>

Replace it with :

Code:

<div id="privmsgs-container">
  <div class="privmsg-item">{INBOX}</div>
  <div class="privmsg-item">{SENTBOX}</div>
  <div class="privmsg-item">{OUTBOX}</div>
  <div class="privmsg-item">{SAVEBOX}</div>
</div>

Save and confirm changes on template.