Private Messages Enhancements - Private Message Inbox Bar Enhanced

Hello,

This is officially my first modification submitted to this site. I've been working on my vBulletin forums customizing it for about 6 months now and I'm starting to get use to it. There will be some more modifications I will be submitting later.

Description:

This is a template modification that changes that boring green, orange, red colored bar above your PM's. This bar shows how much of your inbox is full out of the available space.

This is just a simple enhancement to use images for the bar instead of using colored cells.



Installation:
Time: 1 Minute.
Difficulty: Extremely Easy.
Template Modifications: 2.
Uploads: 2 images.

Directions:

1. Upload the 2 images to your images/misc folder. If you wish to store in a different location such as a theme folder that is fine. The images used in the bar can vary between theme since its locations are controlled in the CSS.

2. In pm_messagelist template,

Find: (line 43 - 49 default)

<table style="border:2px groove" cellpadding="0" cellspacing="1" border="0" width="100%">
	<tr>
		<if condition="$show['thisfoldertotal']"><td width="$tdwidth[folder]" style="background-color:red; font-size:10px" title="<phrase 1="$totalmessages">$vbphrase[messages_stored_in_folder_x]</phrase>">&nbsp;</td></if>
		<if condition="$show['allfolderstotal']"><td width="$tdwidth[total]" style="background-color:orange; font-size:10px" title="<phrase 1="$bbuserinfo[pmtotal]">$vbphrase[total_messages_in_all_folders_x]</phrase>">&nbsp;</td></if>
		<if condition="$tdwidth[quota] > 0"><td width="$tdwidth[quota]" style="background-color:green; font-size:10px" title="<phrase 1="$permissions[pmquota]">$vbphrase[maximum_allowed_messages_x]</phrase>">&nbsp;</td></if>
	</tr>		
</table>

Replace with:

<div class="inbox_bar_full" style="width:481px; height:20px;">
	<div style="float:left; height:20px; width:$tdwidth[folder]%;"></div>
	<div style="float:left; height:20px; width:$tdwidth[total]%;"></div>
	<div class="inbox_bar_empty" style="float:right;height:20px; width:$tdwidth[quota]%;"></div>	
</div>

3. In your Main CSS under Additional CSS Definitions,

Add:

/* Custom Private Message Inbox Bar Enhanced */

.inbox_bar_full {
background: url(images/misc/barfull.png);
}
.inbox_bar_empty {
background: url(images/misc/barempty.png);
background-position: right;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

THATS IT!!

Nothing else to do. Pretty simple edit and makes it look 10x better. You can adjust the images to change with the themes by changing the image location in each themes CSS.

In the zip I included a copy of these directions, the images and the PSD to the images.

Hope you like the mod!! More to come!!

Thanks!
Cory Nickerson
http://ezpk.net

Updates:
v1.0.0 Original release.
v1.0.1 Changed image height from 30px to 20px.

[indie2industry]

and it works perfectly

*installed*


EDIT:
OK,I found a problem. Your additional CSS Definitions code threw off 3 of 8 of my skins(I put it on all of them :-)).

For the ones where errors were created I removed the

opacity:.50;"

from the CSS you provided.

Now they ALL work perfectly.

[CoryNickerson]

Originally Posted by indie2industry

and it works perfectly

*installed*


EDIT:
OK,I found a problem. Your additional CSS Definitions code threw off 3 of 8 of my skins(I put it on all of them :-)).

For the ones where errors were created I removed the

opacity:.50;"

from the CSS you provided.

Now they ALL work perfectly.

Noted thanks.

I haven't ran into any errors with it yet. I've tried it in all browsers. What was the error message you got? Or what was effect in the physical appearance?

[indie2industry]

Originally Posted by CoryNickerson

Noted thanks.

I haven't ran into any errors with it yet. I've tried it in all browsers. What was the error message you got? Or what was effect in the physical appearance?

Ok, after a little work, I just removed the (") after the opacity:.50; and now its 100% perfect..


The error:
In the internet explorer, it removed all of my grey background tables on my forum homepage. I circled the effected areas in the attachment.

[TCE Killa]

I tried this but it messed my whole style up completely. Moved everything across to one side with lots of empty spaces and unwanted stuff. I might try to rearrange the CSS in a bit when I try it again. But for now, I am just using the normal one. Thanks for this though, I'll mark installed.

[CoryNickerson]

Originally Posted by indie2industry

Ok, after a little work, I just removed the (") after the opacity:.50; and now its 100% perfect..


The error:
In the internet explorer, it removed all of my grey background tables on my forum homepage. I circled the effected areas in the attachment.

Ah yes... At first I had the opacity in the div itself thats holding the image. It was using the style command. I guess I accidentally copied that end quotation. I removed it from the code. Thanks.

[CoryNickerson]

Originally Posted by TCE Killa

I tried this but it messed my whole style up completely. Moved everything across to one side with lots of empty spaces and unwanted stuff. I might try to rearrange the CSS in a bit when I try it again. But for now, I am just using the normal one. Thanks for this though, I'll mark installed.

If it messed your style up you most likely made a mistake. You have a test login I can use for your forums to see whats going on? I'll try to find out what went wrong. Thanks.

[Cobro]

i think i have done all thing right i hope but it shows up like this could you help me ?

this is great hack i really like it to work on my site plz help me check it out and see if you can see what is wrong

Installed!

[CoryNickerson]

Originally Posted by Cobro

i think i have done all thing right i hope but it shows up like this could you help me ?

this is great hack i really like it to work on my site plz help me check it out and see if you can see what is wrong

Installed!

Seems like the DIV's are too high. You must have updated the new images but left the div's height at 30px. Change it from 30px to 20px.

I just realized I didn't edit the code to 20px in the first thread. My mistake. I updated it.

[Cobro]

thank you very much my friend great hack !!