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

[Yours Truly]

Originally Posted by DiesellMinded

I installed this but now my

 [html] xxxxxxxx

[/html] Is not working anymore

Help

I don't understand what you mean?

[Endurer]

Excellent, I've it installed.

[Yours Truly]

Originally Posted by Endurer

Excellent, I've it installed.

Your welcome

[DieselMinded]

How to add a smilie all the way to the top right hand cornor of the qoute box?

[Yours Truly]

Originally Posted by DiesellMinded

How to add a smilie all the way to the top right hand cornor of the qoute box?

A smilie? Like a smilie face? Or the thing you click so it takes you back to the quote?

[DieselMinded]

seen your Mod Where someone put this image on the upper right hand side ATTACHED

Personally im running you mod and like it but i think i would like to use a legend Instead .....

And Put the Qouted By info in the top left ....

https://vborg.vbsupport.ru/attachmen...3&d=1166574096

How can i do a legend instead Thanks !

https://vborg.vbsupport.ru/showthread.php?t=134387

[DiSpy]

the [code] tags adds a scrollbar if the text is too wide (because of the "pre" tags), but the right side of the scrollbar is outside the box. Any idea how to fix this?

Edit: nevermind... fixed it by adding style="width:525px;" to the top div tag (my stylevar[codeblockwidth] was set at 515, so I added 10px to the outer div).

[momo2]

is there any way the width can be adjusted so the whole page wont show
for example i do one Q and say HELLO it can be only as large as the 5 letters ?

[RedGTiVR6]

Notice the second code segment. If you use the code tags on a single line of code it doesn't work right.

Also, the scroll bars are entirely too tight. I'd like to move them out to more fully utilize the page size...any ideas?

[RedGTiVR6]

Originally Posted by DiSpy

the [code] tags adds a scrollbar if the text is too wide (because of the "pre" tags), but the right side of the scrollbar is outside the box. Any idea how to fix this?

Edit: nevermind... fixed it by adding style="width:525px;" to the top div tag (my stylevar[codeblockwidth] was set at 515, so I added 10px to the outer div).

can you tell me where you added this in the code?