BB Code Enhancements - IBP BB Code Style For vBulletin 3.8x

//////////////
// 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.

You are free to reuse this code for any modification that is free to vBulletin.org users

For a look thats a little more and different you can check out this post: https://vborg.vbsupport.ru/showpost....6&postcount=26

[Leo Brazil]

Great Idea. Installed !!

I've just changed some colors to fit my stile and that's it, perfect.

Thanks for sharing.

[tehPARADOX]

Any way to make this into the BBCODE Code block?

[Blue.Extreme]

How about HTML - Quote - PHP ...

[SEOvB]

Originally Posted by Blue.Extreme

How about HTML - Quote - PHP ...

This is for Quote,

I'll be making the others soon as I get a few free minutes.

[liselotte]

works great

[nul7]

Just wanted to say thanks, and to share a little modification I did:

Images

See Attached. Upload q.gif and q2.gif to your misc images directory (Example: http://www.yoursite.com/forum/images/misc).



CSS

You'll need to make an edit to apply to your forum. Just replace PATHTOYOURMISCIMAGEDIR in the code below with the full path to your misc images directory (Example: http://www.yoursite.com/forum/images/misc).

.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: #FAFCFE url("PATHTOYOURMISCIMAGEDIR/q2.gif") no-repeat bottom right;
        min-height: 75px; 
	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;
}

bbcode_quote

No edits necessary.

<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">
		<img class="inlineimg" src="$stylevar[imgdir_misc]/q.gif" border="0" alt="$vbphrase[quote]" />&nbsp;&nbsp;
					$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">		<img class="inlineimg" src="$stylevar[imgdir_misc]/q.gif" border="0" alt="$vbphrase[quote]" />&nbsp;&nbsp;$vbphrase[quote]:</div>
				<div class="quotemain">$message</div>
			</if>
</div>
</div>

Note: There is one small caveat. To make things look right with the larger blue quotation mark, I had to set a min-height to the cell. This means that when there's only a few lines of text, it looks a little oversized (See attached sample). The quotation mark will stay in the lower right hand corner, no matter how big the quote it.

[SEOvB]

Nice work, I like it./

[Madlike]

Thank you

[Indyaboard]

Now this is good stuff, thanks bro. :up:

[ShawneyJ]

thank you sir