Inner Border on Textarea (Quick Reply and Reply)

[sebaot]

I've been customizing things for my forum, but I can't find where to customize this inner border on the textarea where you type in a message. You can set the textarea border to 1 pixel, but it doesn't change this inner padded wall. I can't find it in any style. I'm including a screenshot of this. Does anybody know where I can remove that padded border? Or at least change the color of it. When I go with a dark forum, it stays the same color as in the attached screenshot.

Thanks in advance!

EDIT: I'm using VB 3.7.0

[Taragon]

It isn't exactly what you're looking for, but it 'll probably help you out: https://vborg.vbsupport.ru/showthread.php?t=197406

Edit: the class you're looking for is called .vBulletin_editor
It's most likely somewhere in the templates or hardcoded in the files.

[sebaot]

I've found a bit of a solution. I've not fixed the colors on the buttons, but I've achieved the look I was after.

First, I edited "Main CSS" to set the textarea to have a 1 px solid black border.

The CSS definitions for the editor was found in this template:

editor_css


<!-- Editor Styles -->
<style type="text/css" id="vbulletin_editor_css_dynamic">
<!--
@import url("clientscript/vbulletin_editor.css?v=$vboptions[simpleversion]");

// customized to remove padding and border
.vBulletin_editor {
background:#ff0000;
//background: {$istyles[pi_button_normal][0]};
//padding:0px;
border: 0px solid;
}

//
// customized to remove the background and border
//
.imagebutton {
//background: {$istyles[pi_button_normal][0]};
//color: {$istyles[pi_button_normal][1]};
padding: {$istyles[pi_button_normal][2]};
//border: {$istyles[pi_button_normal][3]};
}
.ocolor, .ofont, .osize, .osmilie, .osyscoloar, .smilietitle {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border: {$istyles[pi_menu_normal][3]};
}
.popup_pickbutton {
border: {$istyles[pi_menu_normal][3]};
}
.popup_feedback {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border-$stylevar[right]: {$istyles[pi_menu_normal][3]};
}
.popupwindow {
background: {$istyles[pi_menu_normal][0]};
}
#fontOut, #sizeOut, .popup_feedback div {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
}
.alt_pickbutton {
border-$stylevar[left]: 1px solid {$istyles[pi_button_normal][0]};
}
.popup_feedback input, .popup_feedback div
{
border: 0px solid;
padding: 0px 2px 0px 2px;
cursor: default;
font: 11px tahoma;
overflow: hidden;
}

//
// new class for customizing the advanced reply icon box
//
.controlbarIcons
{
padding: 4px;
border:1px solid black;
border-bottom:none;
}

//
// new class for customizing the quick reply
//
.controlbarTextArea
{
padding: 0px;
border:none;
}

//
// new class for customizing the advanced reply
//
.controlbarTextAreaAdvanced
{
padding: 0px;
border-left:none;
}
-->
</style>
<!-- / Editor Styles -->

Next, I removed old controlbar references and applied the new CSS classes above. Two templates need to be changed for this.

The quick reply template modification:

showthread_quickreply


