Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.



Private Message Count Icon

Mick in Tutorials
Jul 30, 2018

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:
Code: [Select]
.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:
Code: [Select]
    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

Tagged with: icon count css php html 

Share This Post

Mick

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.

    



2 Comments

Dzonny
Sep 07, 2018
Looking cool, thanks Mick!
1

Mick
Sep 07, 2018
Looking cool, thanks Mick!
Thanx man,  :wink:
2



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up