BB Code Enhancements - IBP Style bbCode: Quote

//////////////
// For SEO Chat and Webmaster Forums
// By: vBulletin Services
// Released for free use @ vB.org only!
/////////////

This will change the boring vBulletin quote into something with a little more life and spice for your forums. Change the boring quote bbCode to a little more snazz.

go to your styles and templates and locate the bbCode template group.
Double click the bbcode_quote template and replace the entire contents with

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

<div style="width:100%">
		
			<if condition="$show['username']">

				<div class="quotetop">
					$vbphrase[quote]: <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]" /></a></if>
				</div>
				<div style="font-style:italic" class="quotemain">$message</div>
			<else />
	<div class="smallfont quotetop">$vbphrase[quote]:</div>
				<div class="quotemain">$message</div>
			</if>
</div>
</div>

Save your new template, and open up the Main CSS editor (choose Main CSS From drop down)

All the way at the bottom under additional CSS enter

.quotetop
{
	width=98%
	color: #000;
	margin: 8px auto 0px auto;
	font-weight:bold;
	font-size:10px;
	padding: 8px;
	background-color:#E4EAF2;
	border-left: 4px solid #8394B2;
	border-top: 1px dotted #000;
	border-right: 1px dotted #000;
}
.quotemain
{
	width=98%
	color: #465584;
	background-color: #FAFCFE;
	border-left: 4px solid #8394B2;
	border-right: 1px dotted #000;
	/*border-top: 1px dotted #000;*/
	border-bottom: 1px dotted #000;
	padding: 4px;
	margin: 0px auto 8px auto;
}

End result is the attached image.

[NAZIA]

Installed...

[ricky_s]

Originally Posted by FRDS

Put it in your lower box, all the way at the very end

thanks!
and where can I find that small icon (magnifying glass) it seems to suit the style better than the original icon of the '>'

[ZomgStuff]

Hott, thank you!

[MentaL]

this is really nice.

[SEOvB]

Originally Posted by ricky_s

thanks!
and where can I find that small icon (magnifying glass) it seems to suit the style better than the original icon of the '>'

famfamfam.com i think was the name of the site.

I know its in the silk icon pack

[ishare]

For sure its much more cleaner and better design than the original vb layout.
Thanks a lot for this lovely/clean design.
I will appreciate it a lot if you also share this kinda layout for code, html and php too...
Thanks in advance...

[puertoblack2003]

how can i add a quote image?

[Delphiprogrammi]

Originally Posted by puertoblack2003

how can i add a quote image?

by modifying the .quotetop css class ... example

background:#color_here url(images/your_image.gif) no-repeat right;

[puertoblack2003]

Originally Posted by Delphiprogrammi

by modifying the .quotetop css class ... example

background:#color_here url(images/your_image.gif) no-repeat right;

thank you sir :up:

[twgogo]

i like it~Thx