FM Themes
Welcome to FM Themes
where you can share your ModernBB, punBB, phpBB 2, Invision, & phpBB 3 themes for Forumotion forums.

You are viewing the forum as a guest, so you will not be able to use the full forum. To use all the features of the forum, you need to log in or create a FREE account by registering.
Share
View previous topicGo downView next topic
avatar
VIP Member
VIP Member
Posts : 29
Points : 422
Reputation : 7
View user profilehttp://www.thinktankforum.net

Make notifications number a stylish box

on Sun Jan 15, 2017 9:27 am
Hello,

With this tutorial you will learn how to accomplish this result with the notifications number:


This will have as a result the number of the notifications that are shown in the parenthesis to show up as the image. In a red box over the notifications. Now if you want to relocate that box you can move it as you wish.

To do that all you need to do is add this in your CSS:
Code:
a#fa_notifications.rightHeaderLink{position:relative!important}

span#notif_unread {
    background: #c24747;
    border-radius: 5px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-left: -2px!important;
    padding: 0 4px;
    position: absolute;
    text-align: center;
    top: -10px;
}

That is all. Now if you want to relocate it you can play with
Code:
margin-left
and
Code:
top
variables in the
Code:
span#notif_unread
element.

Enjoy!! study bounce cheers
avatar
Administrator
Administrator
Posts : 3943
Points : 1840
Reputation : 311
View user profilehttps://www.fmthemes.net

Re: Make notifications number a stylish box

on Sun Jan 15, 2017 2:29 pm
Message reputation : 100% (1 vote)
Tutorial Accepted
avatar
VIP Member
VIP Member
Posts : 29
Points : 422
Reputation : 7
View user profilehttp://www.thinktankforum.net

Re: Make notifications number a stylish box

on Sun Jan 15, 2017 6:42 pm
Thank you @SLGray! Smile
avatar
Administrator
Administrator
Posts : 3943
Points : 1840
Reputation : 311
View user profilehttps://www.fmthemes.net

Re: Make notifications number a stylish box

on Sun Jan 15, 2017 6:56 pm
You're welcome.
avatar
VIP Member
VIP Member
Posts : 299
Points : 56475
Reputation : 87
View user profilehttp://iconskouliki.forumgreek.com

Re: Make notifications number a stylish box

on Mon Jan 16, 2017 1:17 am
great i add this to my forum thanks !!
avatar
VIP Member
VIP Member
Posts : 29
Points : 422
Reputation : 7
View user profilehttp://www.thinktankforum.net

Re: Make notifications number a stylish box

on Tue Jan 17, 2017 1:09 pm
Excellent! Thanks for letting me know it works for you! Smile I hope you like it! Smile
avatar
VIP Member
VIP Member
Posts : 299
Points : 56475
Reputation : 87
View user profilehttp://iconskouliki.forumgreek.com

Re: Make notifications number a stylish box

on Wed Jan 18, 2017 1:00 am
yes worked perfect (invision and punbb)
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum