Round Quotes by BOP5

[BirdOPrey5]

Now that Internet Explorer 9 supports the "border-radius" property I thought it was time to update my old style round quotes with new, pure CSS based round quotes. The old quotes used small graphics in each corner to simulate roundness and had to be edited for each color and style you used.

This solution is all CSS based and uses your forums existing colors.

In your Admin CP -> Style Manager -> Edit Templates find the template: bbcode_quote

Erase it all and replace it with:


<div style="margin:20px; margin-top:5px; <if condition="$show['iewidthfix']">width: 100%;</if>">

<div width="100%">

<div class="alt2" style="border: 1px outset; border-color: #EEFFFF; font-style:normal; padding:$stylevar[cellpadding]px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;">


<div class="tcat" style="color: black; background-image:url('/forums/images/misc/quote_bar.png'); background-repeat:no-repeat; background-position: 100% 0; padding:3px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 3px;">
<if condition="$show['username']"><phrase 1="$username">$vbphrase[originally_posted_by_x]</phrase>
<if condition="$postid"><a href="showthread.php?$session[sessionurl]p=$postid#post$postid" rel="nofollow"><img class="inlineimg" src="$stylevar/viewpost.gif" border="0" alt="$vbphrase[view_post]" style="vertical-align: middle; position:relative; top:-2px;" /></a></if><else />&nbsp;</if>
</div>
<div style="font-style:italic">$message</div>
</div>
</div>
</div>



Next - Upload the file quote_bar.png to your images/misc directory.

quote_bar.png is optimized for the default vbulletin 3.x style. If you have different colors you will probably want to make your own graphic with your own colors. Just make sure it's the same height in pixels as the original.

That should look good on any light vBulletin style. If you have a black or dark style I would make 1 change:

Find:
<div class="tcat" style="color: black;
and change black to white or some other light color that fits your style. This will be the font color of the "Originally Posted by USERNAME" text.

If you want to uninstall simply revert the bbcode_quote template.

Demo: http://www.juot.net/forums/showthread.php?t=59271

Screenshot Attached.

Working and tested in the latest versions of IE, Firefox, Chrome, Opera and Safari.

NOTE: If you haven't already done so place this line at the top of your headinclude template for IE9 compatibility:
<meta http-equiv="X-UA-Compatible" content="IE=9" />

Please [I]Mark as Installed if you use this. :)

[BirdOPrey5]

Reserved.

[mesdar]

Thank you ..

[Max Taxable]

Installed!

Here's you a better showoff, BOP5, if you want to use it:

http://usmessageboards.com/showthread.php?t=9083

[prandah]

installed :D

thank you

correct
if your forum runs with root directory
change this line

/forums/images/misc/quote_bar.png

to

/images/misc/quote_bar.png

[matrex722]

installed

thank you

[BirdOPrey5]

Thanks. Please "Mark as Installed" in the top post.

[3saltoot]

installed...

Good wishes