<if condition="$show['editor_toolbar']">
<div id="{$editorid}_controls" class="controlbarIcons">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><img src="$stylevar[imgdir_editor]/removeformat.gif" width="21" height="20" alt="$vbphrase[remove_text_formatting]" /></div></td>
<if condition="$show['basic_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" /></div></td>
</if>
<if condition="$show['color_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" alt="" width="11" height="16" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['url_bbcode'] OR $show['img_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['url_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" /></div></td>
</if>
<if condition="$show['img_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>
</if>
<if condition="$show['quote_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" /></div></td>
</if>
<td width="100%">&nbsp;</td>
<if condition="is_browser('ie')">
<td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="$stylevar[imgdir_editor]/spelling.gif" width="21" height="20" alt="$vbphrase[check_spelling]" /></div></td>
</if>
<td>
<div class="imagebutton" id="{$editorid}_cmd_resize_0_99"><img src="$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" /></div>
<div class="imagebutton" id="{$editorid}_cmd_resize_1_99"><img src="$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" /></div>
</td>
<if condition="$show['wysiwyg_compatible']">
<td><div class="imagebutton" id="{$editorid}_cmd_switchmode"><img src="$stylevar[imgdir_editor]/switchmode.gif" width="21" height="20" alt="$vbphrase[switch_editor_mode]" /></div></td>
</if>
</tr>
</table>
</div>
</if>
<div class="controlbarTextArea">
<fieldset style="border:0px; padding:0px; margin:0px">
<if condition="$show['qr_require_click']">
<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="width:100%; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]" disabled="disabled">$vbphrase[click_quick_reply_icon]</textarea>
<else />
<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="width:100%; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]"></textarea>
</if>
</fieldset>
<!--width:$stylevar[messagewidth]-->
</div>

<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />
<input type="hidden" name="styleid" value="$session[styleid]" />

<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie');
var QR_EditorID = '$editorid';
//-->
</script>


The advanced reply template:

editor_toolbar_on


$vBeditTemplate[clientscript]

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="$editorid" class="vBulletin_editor" width="100%">
<div id="{$editorid}_controls" class="controlbarIcons">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div class="imagebutton" id="{$editorid}_cmd_removeformat"><img src="$stylevar[imgdir_editor]/removeformat.gif" width="21" height="20" alt="$vbphrase[remove_text_formatting]" /></div></td>
<if condition="$show['font_bbcode'] OR $show['size_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['font_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontname" title="$vbphrase[fonts]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_font_out" style="width:91px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['size_bbcode']">
<td><div class="imagebutton" id="{$editorid}_popup_fontsize" title="$vbphrase[sizes]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="popup_feedback"><div id="{$editorid}_size_out" style="width:25px">&nbsp;</div></td>
<td class="popup_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['color_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_forecolor" title="$vbphrase[colors]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="{$editorid}_color_out"><img src="$stylevar[imgdir_editor]/color.gif" width="21" height="16" alt="" /><br /><img src="$vboptions[cleargifurl]" id="{$editorid}_color_bar" alt="" style="background-color:black" width="21" height="4" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['wysiwygsmilies']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_popup_smilie" title="$vbphrase[smilies]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_editor]/smilie.gif" alt="" width="21" height="20" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>
<if condition="$show['attach']">
<td><div class="imagebutton" id="{$editorid}_popup_attach" title="$vbphrase[attachments]">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="$stylevar[imgdir_editor]/attach.gif" alt="" width="21" height="20" /></td>
<td class="alt_pickbutton"><img src="$stylevar[imgdir_editor]/menupop.gif" width="11" height="16" alt="" /></td>
</tr>
</table>
</div></td>
</if>

<!--
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_cut"><img src="$stylevar[imgdir_editor]/cut.gif" width="21" height="20" alt="$vbphrase[cut]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_copy"><img src="$stylevar[imgdir_editor]/copy.gif" width="21" height="20" alt="$vbphrase[copy]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_paste"><img src="$stylevar[imgdir_editor]/paste.gif" width="21" height="20" alt="$vbphrase[paste]" /></div></td>
-->

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_undo"><img src="$stylevar[imgdir_editor]/undo.gif" width="21" height="20" alt="$vbphrase[undo]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_redo"><img src="$stylevar[imgdir_editor]/redo.gif" width="21" height="20" alt="$vbphrase[redo]" /></div></td>
<!--{%rsbutton%}-->
<td width="100%">&nbsp;</td>
<if condition="is_browser('ie') AND !is_browser('mac')">
<td><div class="imagebutton" id="{$editorid}_cmd_spelling"><img src="$stylevar[imgdir_editor]/spelling.gif" width="21" height="20" alt="$vbphrase[check_spelling]" /></div></td>
</if>
<td>
<div class="imagebutton" id="{$editorid}_cmd_resize_0_100"><img src="$stylevar[imgdir_editor]/resize_0.gif" width="21" height="9" alt="$vbphrase[decrease_size]" /></div>
<div class="imagebutton" id="{$editorid}_cmd_resize_1_100"><img src="$stylevar[imgdir_editor]/resize_1.gif" width="21" height="9" alt="$vbphrase[increase_size]" /></div>
</td>
<if condition="$show['wysiwyg_compatible']">
<td><div class="imagebutton" id="{$editorid}_cmd_switchmode"><img src="$stylevar[imgdir_editor]/switchmode.gif" width="21" height="20" alt="$vbphrase[switch_editor_mode]" /></div></td>
</if>
</tr>
</table>

<if condition="!$show['basicbbcodeonly']">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<if condition="$show['basic_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_bold"><img src="$stylevar[imgdir_editor]/bold.gif" width="21" height="20" alt="$vbphrase[bold]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_italic"><img src="$stylevar[imgdir_editor]/italic.gif" width="21" height="20" alt="$vbphrase[italic]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_underline"><img src="$stylevar[imgdir_editor]/underline.gif" width="21" height="20" alt="$vbphrase[underline]" /></div></td>
</if>
<if condition="$show['align_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_justifyright"><img src="$stylevar[imgdir_editor]/justifyright.gif" width="21" height="20" alt="$vbphrase[align_right]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifycenter"><img src="$stylevar[imgdir_editor]/justifycenter.gif" width="21" height="20" alt="$vbphrase[align_center]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_justifyleft"><img src="$stylevar[imgdir_editor]/justifyleft.gif" width="21" height="20" alt="$vbphrase[align_left]" /></div></td>
</if>
</if>
<if condition="$show['align_bbcode'] OR $show['list_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
</if>
<if condition="$show['list_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertorderedlist"><img src="$stylevar[imgdir_editor]/insertorderedlist.gif" width="21" height="20" alt="$vbphrase[ordered_list]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_insertunorderedlist"><img src="$stylevar[imgdir_editor]/insertunorderedlist.gif" width="21" height="20" alt="$vbphrase[unordered_list]" /></div></td>
</if>
<if condition="$show['align_bbcode'] OR $show['list_bbcode']">
<if condition="$stylevar['textdirection'] == 'ltr'">
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
<else />
<td><div class="imagebutton" id="{$editorid}_cmd_outdent"><img src="$stylevar[imgdir_editor]/indent.gif" width="21" height="20" alt="$vbphrase[decrease_indent]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_indent"><img src="$stylevar[imgdir_editor]/outdent.gif" width="21" height="20" alt="$vbphrase[increase_indent]" /></div></td>
</if>
</if>
<if condition="$show['url_bbcode'] OR $show['img_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$show['url_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_createlink"><img src="$stylevar[imgdir_editor]/createlink.gif" width="21" height="20" alt="$vbphrase[insert_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_unlink"><img src="$stylevar[imgdir_editor]/unlink.gif" width="21" height="20" alt="$vbphrase[remove_link]" /></div></td>
<td><div class="imagebutton" id="{$editorid}_cmd_email"><img src="$stylevar[imgdir_editor]/email.gif" width="21" height="20" alt="$vbphrase[insert_email_link]" /></div></td>
</if>
<if condition="$show['img_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>
</if>
</if>
<if condition="$show['quote_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_quote"><img src="$stylevar[imgdir_editor]/quote.gif" width="21" height="20" alt="$vbphrase[wrap_quote_tags]" /></div></td>
</if>
<if condition="$show['code_bbcode'] OR $show['html_bbcode'] OR $show['php_bbcode']">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
<if condition="$show['code_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_code"><img src="$stylevar[imgdir_editor]/code.gif" width="21" height="20" alt="$vbphrase[wrap_code_tags]" /></div></td>
</if>
<if condition="$show['html_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_html"><img src="$stylevar[imgdir_editor]/html.gif" width="21" height="20" alt="$vbphrase[wrap_html_tags]" /></div></td>
</if>
<if condition="$show['php_bbcode']">
<td><div class="imagebutton" id="{$editorid}_cmd_wrap0_php"><img src="$stylevar[imgdir_editor]/php.gif" width="21" height="20" alt="$vbphrase[wrap_php_tags]" /></div></td>
</if>
</if>
<if condition="$vBeditTemplate['extrabuttons'] != '' ">
<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>
$vBeditTemplate[extrabuttons]
</if>
</tr>
</table>
</if>

</div>

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="controlbarTextAreaAdvanced">
<tr valign="top">
<td>
<textarea name="message" id="{$editorid}_textarea" rows="10" cols="60" style="display:block; width:$stylevar[messagewidth]; height:{$editor_height}px" tabindex="1" dir="$stylevar[textdirection]">$newpost[message]</textarea>
</td>
<if condition="$smiliebox"><td>$smiliebox</td></if>
</tr>
</table>
</td>
</tr>
</table>

<input type="hidden" name="wysiwyg" id="{$editorid}_mode" value="$editortype" />

<script type="text/javascript">
<!--
vB_Editor['$editorid'] = new vB_Text_Editor('$editorid', $editortype, '$forumid', '$parsesmilie', undefined, '$ajax_extra');
//-->
</script>

I didn't highlight the text that I've changed. I'm new to posting here, so I didn't keep track of changes. :-) Anybody trying to apply these changes should carefully compare templates before submitting changes on their forum.

