News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

PM Notification applying style

Started by Dhayzon, May 23, 2013, 11:58:09 PM

Previous topic - Next topic

Dhayzon

Link to Mod

PM Notification style

designed by Dhayzon


applies a simple style to notifications  with css3

screenshots





 default teme






 Custom theme





For support and comments and bug reporting, please use support topic.


F5 PRESS FOR css update

Antechinus

You could simplify the coding for this. In Subs.php you don't really need the span and strong tags. Either of these would work.

<span class="notification_dz">' . $context['user']['unread_messages'] . '</span>

Or:

<strong class="notification_dz">' . $context['user']['unread_messages'] . '</strong>

You could also simplify your css. There's no need to declare !important anywhere, and some other stuff could be streamlined.

If you want font-weight: normal; for the pop-up, why are you using a strong tag in Subs? Better to just use a span. You shouldn't need text-align: center; either, as the span will shrink to fiit the content.

.notification_dz {
    z-index: 99;
    display: inline-block;
    position: absolute;
    top: -10px;
    right: -2px;
    line-height: 11px;
    margin-top: -11px;
    padding: 6px 8px;
    color: white;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    background: #e23442;
    border: 1px solid #911f28;
    border-radius: 11px;
    background-image: -webkit-linear-gradient(top, #e8616c, #dd202f);
    background-image: -moz-linear-gradient(top, #e8616c, #dd202f);
    background-image: -o-linear-gradient(top, #e8616c, #dd202f);
    background-image: linear-gradient(to bottom, #e8616c, #dd202f);
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.12);
}


.notification_dz:after {
content: "";
width: 0px;
height: 0px;
border: 9px solid transparent;
border-bottom: #e23442;
position: absolute;
top: 18px;
left: 2px;
}

FrizzleFried

This is pretty cool.   Would it be easy to add this same CSS to the GALLERY and POKES tabs that use the same
  • format originally as PM's?

    Any suggestions on how to do so?

Dhayzon

Quote from: Antechinus on May 24, 2013, 12:52:42 AM
You could simplify the coding for this. In Subs.php you don't really need the span and strong tags. Either of these would work.
...................

thanks for your advice

Antechinus

Quote from: FrizzleFried on May 25, 2013, 10:36:48 AM
This is pretty cool.   Would it be easy to add this same CSS to the GALLERY and POKES tabs that use the same
  • format originally as PM's?

    Any suggestions on how to do so?
Yes, it would be easy. You should be able to make them do anything you want, once you find the relevant code (presumably in Subs).

warezxts

For me its not working (neither of two versions)
by default i see:  Private Message [1]
if i install any of two types of mods, i only see private message only, and i can see only the new on my profile.
if i uninstall, i can see [1] again.
i have brightforest theme, but install was without error.
Any idea?

rik300

its hiding under the header:(  how to fix it ?
Thanks!

rik300

Can you please point me in the right direction where exactly i should add this code  i tried  edit header  and top menu and its dosnt work  (

MythicalMonkey

Quote from: warezxts on July 06, 2013, 06:22:56 AM
For me its not working (neither of two versions)
by default i see:  Private Message [1]
if i install any of two types of mods, i only see private message only, and i can see only the new on my profile.
if i uninstall, i can see [1] again.
i have brightforest theme, but install was without error.
Any idea?
im having this same issue with the mod.

Advertisement: