Private Message Count Icon

Started by Mick, Jul 30, 2018

Jul 30, 2018 Last Edit: Aug 17, 2018 by Mick

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>';


See the Pen Mail by Mick (@Mick-) on CodePen.



References:
https://dribbble.com/shots/1070802-Mail
Looking cool, thanks Mick!