Where are the CSS tags for cke elements defined?

Help / Discuss
1

I’'ve drilled down in the HTML and found:

> <div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 500px;"><textarea dir="ltr" class="cke_source cke_reset cke_enable_context_menu cke_editable cke_editable_themed cke_contents_ltr" style="width: 100%; height: 100%; resize: none; outline: none; text-align: left; tab-size: 4;" tabindex="0" role="textbox" aria-multiline="true" aria-label="Rich Text Editor, content" title="Rich Text Editor, content" aria-describedby="cke_139"></textarea><span id="cke_139" class="cke_voice_label">Press ALT 0 for help</span></div>

So this cke_source is my code area right?

So I have white on white text and am just looking for @less-code name for that class so I can change it to
black text on white or … the opposite.

Can someone tell me where I can find these cke ?

I searched in every file:
/usr/lib/xwiki/skins/flamingo/less
accordion.less edit.less panels.less
action-menus.less figure.less style.less.vm
admin.less forms.less tables.less
annotations.less general.less tree.less
before-bootstrap.less grid.less type.less
bootstrap headers.less users.less
breadcrumbs.less layout.less variablesInit.vm
buttons.less livetable.less variables.less
colorThemeMappingOutput.vm messages.less vertical-menus.less
custom.less misc.less xlist.less
drawer.less modals.less

2

It comes from the CKEditor WebJar. What prevents you from overwriting these styles from the color theme, a skin extension or the skin itself by using a more specific CSS rule?

3

The number one obstacle is I can’t find them :rofl:

4

When I need to overwrite some CSS I usually check with the Inspector (browser’s developer tools) the current CSS for the HTML elements (DOM nodes) I’m interested in and add more specific rules in my style sheet (e.g. advanced area from my color theme, or my own global SSX, or my custom skin). It doesn’t matter that much where the original CSS comes from, as long as you use a more specific CSS rule (selector). Of course, if the original CSS is generated from LESS then it may be easier to overwrite some LESS variable than to overwrite the entire CSS rule, but it’s not the case here. The CKEditor styles are not generated with LESS.

1 Like
5

Ok so the CKEditor is a separate jar or something and is not generated from LESS. So then if I understand correctly, I need to find a way to hardcode these text and background colors inside the CKEditor module?

image