Very annoyed with the way the editor is setup

[excessive34]

You guys make it nearly impossible to edit certain things..

I would like to change the color of the boxes within the text editors... Go to the stylevars, simple change. Dandy..

Well now, I have an annoying white border on the bottom of the Font box and also the size box... Ok fine, Ill see which tag is targeted, search for it.. and change those elements... Oh wait, those elements dont exist WITHIN ANY CSS SAVED... How the hell am I supposed to edit them?

Cant edit the hover color of the Font/Size boxes, cant edit the color of the actual popup window of the font/size boxes and cant remove the border because apparently, the targeted tag is non-existent.

What am I missing here?

".cke_skin_kama .cke_rcombo a, .cke_skin_kama .cke_rcombo a:active, .cke_skin_kama .cke_rcombo a:hover"

Is what controls the borders around the popup box.. but it does not exist in any css files.

Extremely annoying.

[kNeo]

What's even worse is that the vB CKEditor doesn't support the CKEditor skins.

At any rate customizing the CSS for the editor is rather aggravating. G'luck, try not to lose your sanity and/or fly into a rage. I came pretty close myself. What's worse is that when I finished, one of the buttons (indent or something) didn't display right, like it was missing the graphic. Years later and I still have no idea wtf is wrong.

At least nowadays there's things like Firebug and/or Firefox/Chrome inspector things. I'd've killed for something like that back when I customized the editor to be white on black, vs black on white.

[excessive34]

Firebug is wonderful, however its completely useless when it tells me exactly what tag I need to change.. but that tag doesnt exist anywhere within the vbulletin stylesheets.

[Lynne]

The ckeditor has it's own stylesheets. So, just do a Search in your files for the editor class and you should find it.

[kNeo]

Originally Posted by excessive34

Firebug is wonderful, however its completely useless when it tells me exactly what tag I need to change.. but that tag doesnt exist anywhere within the vbulletin stylesheets.

vBulletin's stylevars don't actually change a whole lot of the ckeditor's styles; it mostly just overrides some generic stuff (like background colors).

You can still use firebug, you just have to put the css targeting whatever selector in additional.css and it will override whatever it is you're trying to override. I'm not sure why you're so hung up on finding the CSS within the vB templates -- additional.css is called last, thus will override previous css, and if it's not overriding it you can always use !important.

for instance this is part of my editor css (I was bad, I abused !important because I was lazy):

.cke_wrapper {background: #999 !important;padding:0!important;}
.cke_skin_kama {border: 1px solid #555!important;padding:0!important;}
.cke_off, .cke_disabled, .cke_button_enhancedsource {background: #181818!important;}
.cke_toolgroup {background: #333 !important;}

FWIW firebug can also show you which CSS is being called for editor as well, I think it's located under clientscript/ckeditor/skins/kama/editor.css. Try not to directly edit this file, overwise a vB update can/will destroy your customizations.

[John Lester]

Originally Posted by kNeo

FWIW firebug can also show you which CSS is being called for editor as well, I think it's located under clientscript/ckeditor/skins/kama/editor.css. Try not to directly edit this file, overwise a vB update can/will destroy your customizations.

Not all changes done in additional.css that affect the editor actually work.

https://vborg.vbsupport.ru/showthread.php?t=287773

I still have no idea why I can't change the background color of the "Font' and "Size" boxes in the editor using additional.css

[kNeo]

Originally Posted by John Lester

Not all changes done in additional.css that affect the editor actually work.

https://vborg.vbsupport.ru/showthread.php?t=287773

I still have no idea why I can't change the background color of the "Font' and "Size" boxes in the editor using additional.css

Yeah I ran into this the first time I attempted to seriously customize the editor.

For what it's worth, you can modify these elements by stick your css at the bottom of editor_contents.css -- this is actually the only css called by both the Font Size and Font Family iframes, as such it was the only place I could stick my css. And even then, !importants might be necessary.

Oh, and Firebug, at least for me, was a bit flaky -- I spent like 20 minutes trying to figure out the right element, when the fault lied with Firebug not updating the element correctly (however reloading the page with the CSS added to editor_contents.css rightly displayed the changes I was after).

At any rate, the end result was this (not happy yet, but at least I figured how to change the stupid colors):


next challenge: the color drop down, wee!

EDIT: To be clear, I only discovered this out tonight. Previously I had ignored the issue, since it seemed so minor. This time I'm after a finished style without any glitches like this. I swear the next style I create is going to be a lighter one; there are far too many colors that assume a white/light design.