I've only tested posting a quick reply and an advanced reply. Both worked, but additional testing may prove otherwise, so keep that in mind, please.

Screenshots of the new look included. My advanced textarea and icons were never lined up in the original forum, so it is what it is. I've not had the smilies-box enabled either, and I there is a reference to it in a template, so anybody using it might want to revise and post the new template changes here.

Colors aren't what they should be. Design is painstaking for somebody that's not a designer. :-)

[sebaot]

It isn't exactly what you're looking for, but it 'll probably help you out: https://vborg.vbsupport.ru/showthread.php?t=197406

Edit: the class you're looking for is called .vBulletin_editor
It's most likely somewhere in the templates or hardcoded in the files.

Thanks, your reply got me digging and put me on the right track! :-)

--------------- Added 1247342323 at 1247342323 ---------------

Looking at private messaging, I see there's some error. I'll see if I can work it out. Just a warning.

[Taragon]

Nice work!

May I suggest the use of Firefox, the plugin CSSViewer, and Firebug. It'll be a real time saver identifying things sometimes needed.

[sebaot]

I'm running FireFox, so I'll be getting those plugins! I see that for new thread and private messaging, it uses a different layout for the messaging, so it looks messed up. I'm gonna be looking at these. Well, I am looking at them but not on friendly terms. LOL.

