掲示板

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

13年前 に Sverker Abrahamsson によって更新されました。

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

New Member 投稿: 13 参加年月日: 08/04/03 最新の投稿
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?
thumbnail
13年前 に Maarten van Heiningen によって更新されました。

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

Regular Member 投稿: 174 参加年月日: 09/02/05 最新の投稿
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
13年前 に Warren McCann によって更新されました。

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

Junior Member 投稿: 36 参加年月日: 10/11/19 最新の投稿
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?
12年前 に Bradley Wood によって更新されました。

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

13年前 に Nate Shaw によって更新されました。

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

Junior Member 投稿: 49 参加年月日: 10/10/26 最新の投稿
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?
thumbnail
13年前 に Joshua Asbury によって更新されました。

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

Expert 投稿: 498 参加年月日: 06/09/08 最新の投稿
For Liferay 6, we use CKEditor. Inspecting the element, are you looking at:
"journal-article-component-container"?
13年前 に Nate Shaw によって更新されました。

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

Junior Member 投稿: 49 参加年月日: 10/10/26 最新の投稿
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 &gt; tr &gt; td, .cke_show_borders table.cke_show_border &gt; tr &gt; th,.cke_show_borders table.cke_show_border &gt; tbody &gt; tr &gt; td, .cke_show_borders table.cke_show_border &gt; tbody &gt; tr &gt; th,.cke_show_borders table.cke_show_border &gt; thead &gt; tr &gt; td, .cke_show_borders table.cke_show_border &gt; thead &gt; tr &gt; th,.cke_show_borders table.cke_show_border &gt; tfoot &gt; tr &gt; td, .cke_show_borders table.cke_show_border &gt; tfoot &gt; tr &gt; th{border : #d3d3d3 1px dotted}</style></head><body contenteditable="true" spellcheck="false" class="cke_show_borders"></body></html></iframe></td>
13年前 に Warren McCann によって更新されました。

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

Junior Member 投稿: 36 参加年月日: 10/11/19 最新の投稿
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
thumbnail
13年前 に Brian Scott Schupbach によって更新されました。

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

Expert 投稿: 329 参加年月日: 08/10/23 最新の投稿
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.
thumbnail
13年前 に Brian Scott Schupbach によって更新されました。

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

Expert 投稿: 329 参加年月日: 08/10/23 最新の投稿
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
13年前 に Warren McCann によって更新されました。

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

Junior Member 投稿: 36 参加年月日: 10/11/19 最新の投稿
But where would that go? Applying that would set the background color throughout the entire liferay instance..
thumbnail
13年前 に Maarten van Heiningen によって更新されました。

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

Regular Member 投稿: 174 参加年月日: 09/02/05 最新の投稿
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
13年前 に Warren McCann によって更新されました。

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

Junior Member 投稿: 36 参加年月日: 10/11/19 最新の投稿
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.
thumbnail
13年前 に Jeff deVries によって更新されました。

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

New Member 投稿: 16 参加年月日: 11/02/28 最新の投稿
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
thumbnail
13年前 に Jeff deVries によって更新されました。

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

New Member 投稿: 16 参加年月日: 11/02/28 最新の投稿
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
thumbnail
13年前 に Joss Sanglier によって更新されました。

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

Junior Member 投稿: 60 参加年月日: 09/07/15 最新の投稿
Jeff

Thank you thank you thank you!!!
thumbnail
12年前 に Suraj Bihari によって更新されました。

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

Junior Member 投稿: 41 参加年月日: 11/05/20 最新の投稿
Nice!