Visualização combinada Visão plana Exibição em árvore
Tópicos [ Anterior | Próximo ]
toggle
body with black background makes editor in web content go black as well Sverker Abrahamsson 17 de Outubro de 2010 17:18
RE: body with black background makes editor in web content go black as well Maarten van Heiningen 21 de Outubro de 2010 01:15
RE: body with black background makes editor in web content go black as well Warren McCann 6 de Dezembro de 2010 12:10
RE: body with black background makes editor in web content go black as well Bradley Wood 5 de Janeiro de 2012 17:38
RE: body with black background makes editor in web content go black as well Nate Shaw 4 de Fevereiro de 2011 09:00
RE: body with black background makes editor in web content go black as well Joshua Asbury 4 de Fevereiro de 2011 09:36
RE: body with black background makes editor in web content go black as well Nate Shaw 9 de Fevereiro de 2011 09:45
RE: body with black background makes editor in web content go black as well Warren McCann 14 de Fevereiro de 2011 09:35
RE: body with black background makes editor in web content go black as well Brian Scott Schupbach 14 de Fevereiro de 2011 14:36
RE: body with black background makes editor in web content go black as well Brian Scott Schupbach 14 de Fevereiro de 2011 14:37
RE: body with black background makes editor in web content go black as well Warren McCann 15 de Fevereiro de 2011 13:34
RE: body with black background makes editor in web content go black as well Maarten van Heiningen 16 de Fevereiro de 2011 13:26
RE: body with black background makes editor in web content go black as well Warren McCann 21 de Fevereiro de 2011 13:55
RE: body with black background makes editor in web content go black as well Jeff deVries 11 de Março de 2011 07:27
RE: body with black background makes editor in web content go black as well Jeff deVries 11 de Março de 2011 13:14
RE: body with black background makes editor in web content go black as well Joss Sanglier 17 de Março de 2011 04:12
RE: body with black background makes editor in web content go black as well Suraj Bihari 21 de Dezembro de 2011 04:58
Sverker Abrahamsson
body with black background makes editor in web content go black as well
17 de Outubro de 2010 17:18
Resposta

Sverker Abrahamsson

Ranking: New Member

Mensagens: 13

Data de entrada: 3 de Abril de 2008

Mensagens recentes

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
21 de Outubro de 2010 01:15
Resposta

Maarten van Heiningen

Ranking: Regular Member

Mensagens: 172

Data de entrada: 5 de Fevereiro de 2009

Mensagens recentes

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
6 de Dezembro de 2010 12:10
Resposta

Warren McCann

Ranking: Junior Member

Mensagens: 36

Data de entrada: 19 de Novembro de 2010

Mensagens recentes

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
4 de Fevereiro de 2011 09:00
Resposta

Nate Shaw

Ranking: Junior Member

Mensagens: 28

Data de entrada: 26 de Outubro de 2010

Mensagens recentes

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
4 de Fevereiro de 2011 09:36
Resposta

Joshua Asbury

LIFERAY STAFF

Ranking: Expert

Mensagens: 497

Data de entrada: 8 de Setembro de 2006

Mensagens recentes

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
9 de Fevereiro de 2011 09:45
Resposta

Nate Shaw

Ranking: Junior Member

Mensagens: 28

Data de entrada: 26 de Outubro de 2010

Mensagens recentes

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
14 de Fevereiro de 2011 09:35
Resposta

Warren McCann

Ranking: Junior Member

Mensagens: 36

Data de entrada: 19 de Novembro de 2010

Mensagens recentes

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
14 de Fevereiro de 2011 14:36
Resposta

Brian Scott Schupbach

Ranking: Expert

Mensagens: 329

Data de entrada: 23 de Outubro de 2008

Mensagens recentes

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
14 de Fevereiro de 2011 14:37
Resposta

Brian Scott Schupbach

Ranking: Expert

Mensagens: 329

Data de entrada: 23 de Outubro de 2008

Mensagens recentes

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
15 de Fevereiro de 2011 13:34
Resposta

Warren McCann

Ranking: Junior Member

Mensagens: 36

Data de entrada: 19 de Novembro de 2010

Mensagens recentes

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
16 de Fevereiro de 2011 13:26
Resposta

Maarten van Heiningen

Ranking: Regular Member

Mensagens: 172

Data de entrada: 5 de Fevereiro de 2009

Mensagens recentes

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
21 de Fevereiro de 2011 13:55
Resposta

Warren McCann

Ranking: Junior Member

Mensagens: 36

Data de entrada: 19 de Novembro de 2010

Mensagens recentes

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
11 de Março de 2011 07:27
Resposta

Jeff deVries

Ranking: New Member

Mensagens: 16

Data de entrada: 28 de Fevereiro de 2011

Mensagens recentes

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
11 de Março de 2011 13:14
Resposta

Jeff deVries

Ranking: New Member

Mensagens: 16

Data de entrada: 28 de Fevereiro de 2011

Mensagens recentes

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
17 de Março de 2011 04:12
Resposta

Joss Sanglier

Ranking: Junior Member

Mensagens: 60

Data de entrada: 15 de Julho de 2009

Mensagens recentes

Jeff

Thank you thank you thank you!!!
Suraj Bihari
RE: body with black background makes editor in web content go black as well
21 de Dezembro de 2011 04:58
Resposta

Suraj Bihari

Ranking: Junior Member

Mensagens: 42

Data de entrada: 20 de Maio de 2011

Mensagens recentes

Nice!
Anônimo
RE: body with black background makes editor in web content go black as well
5 de Janeiro de 2012 17:38
Resposta

Anônimo

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


so try

body body {
background: #FFF;
}