The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

Go down

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

Post by Wizzard November 9th 2024, 9:27 am

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:

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

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

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

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

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

This is how it will look after the change:

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

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 &gt; Display &gt; Templates &gt; Post &amp; Private Messages &gt; 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 &gt; Display &gt; Templates &gt; Post &amp; Private Messages &gt; 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 &gt; Display &gt; Templates &gt; Post &amp; Private Messages &gt; 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 &gt; Display &gt; Templates &gt; Post &amp; Private Messages &gt; 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. bounce
Wizzard
Wizzard
Forumember

Male Posts : 126
Reputation : 23
Language : English

https://net-cafe.forumotion.com/

Ape, invisible_fa, YoshiGM, SarkZKalie, TonnyKamper and كونان2000 like this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum