PDA

View Full Version : Private Messages Enhancements - Private Message Inbox Bar Enhanced


CoryNickerson
02-19-2008, 10:00 PM
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.

https://vborg.vbsupport.ru/external/2008/02/14.jpg

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
02-20-2008, 04:39 PM
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
02-21-2008, 01:12 AM
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
02-21-2008, 10:10 AM
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
02-21-2008, 10:13 AM
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
02-21-2008, 08:52 PM
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
02-21-2008, 08:54 PM
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
02-22-2008, 05:59 PM
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
02-22-2008, 06:55 PM
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
02-22-2008, 08:58 PM
thank you very much my friend great hack !!

littlegun
07-28-2008, 12:41 PM
Cool, installed

Mostjolly
11-26-2008, 10:20 PM
CoryNickerson,

I don't know why mine isn't working as it's should be, what can you suggest?

I've attached a snapshot, hope it'll tell the whole story.

I'm looking forward for your support.

Cheers!
Minh

TriMe
11-27-2008, 02:02 AM
works great thanks. using 3.7.4