WCF - New Way To Display Notifications v2 (CSS)

[LifesGreatestGift]

https://vborg.vbsupport.ru/external/2011/05/31.png


1) Upload included files
2) Open template header

Find

<vb:if condition="$notifications_total">
<li class="popupmenu notifications" id="notifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
<ul class="popupbody popuphover">
{vb:raw notifications_menubits}
</ul>
</li>
<vb:else />
<li class="popupmenu nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>


Replace with

<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>



Add the following code to the bottom of the template

<vb:if condition="$notifications_total">
<div class="wcf_notifications">
<div class="wcf_notifications_content">
<p>New Notification(s)</p>
<p>{vb:raw notifications_menubits}</p>
</div>
</div>
</vb:if>


3) Open template additional.css and add the following

.wcf_notifications {
background:url("images/wcf/50opacity.png") repeat 0 0 transparent;
border:1px solid #000000;
bottom: 20px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
}

.wcf_notifications_content {
background-color:transparent;
}

.wcf_notifications_content li a {
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.wcf_notifications_content li a:hover {
color: #FFFFFF;
text-shadow: 0 0 5px #FFFFFF;
}

.wcf_notifications_content p {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}


WindowsCommunityForum.com - Your source for Windows news discussion & support (http://www.windowscommunityforum.com)

[Juggernaut]

This looks just as good as the other notification edit you released, but without having to edit the headinclude template. :D

[LifesGreatestGift]

Thanks. Also no javascript ;)

[Juggernaut]

It looks just as good, in my opinion. Marked as installed and rated 5 stars. :D

[MagicThemeParks]

Looks very nice! :up:

Wish there was an option for us vB 3.8x folks. Maybe someday :)

[Dr.osamA]

thank you man

rated 5 stars Excellent

for arabic users:
لترجمة الكود ابحث في الكود التالي

<vb:if condition="$notifications_total">
<div class="wcf_notifications">
<div class="wcf_notifications_content">
<p>New Notification(s)</p>
<p>{vb:raw notifications_menubits}</p>
</div>
</div>
</vb:if>

عن السطر التالي:
<p>New Notification(s)</p>
و استبدله بالتالي
<p>تنبيهـات جديدة</p>

thanx

[tafreeh]

looooks good.
question: Does page need to be reload, in order for notification to display? or is like Facebook ?

[BCP Hung]

Good job man ! Installed/Taged/Monimation !

[LifesGreatestGift]

looooks good.
question: Does page need to be reload, in order for notification to display? or is like Facebook ?

Its just like the built-in vB notifications. You must reload the page to see it initially, or to see if there are any updates/additions. Also, clicking the link (for PM's) wont clear the notification, you must read the PM first, then go to another page (just like vB)

[Taurus1]

That is awesome. Thank you very much. I really liked the other version, but because of javascript conflict, I could not use it. This works flawlessly, and looks great too!

[cosmicsea]

Any plans to use ajax to show the notifications without refreshing? That would be sweet! Even without ajax it looks like it would be very nice but one problem I would have with it is I think there should be a way to close it otherwise it could just annoy some people who don't feel like reading a message or whatever. I assume there has to be a way to add a little javascript to it to maybe add an "x" button to close the div.

[LifesGreatestGift]

I was trying to keep it as no JS, but i could use some jQuery and cookies to allow it to be closed. Will work on it over the next few days.

[Lestat_]

awesome improvement ! thanks mate

[billstelling]

Could i get you to do the transparency for a dark site. Basically the opposite.. Or better yet, maybe even do a pack with multiple colors to choose from for the transparency. blue would look good on my site. Also point out were to change text color for those who can't figure it out..
yes i can do it all myself, just though it would be a good add to your mod.. I really like it too, good job! 5 stars..

[doobiefillin]

installed great job!

[CK]

I have the other mod installed by TW7 but this looks cool too. Tagged.

[just.b.jealous]

This is a great mod, how can I get all other notifications to show up as well, like new visitor messages, new achievements, new mentions, new incoming friend requests, etc?

EDIT: Nevermind, lol, it's already there

[Twikitero]

Hello, here I leave a small change which makes the edges to Rodondo.
I think this looks a little nicer.

Image demo

http://img26.imageshack.us/img26/2518/demos.png

1) Open template additional.css and add the following

