vb.org Archive - Miscellaneous Hacks

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:

HTML Code:

<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[imgdir_button]/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:

Code:

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

HTML Code:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Please Mark as Installed if you use this. :)

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01192 seconds Memory Usage 1,734KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)bbcode_code_printable (2)bbcode_html_printable (2)bbcode_php_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (8)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: