Solved

Change the background colour of CKEditor from white to blue

Posted on 2011-09-10
5
602 Views
Last Modified: 2012-05-12
How do I change the background colour of CKEditor from white to blue.

If I change the background-color of the body tag in the contents.css located in the ckediter folder it changes the color as required, but I am trying to change the color of just one of instance of CKEditor not both, is this possible?

Thanks in advance for your feedback.


// The initial value to be displayed in the editor.
$CKEditor_initialValue = "$content";
$CKEditor = new CKEditor();
$CKEditor->basePath = "../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "Edit Web Page (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "530px";
$CKEditor_config["height"] = "600px";
$CKEditor_config["skin"] = "office2003";
$CKEditor_config["docType"] = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["contentsLanguage"] = "";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "../webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2&startup_folder=web_pages";
$CKEditor_config["toolbar"] = array(
array( 'Cut','Copy','Paste','PasteText','PasteFromWord','Print','SpellChecker','Scayt'),
array( 'Undo','Redo','Find','Replace','SelectAll','RemoveFormat'),
array( 'BidiLtr','BidiRtl','NumberedList','BulletedList'),
('/'),
array( 'Outdent','Indent','Blockquote','CreateDiv'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Smiley','SpecialChar','PageBreak','TextColor','BGColor','Maximize','ShowBlocks'),
array( 'Image','Flash','Table','HorizontalRule'),
('/'),
array( 'Styles','Format'),
array( 'Font','FontSize','Bold','Italic','Underline','Strike'),
array( 'Bold','Italic','Underline','Strike','Link','Unlink','Anchor','Source'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist5.js";
$CKEditor->editor("content", $CKEditor_initialValue, $CKEditor_config);

// The initial value to be displayed in the editor.
$CKEditor_initialValue = "$content2";
$CKEditor = new CKEditor();
$CKEditor->basePath = "../webassist/ckeditor/";
$CKEditor_config = array();
$CKEditor_config["wa_preset_name"] = "Edit Web Page (custom)";
$CKEditor_config["wa_preset_file"] = "(custom)";
$CKEditor_config["width"] = "320px";
$CKEditor_config["height"] = "600px";
$CKEditor_config["skin"] = "office2003";
$CKEditor_config["docType"] = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">";
$CKEditor_config["contentsLanguage"] = "";
$CKEditor_config["dialog_startupFocusTab"] = false;
$CKEditor_config["fullPage"] = false;
$CKEditor_config["tabSpaces"] = 4;
$CKEditor_config["filebrowserBrowseUrl"] = "../webassist/kfm/index.php?uicolor=".urlencode(isset($CKEditor_config["uiColor"])?str_replace("#","#",$CKEditor_config["uiColor"]):"#eee")."&theme=webassist_v2&startup_folder=web_pages";
$CKEditor_config["toolbar"] = array(
array( 'Maximize','Cut','Copy','Paste','PasteText','PasteFromWord','SpellChecker'),
array( 'Undo','Redo','RemoveFormat','BidiLtr','BidiRtl','Source'),
('/'),
array( 'Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Link','Unlink','Bold','Italic','Underline','TextColor','BGColor'),
array( 'Image','Flash','Table','NumberedList','BulletedList'),
('/'),
array( 'Styles','Format',),
array( 'Font','FontSize'));
$CKEditor_config["contentsLangDirection"] = "ltr";
$CKEditor_config["entities"] = false;
$CKEditor_config["pasteFromWordRemoveFontStyles"] = false;
$CKEditor_config["pasteFromWordRemoveStyles"] = false;
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist5.js";
$CKEditor->editor("content2", $CKEditor_initialValue, $CKEditor_config);
0
Comment
Question by:sabecs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36515844
0
 

Author Comment

by:sabecs
ID: 36516131
Thanks gurvinder372, I did try http://cksource.com/forums/viewtopic.php?f=11&t=15899 but no luck.

0
 
LVL 16

Expert Comment

by:HagayMandel
ID: 36516158
ckeditor takes its back color from the html tag!!
Change your html background-color, to desired one.
0
 

Author Comment

by:sabecs
ID: 36516198
Thanks HagayMandel for your help, I tried html {background-color: #444; } but the editor background was still while..
0
 

Author Closing Comment

by:sabecs
ID: 36517832
Thanks gurvinder372, I did find a solution on the forum.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question