body with black background makes editor in web content go black as well

Fórumok

Sverker Abrahamsson, módosítva 13 év-val korábban

body with black background makes editor in web content go black as well

New Member Bejegyzések: 13 Csatlakozás dátuma: 2008.04.03. Legújabb bejegyzések

Hi,
I have a theme which extends the classic theme. I want to have a black (or dark) background, so I set body like this:

body {
color: #FFFFFF;
background-color: #000000;
font-size: 11px;
}

However, this cause the fckeditor(?) in web content to also get white text on black background and since my portlets has the oposit I would prefer if fckeditor follows that color scheme.

How can I accomplish that in my theme?

Maarten van Heiningen, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Regular Member Bejegyzések: 174 Csatlakozás dátuma: 2009.02.05. Legújabb bejegyzések

Hi,

You need to just set your class for the body of the editor.

in your own custom.css after your body style setting you include something like this.

table.fck_editor body,
table.cke_editor body {
background-color: #ffffff;
color: #000000;
}

Regards,
Maarten

Warren McCann, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 36 Csatlakozás dátuma: 2010.11.19. Legújabb bejegyzések

Thanks for posting the solution.

I would argue that this is a bug; the editor colors should never be influenced by the theme/site colors.

*Update: this does not always work. I have to do a page refresh once the page is displayed for the editor background color to change with the CSS above in custom.css. Additionally, going to Control Panel -> Web Content -> Add Web Content keeps the 'grey' background as it is using the classic them.

Thoughts?

Bradley Wood, módosítva 12 év-val korábban

RE: body with black background makes editor in web content go black as well

Nate Shaw, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 49 Csatlakozás dátuma: 2010.10.26. Legújabb bejegyzések

This does not work for me. Nothing I have tried works. Here are some of the variations I have tried to stop the bg image from loading in the wiki editor.

table.fck_editor body,
table.cke_editor body {
background: #ffffff;
background-image: none !important;
color: #000000;
}

.cke_contents * body {
background: #ffffff;
}

.cke_contents iframe html body {
background: #ffffff;
}

The background image that is set for the main theme body is still loaded as the editor background image.

How can I fix this?

Joshua Asbury, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Expert Bejegyzések: 498 Csatlakozás dátuma: 2006.09.08. Legújabb bejegyzések

For Liferay 6, we use CKEditor. Inspecting the element, are you looking at:
"journal-article-component-container"?

Nate Shaw, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 49 Csatlakozás dátuma: 2010.10.26. Legújabb bejegyzések

Here is the HTML, starting with the td that wraps the iframe used by the wiki editor. I was able to suppress the background image using a CSS definition of

body[class*="cke_"] {
background: #ffffff;
background-image: none !important;
}

BUT, the background image still loads first and then the background color changes to white. So, there is a 1/2 second flicker of the background image loading, which is annoying and troublesome. I have no idea how to make that flicker go away.

