Let's create a cool looking Private Message Sidebar Icon Count with CSS, HTML and PHP. The message count will increase upon new messages received. Nice colors, easy on the eyes, a bit of a Google icons style, width and height can be adjusted in the CSS to suit your needs.
Once the block is activated, click in the red bubble to read pm's
Create a PHP side block using your favorite portal. In the block permissions, set it to "Member" only.
Open your theme's CSS file and at the very end add:
.mail {
background-color: #07618B;
width: 250px;
height: 150px;
margin-top: 10%;
position: relative;
border-radius: 0px 0px 20px 20px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
}
.mail span {
display: inline-block;
position: absolute;
}
.shadow {
width: 129px;
top: 111px;
-webkit-transform: rotateZ(31deg);
z-index: 5;
left: 122px;
box-shadow: 0px -1px 6px 1px rgba(52, 73, 94,0.5);
}
.mail:after {
border-top: 75px solid transparent;
border-left: 124px solid #2980b9;
border-bottom: 75px solid #2980b9;
border-right: 127px solid #2471A3;
content: "";
position: absolute;
right: 0;
border-radius: 0px 0px 20px 20px;
}
.mail:before {
border-top: 75px solid transparent;
border-left: 124px solid transparent;
border-bottom: 75px solid #07618B;
border-right: 127px solid transparent;
content: "";
position: absolute;
top: -150px;
left: 0;
}
.paper {
position: absolute;
width: 222px;
height: 146px;
background: #E0E0E0;
left: 15px;
top: -16px;
}
.mail .paper .head, .mail .paper .body {
z-index: 9999;
}
.mail .paper .head {
width: 67px;
background: #C7C7C7;
height: 9px;
left: 16px;
}
.mail .paper .body {
width: 192px;
height: 9px;
left: 16px;
background: #B3B3B3;
z-index: 0;
}
.mail .paper .span1 {
top: -40px;
}
.mail .paper .span2 {
top: -24px;
}
.mail .paper .span3 {
top: 15px;
}
.mail .paper .span4 {
top: 35px;
}
.mail .paper .span5 {
top: 55px;
}
.mail .paper .span6 {
top: 75px;
}
.mail .number {
top: -90px;
right: 0;
background: #FA565A;
color: #FFF;
padding: 4px 15px 4px 15px;
font-size: 2em;
border-radius: 50%;
box-shadow: -3px 2px 0px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.paper:before {
content: "";
width: 222px;
height: 58px;
background: #fafafa;
position: absolute;
top: -58px;
color: #ccc;
border-radius: 15px 15px 0px 0px;
}
.number a {
color: #ffffff;
}
.number a:hover {
color: #eeeeee;
}
Create a PHP side block and add:
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
<div class="mail">
<div class="paper">
<span class="head span1"></span>
<span class="head span2"></span>
<span class="body span3"></span>
<span class="body span4"></span>
<span class="body span5"></span>
<span class="body span6"></span>
</div>
<span class="number"><a href="', $scripturl, '?action=pm">', $context['user']['unread_messages'] , '</a></span>
<span class="shadow"></span>
</div>';
References:
https://dribbble.com/shots/1070802-Mail