How do I style the edit box border?

[Ratchet]

I've been trying to style the message input box with VB 3.5.2 but I'm not having much success.

What I want to do is remove the 2px inset border and replace it with a 1px solid border. With VB 3.0.x I used to have to edit the clientscript/vbulletin_editor.css file and change

border:2px inset;

to

border-width:1px;
border-style:solid;

then add

#htmlbox {border-color:#444;}

to my individual styles, which used to work ok but that no longer works with VB 3.5.2.

I think this only applies to the WYSIWYG editor as the standard editor looks how I want it. I've poked around the code a good deal looking for the right selector I need to use to style #htmlbox, but I've not been able to find it (I'm pretty sure it's being built with javascript on the fly).

For clarification, I've attached a shot of the border I am trying to modify. Does anyone have an insight?
[ATTACH]17428[/ATTACH]

[Jake Bunce]

Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu)

I think you want the WYSIWYG Editor and Input Fields classes.

[Ratchet]

Admin CP -> Styles & Templates -> Style Manager -> Main CSS (in the menu)

I think you want the WYSIWYG Editor and Input Fields classes.

Putting the border definition there puts a border around the message box content but doesn't alter the message box border itself. Pic attached.

Like I said, styling this border with VB 3.0.x I used to have to style the #htmlbox class id, but that doesn't work with VB 3.5.x.

[Jake Bunce]

Hmm, those textareas are in these templates:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Editor Templates -> editor_toolbar_*

You might try messing around in there, but I don't know the exact code to do what you want.

[Ratchet]

Hmm, those textareas are in these templates:

Admin CP -> Styles & Templates -> Style Manager -> « » -> Editor Templates -> editor_toolbar_*

You might try messing around in there, but I don't know the exact code to do what you want.

There doesn't seem to be anything in there that changes it.

I've tried styling "#vB_Editor_QR_textarea" by putting

#vB_Editor_QR_textarea { border:1px solid #666; }

in the "Additional CSS Styles" box just to see if the Quick Reply textarea border would change but for some reason which I don't understand, it doesn't.

[ChrisLM2001]

Try just using

#htmlbox {border:1px solid #444444;} 

And make sure that you're using a id class syntax <div id="htmlbox"> instead of <div class="htmlbox">. The # changes it into an id, not class.

And check the editor js file in the clientscripts folder, for hardcoded html/CSS (which is the case with collapse icons).

Chris

[Ratchet]

Try just using

#htmlbox {border:1px solid #444444;} 

And make sure that you're using a id class syntax <div id="htmlbox"> instead of <div class="htmlbox">. The # changes it into an id, not class.

And check the editor js file in the clientscripts folder, for hardcoded html/CSS (which is the case with collapse icons).

Chris

Yes, thanks. I'm very familiar with CSS (having written several popular tutorials on the subject), but nothing I've tried (including your suggestion) has worked.

[Ratchet]

Looks like this can't be done in VB 3.5.2.

Should I submit a bug report or request it as a feature or what?

[Jake Bunce]

I am sure it can be done somehow.

You might try posting on www.vbulletin.org to see if anyone over there knows how to do this.

[pallen]

Putting the border definition there puts a border around the message box content but doesn't alter the message box border itself. Pic attached.

Like I said, styling this border with VB 3.0.x I used to have to style the #htmlbox class id, but that doesn't work with VB 3.5.x.

Honda-Tech.com managed to remove the inset border. I don't know how though. They're using vBulletin® Version 3.7.4.

[Dilly]

It's not difficult. Just a bugger to find.

If you want it done across the board: You need to edit clientscript/vbulletin_textedit.js and remove both occurences of "2px inset", and replace them with what you want. ie. 1px solid #444 (no trailing ; )

For per style, you'll need to remove both these bits out of vbulletin_textedit.js
div.style.border="2px inset";
this.editbox.style.border="2px inset"

And then create a style for #vB_Editor_QR_iframe in your additional CSS definitions.

And yes, this is an old thread, but I was doing it myself and thought it might help someone else.