Png Rounded Quotes (PRQ) v.3.10 - Valid XHTML 1.0

Png Rounded Quotes (PRQ) version 3.10 - Valid XHTML 1.0

Author: C?dric Claerhout

Thanks to : Elmer, Natch and d00d

Hack description: This hack, based on Elmer?s one, turns the traditional quotes into round quotes with PNG images as border. You can use it with light and dark backgrounds without any graphical problems. For Gif supporters, just use the adobe psd file include to create pictures yourself. Should take 5 minutes, time to open Photoshop and change .png to gif extension in the code.

Zip description : Code, PSD, Pictures ready to use, and useful information.

Time to install: 10 min

Compatible browsers : IE 6 (with png transparency patch), Firefox 1.x, Firefox 1.5x, Safari.

What's new:

20 february 2006 : version 3.10
-quotes are now included in just one table (instead of two)
-width bug for optional bbcodes in IE corrected
-works now with Safari

14 february 2006 : version 3.00
-code complitely rewritten for quotes AND bbcodes ; it shoud fix some display bugs with IE
-code patched to work with Firefox 1.5
-new option for quotes : one or two bubbles (thanks majorxp). See joined pictures to understand : citationmonobulle.jpg and citationdoublebulle.jpg

22 august 2005 : version 2.2
-code rewritten
-option bbcodes interface integrated in the zip files

17 august 2005 : version 2.1
-option : php and code tags template
-update .psd file in in quotesPNG_v2.1.zip
-put a missing png picture in quotesPNG_v2.1.zip
-Bug corrected in code template

16 august 2005 :
-Valid XHTML 1.0
-I had forgotten to join the transparency background version (70%).



Instructions:

First of all, you HAVE to install that hack.
Link : https://vborg.vbsupport.ru/showthread.php?t=93415 (need vB 3.5 RC)

It will allow png picture transparency work with Internet Explorer.

Then download the zip file and follow the instructions:

1. Login to your Admin Control Panel
2. In the Styles & Templates category, click on Style Manager and expand the group of templates in your prefered style, by clicking on the [<<>>] button.
3. Select the group of templates BB Code Layout. Click the 'Expand/Collapse' button, or double-click the group name to expand or collapse the BB Code Layout ? group of templates.
3. Now select the template bbcode_quote. Double-click the template name or click the 'Customize' button to edit this template.
4. Replace all the content in the template field withd the code provided in the txt file in the zip below.
5. Upload the folder "quotes" (or quotestr) containing all the images to your misc images directory of your style :

[style]/images/misc

Notes:

>You have to increase the amount of images to use in a post through your admin cp, because this mod use images and it counts as post images.
>If new png quotes pictures don?t appear immediately in your old messages, don?t panic and just wait. If you're hurry, just write a new message and it will work.
>I give you the PDF file so that you can modify if you want the quotes. Now it?s easy to do. I give you also a picture that helps you to localise where each segment of the PSD goes.
>Of course i?ve tested this hack, both in IE and Mozilla, and it works great.

Bonus
Once installed, you can make your code, html and php tags the same look if you want. Just go into the option directory included in the zip file, and replace the templates of each of this tags by the content of the text files.
N.B : For those three bbcode, the width depends on the value indicated in "All Style option" under "Code Block Width (pixels)".

[quanvo81]

Originally Posted by cclaerhout

Sorry After having a look into the archive file again, i can certify files are good.

Just try to post a new quote to check if the "bug" display isn't due to vB cache.

And of course, use code of "QuotesPNG_template.txt" text file. It should work.

Thanks cclaeehout , lol, I don't know what's wrong, probably the cache you said, after I went out to eat then come back home, I recheck it again then it show up 2 bubbles . :nervous:

It's weird coz I turned the cache off in Vbulletin Option already.
But anyway, it works great now. Thanks again.

[ehjay]

Works in FF, however Safari still fails to stretch the bottom half of the quotebit.

[cclaerhout]

Originally Posted by ehjay

Works in FF, however Safari still fails to stretch the bottom half of the quotebit.

Ok, i undersdant the problem now ; i'll try to find a solution (i hope) but in France it's late, i must go to bed

[cclaerhout]

Originally Posted by ehjay

Works in FF, however Safari still fails to stretch the bottom half of the quotebit.

Tell me this code works now with Safari All the quotation uses only one table instead of two.

