Private Messages Enhancements - WCF - New Way To Display Notifications v2 (CSS)

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

[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



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 .............