Private message menu [phpBB2, phpBB3, PunBB, Invision, ModernBB]
Page 1 of 1
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:
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:
Step 3 - PhpBB2
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:
Step 3 - PhpBB3
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:
Step 3 - PunBB
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:
Step 3 - Invision
Go to AP > Display > Templates > Post & Private Messages > privmsgs_body and find on the top:
Step 3 - ModernBB
Replace it with :
Save and confirm changes on template.
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> </span></td>
<td>{SENTBOX_IMG}</td>
<td><span class="gen"><b>{SENTBOX}</b> </span></td>
<td>{OUTBOX_IMG}</td>
<td><span class="gen"><b>{OUTBOX}</b> </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.
Ape, invisible_fa, YoshiGM, SarkZKalie, TonnyKamper and كونان2000 like this post
Similar topics
» Guest Message (phpBB2 and punBB only)
» Phpbb2 codes converted to Invision
» phpbb2/phpbb3
» Advertising poster on PunBB & PHPBB2
» How do I know my forum is phpBB2 or phpBB3?
» Phpbb2 codes converted to Invision
» phpbb2/phpbb3
» Advertising poster on PunBB & PHPBB2
» How do I know my forum is phpBB2 or phpBB3?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum