Neater Code, Quote, HTML and PHP boxes

[Yours Truly]

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

[RedGTiVR6]

very nice! Thanks for the info!

[cbiweb]

Excellent! Thank you!

*clicks Install*

[Yours Truly]

Excellent and great hack. Thank you, Sir :) -> Installed
For those which are familiar in using Andreas TMS (https://vborg.vbsupport.ru/showthread.php?t=152931) Hack, see the TMS Code if needed. Have fun ;) -Mike
Your welcome :)

What does that TMS .xml provide? :)

[Yours Truly]

Thank you ;)

Well, it contains your code modifications without doing all Template modifications by hand. All you have you have to do is to import this file. See Attachments below...

Pic 1: To Import TMS Files you can do it by clicking on that link.
Pic 2: Here you can see the Main Import Window.
Pic 3: Here you can see for example all imported TMS Files
Pic 4: Here you can see your Hack what has been imported with the code.

TMS is simply the greatest hack ever. In the course of time I changed all hacks into TMS. For all code modifications it's a lil bit hard in its effort, but it's always worth to do that. Once you know how easy it works you'll never miss TMS. Believe me ;) -Mike
Thanks :) I might take a look at this.

[Yours Truly]

Doesnt work, uninstalled until I find out why.
It works fine for me?

What seems to be the problem?

[YsTyle]

Great Mod, thank you! :)

(Marked as installed :))

[Yours Truly]

Your welcome :)

[Yours Truly]

Okay well if you need any help don't fret to ask :)

[DieselMinded]

I installed this but now my xxxxxxxx Is not working anymore

Help

[Yours Truly]

I installed this but now my xxxxxxxx Is not working anymore

Help
I don't understand what you mean?

[Endurer]

Excellent, I've it installed. :)

[Yours Truly]

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]

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/attachment.php?attachmentid=57863&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]

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?

[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!