<div style="align:left;margin-top:5px;margin-bottom:5px;width:50%;color:black;">
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="37" style="background-image:url($stylevar[imgdir_misc]/quotes/06.png);background-repeat:no-repeat;width:37px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/07.png);background-repeat:repeat-x;width:1px;height:24px;" valign="middle" nowrap="nowrap">
		<div class="smallfont" nowrap="nowrap">$vbphrase[quote]:</div></td>
		<td width="16" style="background-image: url($stylevar[imgdir_misc]/quotes/08a.png);background-repeat:no-repeat;width:16px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:16px;"></div><!-- /FF 1.5 Patch--></td>
	<if condition="$show[username]">
		<td width="17" style="background-image: url($stylevar[imgdir_misc]/quotes/08b.png);background-repeat:no-repeat;width:17px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:17px;"></div><!-- /FF 1.5 Patch--></td>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/09.png);background-repeat:repeat-x;width:1px;height:24px;" valign="middle" nowrap="nowrap">
		<div class="smallfont" nowrap="nowrap"><phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase></div></td>
		<td width="18" style="background-image:url($stylevar[imgdir_misc]/quotes/10.png);background-repeat:no-repeat;width:18px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</if>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/11.png);background-repeat:repeat-x;width:100%;height:24px;" nowrap="nowrap"></td>
		<td width="18" style="background-image:url($stylevar[imgdir_misc]/quotes/12.png);background-repeat:no-repeat;width:18px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
	<tr>
		<td width="37" style="background-image: url($stylevar[imgdir_misc]/quotes/04.png);width:37px;height:1px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td colspan="<if condition="$show[username]">6<else />3</if>" width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/00.png);width:100%;height:1px;margin-right:24px;padding-top:8px;" class="smallfont">
		<if condition="$show[username]"><i>$message</i><else />$message</if></td>
		<td width="18" style="background-image: url($stylevar[imgdir_misc]/quotes/05.png);width:18px;height:1px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
	<tr>
		<td width="37" style="background-image: url($stylevar[imgdir_misc]/quotes/01.png);width:37px;height:14px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td colspan="<if condition="$show[username]">6<else />3</if>" width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/02.png);width:100%;height:14px;" nowrap="nowrap"></td>
		<td width="18" style="background-image: url($stylevar[imgdir_misc]/quotes/03.png);width:18px;height:14px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
</table>
</div>

[ehjay]

fixed the width bug -- only remaining issue I see is that it breaks when the username is included in the quote header:

[cclaerhout]

Originally Posted by ehjay

fixed the width bug -- only remaining issue I see is that it breaks when the username is included in the quote header:

Is it with IE or Safari ?

[ehjay]

Safari, hence my attachment.

[cclaerhout]

Sorry i was busy yesterday.

I think this code should work :

<div style="align:left;margin-top:5px;margin-bottom:5px;width:100%;color:black;">
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="37" style="background-image:url($stylevar[imgdir_misc]/quotes/06.png);background-repeat:no-repeat;width:37px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/07.png);background-repeat:repeat-x;width:1px;height:24px;" valign="middle" nowrap="nowrap">
		<div style="width:100%;" class="smallfont" nowrap="nowrap">$vbphrase[quote]:</div></td>
		<td width="16" style="background-image: url($stylevar[imgdir_misc]/quotes/08a.png);background-repeat:no-repeat;width:16px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:16px;"></div><!-- /FF 1.5 Patch--></td>
	<if condition="$show[username]">
		<td width="17" style="background-image: url($stylevar[imgdir_misc]/quotes/08b.png);background-repeat:no-repeat;width:17px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:17px;"></div><!-- /FF 1.5 Patch--></td>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/09.png);background-repeat:repeat-x;width:1px;height:24px;" valign="middle" nowrap="nowrap">
		<div style="width:100%;" class="smallfont" nowrap="nowrap"><phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase></div></td>
		<td width="18" style="background-image:url($stylevar[imgdir_misc]/quotes/10.png);background-repeat:no-repeat;width:18px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</if>
		<td width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/11.png);background-repeat:repeat-x;width:100%;height:24px;" nowrap="nowrap"></td>
		<td width="18" style="background-image:url($stylevar[imgdir_misc]/quotes/12.png);background-repeat:no-repeat;width:18px;height:24px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
	<tr>
		<td width="37" style="background-image: url($stylevar[imgdir_misc]/quotes/04.png);background-repeat:repeat-y;width:37px;height:1px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td colspan="<if condition="$show[username]">6<else />3</if>" width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/00.png);background-repeat:repeat;width:100%;height:1px;margin-right:24px;padding-top:8px;" class="smallfont">
		<if condition="$show[username]"><i>$message</i><else />$message</if></td>
		<td width="18" style="background-image: url($stylevar[imgdir_misc]/quotes/05.png);background-repeat:repeat-y;width:18px;height:1px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
	<tr>
		<td width="37" style="background-image: url($stylevar[imgdir_misc]/quotes/01.png);width:37px;height:14px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:37px;"></div><!-- /FF 1.5 Patch--></td>
		<td colspan="<if condition="$show[username]">6<else />3</if>" width="100%" style="background-image: url($stylevar[imgdir_misc]/quotes/02.png);background-repeat:repeat-x;width:100%;height:14px;" nowrap="nowrap"></td>
		<td width="18" style="background-image: url($stylevar[imgdir_misc]/quotes/03.png);width:18px;height:14px;" nowrap="nowrap"><!-- FF 1.5 Patch--><div style="width:18px;"></div><!-- /FF 1.5 Patch--></td>
	</tr>
</table>
</div>

[ehjay]

Naw, it still exists. The second bubble's size has been shrunk, but it still line breaks and causes the quotebit to break as I showed in my last post.

[cclaerhout]

Ok i think i've found why there is a bug with Safari :

Konqueror doesn't honor the nowrap tag in <td> elements.

How nice !