.wcf_notifications {
background:url("images/wcf/50opacity.png") repeat 0 0 transparent;
margin: 0 auto 15px auto;
padding: 0px;
border: 1px solid #d7d7d7;

-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
behavior: url(border-radius.htc);
bottom: 80px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
}

.wcf_notifications_content {
background-color:transparent;
}

.wcf_notifications_content li a {
color: #FFFFFF;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.wcf_notifications_content li a:hover {
color: #FFFFFF;
text-shadow: 0 0 5px #FFFFFF;
}

.wcf_notifications_content p {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

Regards

[rasp187]

Nice mod. Thanks.

[fluidswork]

Great job .............

[LifesGreatestGift]

replace

.wcf_notifications {
background:url("images/wcf/50opacity.png") repeat 0 0 transparent;
border:1px solid #000000;
bottom: 20px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
}

with

.wcf_notifications {
background-color:rgba(0, 0, 0, 0.5);
bottom: 20px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

[8thos]

replace

.wcf_notifications {
background:url("images/wcf/50opacity.png") repeat 0 0 transparent;
border:1px solid #000000;
bottom: 20px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
}

with

.wcf_notifications {
background-color:rgba(0, 0, 0, 0.5);
bottom: 20px;
left: 20px;
padding: 10px 15px;
position: fixed;
z-index: 10;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}This is awesome! Thank you!

About how long do you have left on figuring out how to make this AJAX (Real-Time)? I would pay for that.

[freekill0113]

thanks you very much :X

[Krusty1231]

Thanks. Working great!

[Donavaz]

if u can place a screenshot of it

[Wenbie]

Installed. I've used this mod for a day and already I have received complaints from members asking how to dismiss the notification because many of them have unread PMs or VMs that they don't intend to read, at least not immediately anyway.

It looks very elegant, but please consider making it dismissible (or even moveable), thank you!

[8thos]

Installed. I've used this mod for a day and already I have received complaints from members asking how to dismiss the notification because many of them have unread PMs or VMs that they don't intend to read, at least not immediately anyway.

It looks very elegant, but please consider making it dismissible (or even moveable), thank you!

https://vborg.vbsupport.ru/showthread.php?t=266914

[Sayrex]

I Like it :D

[Scanu]

This is awesome the first version do not work for me this is very great thank you :)

[Quest2be1]

I love this little template update. However, I am an admin on a website and I have user verification setup to moderate new users. I, along with the rest of my staff use to receive a notification for "users awaiting moderation" prior to the template adjustment. Do any of you know how I can get this notification to show up with the rest of them?

[Scanu]

If i'm right you mean this: https://vborg.vbsupport.ru/showthread.php?t=270190
The style is not the same but i've request the permission to TW7S for use this style on my mod and soon this style will be integrated (sorry for my english)

[Trevor Matthews]

Any chance that this would work with 4.1.7?

[Front Range 4x4]

Love it!

Installed, rated *****, nominated.

Proof that it's the little things that are often the very best!

Thank you!

[Black Snow]

Anyone got this working on 4.2.0 yet?

[Black Snow]

Nobody has this set up for 4.2.0?

Is there another mod which supports 4.2.0.

[NoMatt3r]

Works with 4.2.1

Just as great as your last one :)

[fxdigi-cash]

I like this mod, but too much coding... simple and efficient is always best!!

Thanks for the mod anyways!! :)

[tbworld]

I like this mod, but too much coding... simple and efficient is always best!!

Thanks for the mod anyways!! :)

What, in your opinion, is not efficient about the hack?

:)

[twistedsoul]

thanks