Why isn't additional.css over riding the default css?

[John Lester]

Ok so I'm trying to help someone at vbulletin.com change the back ground color of the font and size drop down boxes in the editor (version 4.1.x). With some help from Wayne I found the relevant css file to poke around in, /clientscript/ckeditor/skins/kama/editor.css

So I changed the color in the file itself and checked on my test site and it works (the back ground color changed). So then I added the code to additional.css but it doesn't work (the back ground color doesn't change).

Why?

Original code

.cke_panel_listItem a:hover,.cke_panel_listItem a:focus,.cke_panel_listItem a:active{
  border-color: #316ac5;
  background-color: #dff1ff;
}

Code used in additional.css

.cke_panel_listItem a:hover,.cke_panel_listItem a:focus,.cke_panel_listItem a:active{
  border-color: #316ac5;
  background-color: #000000 !important;
}

It gets even stranger, I can change the color of the back ground for the drop down arrows for those boxes.

Original code

.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:active .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_on .cke_openbutton{
  border-color: #316ac5;
  background-color: #dff1ff;
}

Code in additional.css

.cke_skin_kama .cke_rcombo .cke_off a:hover .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:focus .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_off a:active .cke_openbutton,.cke_skin_kama .cke_rcombo .cke_on .cke_openbutton{
  border-color: #316ac5;
  background-color: #000000 !important;
}

[Lynne]

They may have some other CSS which is overriding the changes. It's hard to know without a link to the site.

[John Lester]

It's my test site which is a vanilla 4.1.12 PL2 on my localhost so I can't link to it

I just thought it was odd that something could override additional.css.

[Lynne]

It shouldn't. But, it could be something else. Are you using firebug to find out what CSS is really effecting it?

[John Lester]

Firebug won't work in the drop down menus in the editor (right click does nothing).

I did however find the exact same default code in /clientscript/ckeditor/skins/kama/panel.css (why on earth it's in 2 different files I have no idea). According to Firebug both css files (editor.css and panel.css) are called (I didn't know the ckeditor was in an iframe ).

It still doesn't answer why additional.css isn't working.

[Lynne]

Yes, firebug does work in dropdowns - I use it all the time.

The CSS for the ckeditor may be called after the additional.css file is called.

[John Lester]

I agree Firebug can work in drop down menus, however it does not work (via right click) in the editor drop down menus for "font" and "size". At first I thought it was a bug with my install, however right clicking those drop downs at vbulletin.com has the same results ... nothing happens However it does work here now that is very odd.

In regards to the css being called after addtional.css, how would I go about checking that? I don't recall seeing a reference to additional.css in Firebug.

[John Lester]

Ok after checking the manual additional.css is called in the headinclude_bottom template. I'm guessing the reason it's being over ridden by the default css is that the ckeditor is in an iframe and calls the 2 other css files within the iframe?

If this is the case, does anyone have any ideas how to bypass the default code without directly editing the css files?

Also to make sure I'm not complete crazy, would someone with firebug visit vbulletin.com and in ckeditor right click the "font" and "size" boxes and see the option to view element in firebug is there?

[kh99]

Originally Posted by John Lester

Also to make sure I'm not complete crazy, would someone with firebug visit vbulletin.com and in ckeditor right click the "font" and "size" boxes and see the option to view element in firebug is there?

I have the same problem - when I right-click on those, nothing happens. But if you right click on the text area then use the html window (in firebug) to go back and find the html for the drop-downs, you can get to them that way.

[John Lester]

I also found (just now) that if you leave the cursor in the "font" and "size" boxes and press F12 it opens up firebug

I'm thinking since the editor is in an iframe I can't tweak the css with additional.css because the default css is called in the iframe which is called after additional.css Oh well time to edit files then XD