Simple Machines Community Forum

Customizing SMF => Modifications and Packages => Topic started by: Dhayzon on May 23, 2013, 11:58:09 PM

Title: PM Notification applying style
Post by: Dhayzon on May 23, 2013, 11:58:09 PM
Link to Mod (http://custom.simplemachines.org/mods/index.php?mod=3713)

(http://i.imgur.com/vwvOWA1.png)PM Notification style(http://i.imgur.com/vwvOWA1.png)

designed by Dhayzon


applies a simple style to notifications  with css3

screenshots


(http://i.imgur.com/FdBuKt5.png)


(http://i.imgur.com/k9oVdHZ.png) default teme


(http://i.imgur.com/NA6xNMY.png)

(http://i.imgur.com/RZcqeKf.png)

(http://i.imgur.com/k9oVdHZ.png) Custom theme

(http://i.imgur.com/1Acg1Pt.png)



(http://i.imgur.com/BkT02EJ.png) For support and comments and bug reporting, please use support topic.


(http://i.imgur.com/IVUOmZU.png) F5 PRESS FOR css update
Title: Re: PM Notification applying style
Post by: 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.

<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;
}
Title: Re: PM Notification applying style
Post by: 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
Title: Re: PM Notification applying style
Post by: Dhayzon on May 25, 2013, 12:07:02 PM
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
Title: Re: PM Notification applying style
Post by: Antechinus on May 25, 2013, 06:16:12 PM
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).
Title: Re: PM Notification applying style
Post by: 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?
Title: Re: PM Notification applying style
Post by: rik300 on March 10, 2014, 06:51:32 AM
its hiding under the header:(  how to fix it ?
Thanks!
(http://i.imgur.com/0LGWlsU.jpg)
Title: Re: PM Notification applying style
Post by: rik300 on November 02, 2014, 12:07:33 PM
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  (
Title: Re: PM Notification applying style
Post by: MythicalMonkey on September 04, 2017, 08:53:05 PM
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.