UseBB Community

If you like the code box that phpbb is using than apply the changes...

The old one what is using by usebb

Just testing the new code box with link to select the text in the code box.

This box will scroll if there are many lines of code.

test line
test line
test line
test line
test line
test line
test line
test line
test line
test line
test line

The new one without selected text:


The new one with selected text:


You can change the colors in the css file.

Apply changes:
Step 1: open sources/javascripts.js

add at the end of the file below the latest }

function selectCode(a)
{
	var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

	if (window.getSelection)
	{
		var s = window.getSelection();
		if (s.setBaseAndExtent)
		{
			s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
		}
		else
		{
			var r = document.createRange();
			r.selectNodeContents(e);
			s.removeAllRanges();
			s.addRange(r);
		}
	}
	else if (document.getSelection)
	{
		var s = document.getSelection();
		var r = document.createRange();
		r.selectNodeContents(e);
		s.removeAllRanges();
		s.addRange(r);
	}
	// IE
	else if (document.selection)
	{
		var r = document.body.createTextRange();
		r.moveToElementText(e);
		r.select();
	}
}

Step 2: open templates/default/style.css

add at the end of the file below the latest }

.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.4em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #333333;
}

dl.codebox {
	padding: 3px;
	background-color: #FFFFFF;
	border: 1px solid #d8d8d8;
	font-size: 1em;
}

dl.codebox dt {
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	font-size: 0.8em;
	font-weight: bold;
	display: block;
}

dl.codebox dt a:link, a:visited  {
	color:blue; //color of link select all
}

blockquote dl.codebox {
	margin-left: 0;
}

dl.codebox code {
	overflow: auto;
	display: block;
	height: auto;
	max-height: 200px;
	white-space: normal;
	padding-top: 5px;
	font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
	line-height: 1.3em;
	color: green; //text color of text in box
	margin: 2px 0;
}

Step 3: open templates/default/global.tpl.php

Find and replace the follow line

	'code_format'						=> '<pre class="code">%s</pre>',

REPLACE WITH:

	'code_format'						=> '<div class="content"><dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a></dt><dd><code>%s</code></dd></dl></div>',

That's all hope you like it, if you run into any problem just ask.

greetings

p.s.: sorry for breaking the forum style with the large images

You can see the code box on this demo site