Show Thread Enhancements - Neater Code, Quote, HTML and PHP boxes

Time taken: 2 Minutes
Difficulty: Easy as pie
What it does: This modifies the look of the boxes when people you the bbcode for PHP, HTML, Code and Quote.

You can also use this for Vb 3.5.x too

Go to:

Style manager --> [Style you want to edit] --> Main CSS --> Additional CSS Definitions

Add:

/* ***** new code styles ***** */
.bbccode{
 background: #FFF;
 border: 1px solid #FFCC66;
 border-top: 4px solid #FFCC66;
 padding: 5px;
 color: #996600;
 font-size: 12px;
}
.bbccodetitle{
 font-weight: bold;
 font-size: 10px;
 border: 0px;
 border-bottom: 1px dashed #CC6600;
 color: #CC6600;
 padding-bottom: 3px;
 margin-bottom: 5px;
}
/* ***** new html styles ***** */
.bbchtml{
 background: #FFF;
 border: 1px solid #c3ffa8;
 border-top: 4px solid #c3ffa8;
 padding: 5px;
 color: #7fa66e;
 font-size: 12px;
}
.bbchtmltitle{
 font-weight: bold;
 font-size: 10px;
 border: 0px;
 border-bottom: 1px dashed #82cc00;
 color: #82cc00;
 padding-bottom: 3px;
 margin-bottom: 5px;
}
/* ***** new php styles ***** */
.bbcphp{
 background: #FFF;
 border: 1px solid #ffa8a8;
 border-top: 4px solid #ffa8a8;
 padding: 5px;
 color: #990000;
 font-size: 12px;
}
.bbcphptitle{
 font-weight: bold;
 font-size: 10px;
 border: 0px;
 border-bottom: 1px dashed #cc0000;
 color: #cc0000;
 padding-bottom: 3px;
 margin-bottom: 5px;
}
/* ***** new quote styles ***** */
.bbcquote{
 background: #FFF;
 border: 1px solid #C2CFDF;
 border-top: 4px solid #C2CFDF;
 color: #333366;
 padding: 5px;
 font-size: 9px;
}
.bbcquotetitle{
 font-weight: bold;
 font-size: 10px;
 border: 0px;
 border-bottom: 1px dashed #003366;
 color: #003366;
 padding-bottom: 3px;
 margin-bottom: 5px;
}

Now go to:

Style manager --> [Style you want to edit] --> Edit Templates --> BB Code Layout Templates --> bbcode_code

Replace everything with:

<div class="bbccode">
 <div class="bbccodetitle">$vbphrase[code]:</div>
 <pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">$code</div></pre>
</div>
<br />

Now go to:

Style manager --> [Style you want to edit] --> Edit Templates --> BB Code Layout Templates --> bbcode_html

Replace everything with:

<div class="bbchtml">
 <div class="bbchtmltitle">$vbphrase[html_code]:</div>
 <pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">$code</div></pre>
</div>
<br />

Now go to:

Style manager --> [Style you want to edit] --> Edit Templates --> BB Code Layout Templates --> bbcode_php

Replace everything with:

<div class="bbcphp">
 <div class="bbcphptitle">$vbphrase[php_code]:</div>
 <pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr">
  <code style="white-space:nowrap">
   <!-- php buffer start -->$code<!-- php buffer end -->
  </code>
</div></pre>
</div>
<br />

Now go to:

Style manager --> [Style you want to edit] --> Edit Templates --> BB Code Layout Templates --> bbcode_quote

Replace everything with:

<div class="bbcquote">
 <if condition="$show['username']">
  <div class="bbcquotetitle">$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>$message</div>
 <else />
  <div class="bbcquotetitle">$vbphrase[quote]:</div>
  <div>$message</div>
 </if>
</div>
<br />

Et Voila!

Enjoy

[yoyoyoyo]

interesting

[yoyoyoyo]

I installed this and noticed that it added a few spaces before the php code. To fix this I changed the php replacement code to this:

<div class="bbcphp"><div class="bbcphptitle">$vbphrase[php_code]:</div><pre style="margin:0px; padding:$stylevar[cellpadding]px; width:$stylevar[codeblockwidth]; overflow:auto"><div dir="ltr"><code style="white-space:nowrap"><!-- php buffer start -->$code<!-- php buffer end --></code>

[RedGTiVR6]

I'm having an issue with long bits of code.

The [CODE ] [ /CODE ] tags are cropping the text if it is too long. There is a scrollbar on the bottom. Since the "yellow-ish" part extends the correct table width, I am not sure why there is a frame inside of it with a fixed width. Looks pretty bad IMHO.

http://www.mp3car.com/vbulletin/fusion-brain/107981-fusion-brain-software-feature-requests-2.html#post1143094

Any ideas how to fix this?

[Captain DDL]

Looks cool, but it screwed up my style.

[RedGTiVR6]

Anyone know if this will work in 3.7?

[Yours Truly]

It should do dude, but i aim to give this a relook soon as a few people have had issues!