MyBB Community Forums

^_^

Control Panel » Template Manager » Edit Template » your template » codebuttons

This is my Whole Codebutton code. I remove thier bgcolor along with thier other elements and changed it to a CSS template

Quote:<script language="javascript">
var b_prompt = "$lang->b_prompt";
var i_prompt = "$lang->i_prompt";
var u_prompt = "$lang->u_prompt";
var font_prompt = "$lang->font_prompt";
var size_prompt = "$lang->size_prompt";
var color_prompt = "$lang->color_prompt";
var align_prompt = "$lang->align_prompt";
var quote_prompt = "$lang->quote_prompt";
var code_prompt = "$lang->code_prompt";
var php_prompt = "$lang->php_prompt";
</script>
<tr>
<td id="postbox">
<table cellspacing="0" cellpadding="2" border="0"  id="postbox"><tr>
<td>
<select name="font" onchange="insertCode('font', this.options[this.selectedIndex].value)">
<option value="-">$lang->font</option>
<option value="Arial">$lang->arial</option>
<option value="Courier">$lang->courier</option>
<option value="Impact">$lang->impact</option>
<option value="Tahoma">$lang->tahoma</option>
<option value="Times New Roman">$lang->times_new_roman</option>
<option value="Trebuchet MS">$lang->trebuchet_ms</option>
<option value="Verdana">$lang->verdana</option>
</select>
</td>
<td>
<select name="size" onchange="insertCode('size', this.options[this.selectedIndex].value)">
<option value="-">$lang->size</option>
<option value="small">$lang->small</option>
<option value="medium">$lang->medium</option>
<option value="large">$lang->large</option>
<option value="x-large">$lang->xlarge</option>
<option value="xx-large">$lang->xxlarge</option>
</select>
</td>
<td>
<select name="color" onchange="insertCode('color', this.options[this.selectedIndex].value)">
<option value="-">$lang->color</option>
<option value="white" style="color:white;">$lang->white</option>
<option value="black" style="color:black;">$lang->black</option>
<option value="red" style="color:red;">$lang->red</option>
<option value="yellow" style="color:yellow;">$lang->yellow</option>
<option value="pink" style="color:pink;">$lang->pink</option>
<option value="green" style="color:green;">$lang->green</option>
<option value="orange" style="color:orange;">$lang->orange</option>
<option value="purple" style="color:purple;">$lang->purple</option>
<option value="blue" style="color:blue;">$lang->blue</option>
<option value="beige" style="color:beige;">$lang->beige</option>
<option value="brown" style="color:brown;">$lang->brown</option>
<option value="teal" style="color:teal;">$lang->teal</option>
<option value="navy" style="color:navy;">$lang->navy</option>
<option value="maroon" style="color:maroon;">$lang->maroon</option>
<option value="limegreen" style="color:limegreen;">$lang->lime_green</option></select>
</select>
</td>
</tr></table>
</td>
<td nowrap  id="postbox" align="right"><input type="button" style="color: white; font: bold 11px verdana" value="$lang->close_tags" onclick="closeTags()"></td>
</tr>
<tr>
<td nowrap  id="postbox" colspan="2">
<table cellspacing="0" cellpadding="0" border="0"  id="postbox"><tr>
<td>
<img name="b" src="./images/Normalcodebuttons/bold.gif" onclick="insertCode('b')" class="toolbar_normal" onMouseOver="toolbarHover('b')" onMouseOut="toolbarUnHover('b')" onMouseDown="toolbarMouseDown('b')" alt="$lang->alt_bold">
<img name="i" src="./images/Normalcodebuttons/italics.gif" onclick="insertCode('i')" class="toolbar_normal" onMouseOver="toolbarHover('i')" onMouseOut="toolbarUnHover('i')" onMouseDown="toolbarMouseDown('i')" alt="$lang->alt_italic">
<img name="u" src="./images/Normalcodebuttons/underline.gif" onclick="insertCode('u')" class="toolbar_normal" onMouseOver="toolbarHover('u')" onMouseOut="toolbarUnHover('u')" onMouseDown="toolbarMouseDown('u')" alt="$lang->alt_underline">
<img src="./images/Normalcodebuttons/sep.gif" class="toolbar_normal">
<img name="align_left" src="./images/Normalcodebuttons/align_left.gif" onclick="insertCode('align', 'left')" class="toolbar_normal" onMouseOver="toolbarHover('align_left')" onMouseOut="toolbarUnHover('align_left')" onMouseDown="toolbarMouseDown('align_left')" alt="$lang->alt_left">
<img name="align_center" src="./images/Normalcodebuttons/align_center.gif" onclick="insertCode('align', 'center')" class="toolbar_normal" onMouseOver="toolbarHover('align_center')" onMouseOut="toolbarUnHover('align_center')" onMouseDown="toolbarMouseDown('align_center')" alt="$lang->alt_center">
<img name="align_right" src="./images/Normalcodebuttons/align_right.gif" onclick="insertCode('align', 'right')" class="toolbar_normal" onMouseOver="toolbarHover('align_right')" onMouseOut="toolbarUnHover('align_right')" onMouseDown="toolbarMouseDown('align_right')" alt="$lang->alt_right">
<img name="align_justify" src="./images/Normalcodebuttons/align_justify.gif" onclick="insertCode('align', 'justify')" class="toolbar_normal" onMouseOver="toolbarHover('align_justify')" onMouseOut="toolbarUnHover('align_justify')" onMouseDown="toolbarMouseDown('align_justify')" alt="$lang->alt_justify">
<img src="./images/Normalcodebuttons/sep.gif">
<img name="list_num" src="./images/Normalcodebuttons/list_num.gif" onclick="insertCode('list', '1')" class="toolbar_normal" onMouseOver="toolbarHover('list_num')" onMouseOut="toolbarUnHover('list_num')" onMouseDown="toolbarMouseDown('list_num')" alt="$lang->alt_numlist">
<img name="list_bullet" src="./images/Normalcodebuttons/list_bullet.gif" onclick="insertCode('list')" class="toolbar_normal" onMouseOver="toolbarHover('list_bullet')" onMouseOut="toolbarUnHover('list_bullet')" onMouseDown="toolbarMouseDown('list_bullet')" alt="$lang->alt_bulletlist">
<img src="./images/Normalcodebuttons/sep.gif">
<img name="img" src="./images/Normalcodebuttons/image.gif" onclick="insertCode('img')" class="toolbar_normal" onMouseOver="toolbarHover('img')" onMouseOut="toolbarUnHover('img')" onMouseDown="toolbarMouseDown('img')" alt="$lang->alt_image">
<img name="url" src="./images/Normalcodebuttons/url.gif" onclick="insertCode('url')" class="toolbar_normal" onMouseOver="toolbarHover('url')" onMouseOut="toolbarUnHover('url')" onMouseDown="toolbarMouseDown('url')" alt="$lang->alt_hyperlink">
<img name="email" src="./images/Normalcodebuttons/email.gif" onclick="insertCode('email')" class="toolbar_normal" onMouseOver="toolbarHover('email')" onMouseOut="toolbarUnHover('email')" onMouseDown="toolbarMouseDown('email')" alt="$lang->alt_email">
<img src="./images/Normalcodebuttons/sep.gif">
<img name="quote" src="./images/Normalcodebuttons/quote.gif" onclick="insertCode('quote')"  class="toolbar_normal" onMouseOver="toolbarHover('quote')" onMouseOut="toolbarUnHover('quote')" onMouseDown="toolbarMouseDown('quote')" alt="$lang->alt_quote">
<img name="code" src="./images/Normalcodebuttons/code.gif" onclick="insertCode('code')" class="toolbar_normal" onMouseOver="toolbarHover('code')" onMouseOut="toolbarUnHover('code')" onMouseDown="toolbarMouseDown('code')" alt="$lang->alt_code">
<img name="php" src="./images/Normalcodebuttons/php.gif" onclick="insertCode('php')" class="toolbar_normal" onMouseOver="toolbarHover('php')" onMouseOut="toolbarUnHover('php')" onMouseDown="toolbarMouseDown('php')" alt="$lang->alt_php">
</td>
</tr></table>
</td>
</tr>
<tr>
<td  id="postbox" colspan="2"><span class="smalltext"><input type="radio" name="mode" value="normal" onClick="changeMode('normal')"> $lang->normal_mode&nbsp;&nbsp;<input type="radio" name="mode" value="advanced" onClick="changeMode('advanced')"> $lang->advanced_mode</span></td>
</tr>
<script language='Javascript' src='jscripts/codebuttons.js'></script>

then you can edit the color to the theme area ... by adding at the bottom (Additional CSS)

#postbox {
background: #222222;
and other codes here...
}

the NormalCodebuttons is my Buttons folder... if you want them here.
http://www.acolhetz.uni.cc/myBB/files/No...uttons.rar

It has a transparent sides making it match on a dark them... Im also going to create transparent Blue Bordered buttons like that so it can match all themes ^^,

Now where would you do this in 1.2 with the changed templates and codebutton area?