Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
body with black background makes editor in web content go black as well Sverker Abrahamsson October 17, 2010 5:18 PM
RE: body with black background makes editor in web content go black as well Maarten van Heiningen October 21, 2010 1:15 AM
RE: body with black background makes editor in web content go black as well Warren McCann December 6, 2010 12:10 PM
RE: body with black background makes editor in web content go black as well Bradley Wood January 5, 2012 5:38 PM
RE: body with black background makes editor in web content go black as well Nate Shaw February 4, 2011 9:00 AM
RE: body with black background makes editor in web content go black as well Joshua Asbury February 4, 2011 9:36 AM
RE: body with black background makes editor in web content go black as well Nate Shaw February 9, 2011 9:45 AM
RE: body with black background makes editor in web content go black as well Warren McCann February 14, 2011 9:35 AM
RE: body with black background makes editor in web content go black as well Brian Scott Schupbach February 14, 2011 2:36 PM
RE: body with black background makes editor in web content go black as well Brian Scott Schupbach February 14, 2011 2:37 PM
RE: body with black background makes editor in web content go black as well Warren McCann February 15, 2011 1:34 PM
RE: body with black background makes editor in web content go black as well Maarten van Heiningen February 16, 2011 1:26 PM
RE: body with black background makes editor in web content go black as well Warren McCann February 21, 2011 1:55 PM
RE: body with black background makes editor in web content go black as well Jeff deVries March 11, 2011 7:27 AM
RE: body with black background makes editor in web content go black as well Jeff deVries March 11, 2011 1:14 PM
RE: body with black background makes editor in web content go black as well Joss Sanglier March 17, 2011 4:12 AM
RE: body with black background makes editor in web content go black as well Suraj Bihari December 21, 2011 4:58 AM
Sverker Abrahamsson
body with black background makes editor in web content go black as well
October 17, 2010 5:18 PM
Answer

Sverker Abrahamsson

Rank: New Member

Posts: 13

Join Date: April 3, 2008

Recent Posts

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
RE: body with black background makes editor in web content go black as well
October 21, 2010 1:15 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

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
RE: body with black background makes editor in web content go black as well
December 6, 2010 12:10 PM
Answer

Warren McCann

Rank: Junior Member

Posts: 36

Join Date: November 19, 2010

Recent Posts

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?
Nate Shaw
RE: body with black background makes editor in web content go black as well
February 4, 2011 9:00 AM
Answer

Nate Shaw

Rank: Junior Member

Posts: 29

Join Date: October 26, 2010

Recent Posts

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
RE: body with black background makes editor in web content go black as well
February 4, 2011 9:36 AM
Answer

Joshua Asbury

LIFERAY STAFF

Rank: Expert

Posts: 497

Join Date: September 8, 2006

Recent Posts

For Liferay 6, we use CKEditor. Inspecting the element, are you looking at:
"journal-article-component-container"?
Nate Shaw
RE: body with black background makes editor in web content go black as well
February 9, 2011 9:45 AM
Answer

Nate Shaw

Rank: Junior Member

Posts: 29

Join Date: October 26, 2010

Recent Posts

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>
Warren McCann
RE: body with black background makes editor in web content go black as well
February 14, 2011 9:35 AM
Answer

Warren McCann

Rank: Junior Member

Posts: 36

Join Date: November 19, 2010

Recent Posts

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
RE: body with black background makes editor in web content go black as well
February 14, 2011 2:36 PM
Answer

Brian Scott Schupbach

Rank: Expert

Posts: 329

Join Date: October 23, 2008

Recent Posts

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

So, instead of doing

1body {
2background:#000;
3}


you do

 1#bodyID {
 2background:#000;
 3}
 4
 5<html>
 6<head>
 7<title></title>
 8</head>
 9<body id="bodyID">
10
11</body>
12</html>


This way it won't conflict with the ckeditor body.
Brian Scott Schupbach
RE: body with black background makes editor in web content go black as well
February 14, 2011 2:37 PM
Answer

Brian Scott Schupbach

Rank: Expert

Posts: 329

Join Date: October 23, 2008

Recent Posts

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
RE: body with black background makes editor in web content go black as well
February 15, 2011 1:34 PM
Answer

Warren McCann

Rank: Junior Member

Posts: 36

Join Date: November 19, 2010

Recent Posts

But where would that go? Applying that would set the background color throughout the entire liferay instance..
Maarten van Heiningen
RE: body with black background makes editor in web content go black as well
February 16, 2011 1:26 PM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

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
RE: body with black background makes editor in web content go black as well
February 21, 2011 1:55 PM
Answer

Warren McCann

Rank: Junior Member

Posts: 36

Join Date: November 19, 2010

Recent Posts

Working. Simple omission on my part within:

1table.cke_editor body {
2    background-color: #FFF;
3    color: #000;
4    background-image: none !important;
5}


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
RE: body with black background makes editor in web content go black as well
March 11, 2011 7:27 AM
Answer

Jeff deVries

Rank: New Member

Posts: 16

Join Date: February 28, 2011

Recent Posts

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
RE: body with black background makes editor in web content go black as well
March 11, 2011 1:14 PM
Answer

Jeff deVries

Rank: New Member

Posts: 16

Join Date: February 28, 2011

Recent Posts

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
RE: body with black background makes editor in web content go black as well
March 17, 2011 4:12 AM
Answer

Joss Sanglier

Rank: Junior Member

Posts: 60

Join Date: July 15, 2009

Recent Posts

Jeff

Thank you thank you thank you!!!
Suraj Bihari
RE: body with black background makes editor in web content go black as well
December 21, 2011 4:58 AM
Answer

Suraj Bihari

Rank: Junior Member

Posts: 42

Join Date: May 20, 2011

Recent Posts

Nice!
Anonymous
RE: body with black background makes editor in web content go black as well
January 5, 2012 5:38 PM
Answer

Anonymous

What is happening is the editor puts a body tag within the code,


so try

body body {
background: #FFF;
}