Advertisement:
NameCheap

Author Topic: PM Notification applying style  (Read 3305 times)

Offline {dhayzon}

  • Full Member
  • ***
  • Posts: 683
  • Gender: Male
  • DhayZone RevolutioN
    • facebook/fsfreie on Facebook
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://www.dhayzon.com/
PM Notification applying style
« on: May 23, 2013, 11:58:09 PM »
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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,986
  • Master of BBC Abuse
Re: PM Notification applying style
« Reply #1 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.

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

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

Code: [Select]
.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;
}
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline FrizzleFried

  • Drama-Monger
  • Sr. Member
  • ****
  • Posts: 724
Re: PM Notification applying style
« Reply #2 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?

Offline {dhayzon}

  • Full Member
  • ***
  • Posts: 683
  • Gender: Male
  • DhayZone RevolutioN
    • facebook/fsfreie on Facebook
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://www.dhayzon.com/
Re: PM Notification applying style
« Reply #3 on: May 25, 2013, 12:07:02 PM »
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

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,986
  • Master of BBC Abuse
Re: PM Notification applying style
« Reply #4 on: May 25, 2013, 06:16:12 PM »
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).
Mods - Manky Old Themes - Apocalypse theme (WIP)

Quote
(11:43:45 AM) Antechinus: of course, it's also possible that I'm an arrogant know it all bastard
(11:43:59 AM) Eliana Tamerin: you are :P
(11:44:21 AM) Antechinus: hmmph

Offline warezxts

  • Semi-Newbie
  • *
  • Posts: 41
Re: PM Notification applying style
« Reply #5 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?

Offline rik300

  • Newbie
  • *
  • Posts: 9
Re: PM Notification applying style
« Reply #6 on: March 10, 2014, 06:51:32 AM »
its hiding under the header:(  how to fix it ?
Thanks!

Offline .Elephant

  • Full Member
  • ***
  • Posts: 616
  • <3
Re: PM Notification applying style
« Reply #7 on: October 30, 2014, 05:02:42 PM »
its hiding under the header:(  how to fix it ?
Thanks!


 You should edit your 'top' in index.css



This works for me:

Code: [Select]
.pm_lovetroops {
  display: block;
  position: absolute;
  right: -6px;
  top: 9px;
  line-height: 16px;
  border: 1px solid;
  height: 16px;
  padding: 0 5px;
  font-family: Arial, sans-serif;
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
}

.pm_lovetroops {
  background: #67c1ef;
  border-color: #30aae9;
  background-image: -webkit-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -moz-linear-gradient(top, #acddf6, #67c1ef);
  background-image: -o-linear-gradient(top, #acddf6, #67c1ef);
  background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
}



http://lovetroops.com
« Last Edit: October 30, 2014, 05:30:26 PM by .Elephant »