<td role="presentation" style="height: 200px;" class="cke_contents" id="cke_contents_CKEditor1"><iframe frameborder="0" allowtransparency="true" tabindex="0" src="" title="Rich text editor, CKEditor1, press ALT 0 for help." style="width: 100%; height: 100%;"><html lang="en" dir="ltr"><head><title _cke_title="Rich text editor, CKEditor1, press ALT 0 for help.">Rich text editor, CKEditor1, press ALT 0 for help.</title><link href="http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/contents.css" rel="stylesheet" type="text/css"><style cke_temp="1" type="text/css">img.cke_flash{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/flash/images/placeholder.png?t=A8LE4JO);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 80px;height: 80px;}
form{border: 1px dotted #FF0000;padding: 2px;}

img.cke_hidden{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/forms/images/hiddenfield.gif?t=A8LE4JO);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 16px !important;height: 16px !important;}
img.cke_anchor{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/link/images/anchor.gif?t=A8LE4JO);background-position: center center;background-repeat: no-repeat;border: 1px solid #a9a9a9;width: 18px !important;height: 18px !important;}
a.cke_anchor{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/link/images/anchor.gif?t=A8LE4JO);background-position: 0 center;background-repeat: no-repeat;border: 1px solid #a9a9a9;padding-left: 18px;}
img.cke_pagebreak{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/pagebreak/images/pagebreak.gif?t=A8LE4JO);background-position: center center;background-repeat: no-repeat;clear: both;display: block;float: none;width:100% !important; _width:99.9% !important;border-top: #999999 1px dotted;border-bottom: #999999 1px dotted;height: 5px !important;page-break-after: always;}
.cke_show_blocks p,.cke_show_blocks div,.cke_show_blocks pre,.cke_show_blocks address,.cke_show_blocks blockquote,.cke_show_blocks h1,.cke_show_blocks h2,.cke_show_blocks h3,.cke_show_blocks h4,.cke_show_blocks h5,.cke_show_blocks h6{background-repeat: no-repeat;background-position: top left;border: 1px dotted gray;padding-top: 8px;padding-left: 8px;}.cke_show_blocks p{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_p.png);}.cke_show_blocks div{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_div.png);}.cke_show_blocks pre{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_pre.png);}.cke_show_blocks address{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_address.png);}.cke_show_blocks blockquote{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_blockquote.png);}.cke_show_blocks h1{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h1.png);}.cke_show_blocks h2{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h2.png);}.cke_show_blocks h3{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h3.png);}.cke_show_blocks h4{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h4.png);}.cke_show_blocks h5{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h5.png);}.cke_show_blocks h6{background-image: url(http://rhodium.hitsshq.com:8086/html/js/editor/ckeditor/plugins/showblocks/images/block_h6.png);}
.cke_show_borders table.cke_show_border,.cke_show_borders table.cke_show_border > tr > td, .cke_show_borders table.cke_show_border > tr > th,.cke_show_borders table.cke_show_border > tbody > tr > td, .cke_show_borders table.cke_show_border > tbody > tr > th,.cke_show_borders table.cke_show_border > thead > tr > td, .cke_show_borders table.cke_show_border > thead > tr > th,.cke_show_borders table.cke_show_border > tfoot > tr > td, .cke_show_borders table.cke_show_border > tfoot > tr > th{border : #d3d3d3 1px dotted}</style></head><body contenteditable="true" spellcheck="false" class="cke_show_borders"></body></html></iframe></td>

Warren McCann, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 36 Csatlakozás dátuma: 2010.11.19. Legújabb bejegyzések

Hey Nate:

I've run into the same issue with the flickering. I have not gone back to looking through the editor, but when I do I'll come back with what I find.

-Warren

Brian Scott Schupbach, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Expert Bejegyzések: 329 Csatlakozás dátuma: 2008.10.23. Legújabb bejegyzések

How about instead of changing the ckeditor styles you give your body tag a css id.

So, instead of doing

body {
background:#000;
}

you do

#bodyID {
background:#000;
}



<title></title>

This way it won't conflict with the ckeditor body.

Brian Scott Schupbach, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Expert Bejegyzések: 329 Csatlakozás dátuma: 2008.10.23. Legújabb bejegyzések

I don't know why its putting in a smiley face but that is supposed to be a css color code of black...hopefully you get the idea

Warren McCann, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 36 Csatlakozás dátuma: 2010.11.19. Legújabb bejegyzések

But where would that go? Applying that would set the background color throughout the entire liferay instance..

Maarten van Heiningen, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Regular Member Bejegyzések: 174 Csatlakozás dátuma: 2009.02.05. Legújabb bejegyzések

Hi Warren,

This would be the main body tag in your portal_normal.vm This could also be a class but that's your personal choice.

This way your body styling is correctly set for your theme part and not intervening with other body tags used in the portal. These are still set by the original css tags in the theme.

Maarten

Warren McCann, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 36 Csatlakozás dátuma: 2010.11.19. Legújabb bejegyzések

Working. Simple omission on my part within:

table.cke_editor body { 
    background-color: #FFF;
    color: #000;
    background-image: none !important;
}

I didn't include background-image. Of course it wasn't working, because it was still inheriting the background image I set.

In the end, I did learn that there are a number of layers of abstraction between what you see on browser to how the ckeditor is actually configured. IMHO, it's a little too abstract.

As far as the portal_normal.vm, wouldn't that override all of the body ids? Presently, each page has it's own body id of "aui-xxxxx-xxx". Whether or not the consequence of that override is bad, remains to be seen.

Jeff deVries, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

New Member Bejegyzések: 16 Csatlakozás dátuma: 2011.02.28. Legújabb bejegyzések

I found that by setting the bg in the body classes I can have a light background for the editor and an image for the body. So far it works. I haven't found a scenario yet that breaks it.

In the custom.css for my theme:

body {
background-color: #FFFFFF;
font-size: 11px;
}

/* There may be some redundancy here */
.controls-visible, .guest-community, .signed-out, .public-page, .signed-in, .private-page{
background: #19AAD9 url(../images/background.jpg) no-repeat;
}

Thanks Maarten. You saying "This could also be a class" gave me the clue.

Jeff

Jeff deVries, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

New Member Bejegyzések: 16 Csatlakozás dátuma: 2011.02.28. Legújabb bejegyzések

OK. Didn't quite understand the portal_normal.vm edit. Now I understand. make a copy of portal_normal.vm to _diffs/templates and add a class in the body tag.

<body class="$css_class customBG">

Then the custom.css can address it without interfering with anything else.

body {
background-color: #FFFFFF;
font-size: 11px;
}

.customBG{
background: #19AAD9 url(../images/background.jpg) no-repeat;
}
emoticon

Joss Sanglier, módosítva 13 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 60 Csatlakozás dátuma: 2009.07.15. Legújabb bejegyzések

Jeff

Thank you thank you thank you!!!

Suraj Bihari, módosítva 12 év-val korábban

RE: body with black background makes editor in web content go black as well

Junior Member Bejegyzések: 41 Csatlakozás dátuma: 2011.05.20. Legújabb bejegyzések

Nice!