[Freesteyelz]

If I remember correctly, I edited the /clientscript/vbulletin_editor.css file. That way in one sweep I can customize all of the templates. As for the buttons I edited the Toolbar Menu Options in the Admin Panel.

[sebaot]

I know I started out with overriding the controlbox (or what it's called) CSS definitions in that file, but for some reason, I went with the different solution. I'm not sure what prompted me to do it, but I think I didn't get the desired results. However, I just made changes as I went, so I could very well have overlooked something.

[Freesteyelz]

If you use the templates and not the CSS file, another option to consider instead of replacing the class name (controlbar) is to override the codes by adding "!important" at the end of each variable you want to change in the CSS definitions such as:

Original vbulletin_editor.css file:

/* the container for all the edit controls */
#controlbar, .controlbar
{
padding: 2px;
}



In your template "editor_css" apply this code to override the original (vbulletin_editor.css):


/* the container for all the edit controls */
#controlbar, .controlbar
{
padding:0 !important;
border:0 !important;
}



This way you'll keep the class definitions consistent, do not need to change the other templates and it makes change easier in the future. :)

[sebaot]

Awesome on the !important attribute. However, when I make changes to remove padding and border on controlbar, it spans the textarea over the containing area to the right by a few pixels. Visually, that is, it becomes inconsistent. It could be semantically correct, but something's off. I override vBulletin_editor with the same, and it still happens. It looks like in the showthread quick reply template, the container with the controlbar class has a hardcoded padding-right of 8 pixels for some reason.

I am including screenshots of what I mean. The blue border is vbulletin_editor, red is controlbar, and green is textarea.


<!-- Editor Styles -->
<style type="text/css" id="vbulletin_editor_css_dynamic">
<!--
@import url("clientscript/vbulletin_editor.css?v=$vboptions[simpleversion]");

.vBulletin_editor {
background: {$istyles[pi_button_normal][0]};
padding: 0px !important;
margin: 0px !important;
border: 1px solid blue !important;
}
.imagebutton {
background: {$istyles[pi_button_normal][0]};
color: {$istyles[pi_button_normal][1]};
padding: {$istyles[pi_button_normal][2]};
border: {$istyles[pi_button_normal][3]};
}
.ocolor, .ofont, .osize, .osmilie, .osyscoloar, .smilietitle {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border: {$istyles[pi_menu_normal][3]};
}
.popup_pickbutton {
border: {$istyles[pi_menu_normal][3]};
}
.popup_feedback {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
border-$stylevar[right]: {$istyles[pi_menu_normal][3]};
}
.popupwindow {
background: {$istyles[pi_menu_normal][0]};
}
#fontOut, #sizeOut, .popup_feedback div {
background: {$istyles[pi_menu_normal][0]};
color: {$istyles[pi_menu_normal][1]};
}
.alt_pickbutton {
border-$stylevar[left]: 1px solid {$istyles[pi_button_normal][0]};
}
.popup_feedback input, .popup_feedback div
{
border: 0px solid;
padding: 0px 2px 0px 2px;
cursor: default;
font: 11px tahoma;
overflow: hidden;
}

#controlbar, .controlbar
{
padding:0px !important;
border:1px solid red !important;
margin:0px !important;
}
-->
</style>
<!-- / Editor Styles -->

[Freesteyelz]

Hm, I like to be nearly if not exact too. I haven't actually gotten around to test it. I could experiment a bit to see why it's doing that.

[sebaot]

Absolutely, if it can't be made exact, it shouldn't be made at all. I get mental tics when I see small issues like that, knowing it'll have to be fixed sooner or later. LOL

[Freesteyelz]

3.8.3 has changed a little since I remember. I remember not liking how Firefox displayed the textarea within the editor (use of border inset). So I edited the file /clientscript/vbulletin_textedit.js. The structure of the js file has changed but I managed to find what I was looking for. I looked at two areas where inset was found and changed them to (in 3.8.3):


div.style.border="1px solid #000000";



if(!is_ie){this.editbox.style.border="1px solid #000000"}



Since you're using 3.7 the structures should be:


div.style.border = '2px inset';



if (!is_ie)
{
this.editbox.style.border = '2px inset';
}


When I add "display:none" to the class .controlbar the entire textarea is removed. When I simply removed the .controlbar I came out with the attachment below. It's probably not what you're looking for. However, it displays the same in IE and Firefox.