CKEditor not using theme css in editor - links styling

Check this instruction: http://drupal.ckeditor.com/tricks
Lut us know if you have any further questions

I've just gone crazy with this background issue... Couldn't this be white background by default or whatever? Just don't get it.
My bad...

@kpetkov - you may always use "CKEditor default" as "Editor CSS" if you have problems with using theme CSS in the editor.

I have tried following the steps in the link that @wwalc provided. I am having real problems fixing this. Any other suggestions? I have requested support from the theme provider, but I think I may be having trouble identifying the correct ID and Class to declare in the .js file.

Also I have tried using the editor default css and it makes no difference.

Agreed - followed link instructions to the letter with no luck. I've had problems with this in every wysiwyg editor module though. Hunting for the root of the problem but any tips welcome.

Can someone help on #2 issue?

status changed

I've had the best luck adapting my CSS to replace "body" with "body.front, body.not-front", at least on my Zen themes. This should leave the iframe body alone.

Maybe the problem that themers use paths in styles, like:

#container #wrapper #content {
/* some styles */
}

I had this problem on one site. So even if you set body for ckeditor with custom css, in ckeditor iframe you don't have this path in set of div layers. I make some workaround. I used firebug copy the styles and to file with style something like that:

#ckeditor_body {
/* styles for body */
}
.ckeditor_bodyclass {
/* styles for body class */ 
}

The last think is use thick from http://drupal.ckeditor.com/tricks and set proper bodyId and bodyClass.

BUG FIX: The Trick is not working with multiple instance of CKEditor.

When you use multiple instance of CKEditor in the same page, the variable "Drupal.settings.ckeditor.theme" is an array instead of a String. It seems to be a Bug in the CKEditor since the "marinelli" part is affected. If you try to compare it as a String, it will join all elements in the array to make a string, so you will get something like "marinelli,marinelli" or "mytheme,mytheme". I wrote a little fix for that:

var themeName = Drupal.settings.ckeditor.theme;
if (typeof Drupal.settings.ckeditor.theme == "object") {
themeName = Drupal.settings.ckeditor.theme[0];
}

After that, you can use the themeName variable instead of the String/Array stuff:

if (themeName == "marinelli") {
config.bodyClass = 'singlepage';
config.bodyId = 'primary';
}
if (themeName == "mytheme") {
config.bodyClass = 'singlepage';
config.bodyId = 'primary';
}

Cheers

If you have a CSS problem overriding your Editor CSS, you can try to use the "!important" directive. It's ugly, but sometime it's handy.

.someclass {
  background-color: #FFF !important;
}

Think i have the same issue ... just installed CKEditor...

The hyperlinks on my node edit page are using some other styles...
They don't look like the themes' styles (its adding default underlines and blue color for my unvisited links even though the css in firebug claims it is "a, a:link, a:visited { color:#27638C; }")...
My ckeditor settings say to use the Theme Settings for its css, so was hoping it would look like how it actually shows up when viewing the node.

Is there a step by step approach to get this working... Can kinda follow but not sure about about above steps.

@armyofda12mnkeys
The Trick found at this address: http://drupal.ckeditor.com/tricks is about the background colour. When the CKEditor apply the theme style, it also apply the background colour on the body, which is usually different to the background colour of the main container.

In other word, this Trick is not a workaround for your problem. I think your problem is more like a browser problem (verified). CKEditor is actually a nice looking front-end over the HTML Edition mode of the browser. That's mean that it can't control everything, most of the functionalities are actually managed by the browser. I have the same problem with links, but I don't think it really matter since they looks good after submission. They only use the default links colour in Edition mode.

[edit]
Why new links are always blue?
Here is a very minimalist page (without doctype and all the fancy stuff) that illustrate the problem. Copy paste the following code in an empty document. You should have the problem with this as well (no CKEditor involved).

<html>
	<head>
		<style>
			a { color: #990000; }
		</style>
	</head>
	<body>
		<div contenteditable="true">Editable Text with a <a href="#">link</a>.</div>
		<div contenteditable="false">Not editable Text with a <a href="#">link</a>.</div>
	</body>
</html>

As long as I know, there is no workaround for that bug.
NOTE: After the link is clicked, it become 'visited' and the style is applied. I guess you can exploit this to make a VERY nasty workaround (involving Ajax or editing the HREF with JavaScript)...

Gotcha, oh well, i'll assume firefox,etc will fix that bug at some point.

i was reading about html5... the contenteditable shows a grey outline border when you click on it to signify its editable, right? Is it really needed? Could I pull that out of the code and have a perfectly fine ckeditor?

@gaellafond -- Thank you for posting this. I spent a half hour banging my head against the wall. I read your post and checked my links in Safari. They look fine. I log out of the site on Firefox, refresh the window and they also look fine.

But this is a pretty serious bug with Firefox. Anyone with the permission to edit the content will see the ugly link text regardless of whether they are editing it or not.

I have the same issue in Firefox 3.6.16. Link styles only show as blue and underlined in ckeditor even though firebug says they should be inheriting the styles in the stylesheet. Looks fine in other browsers.

Issue is not active over 3 month so i closed it.

If problem still exists pls update to last DEV version of CKEditor module, last CKEditor library and then try to reproduce this problem again. If it doesn't help pls report it and write as much details as u can.

Greetings

I'm having an other strange problem with CKEditor and theming. After i applied a background image to the body (page-backgrounds.css) it sudently shows up as a background in Full-HTML in CKEditor. :)
It's easy to solve - i just select the default stylesheet in Wysiwyg/CKEditor settings - but its pretty strange.

When the "Use theme CSS" option is selected in the CSS section of the CKEditor profile editor, the module only looks at the /your/theme/directory/style.css file. If your css file is not named style.css and/or not in the theme root directory then the module does not load any custom styles.

Currently, I am maintaining a separate styles.css file in the theme root which is cumbersome.

It would be great if there was a textfield in the CKEditor profile editor to designate the directory/filename.css relative to the theme root where CKEditor should get the custom styles from.

Also take into account that if you are using an admin theme like Rubik "use theme css" means the css of the admin theme, not the css of your frontend theme.

i'm seeing similar behavior even with v1.13. my custom admin theme is at sites/mysite.com/themes/custom/my_admin_theme/ (stylesheets/style.css for the theme css i'm telling ckeditor to use). when i set it to use the theme css, it's using the seven theme's style.css file instead.

I believe the trouble lies here, wysiwyg_get_css is called if you choose the 'theme css' option in the WYWIWYG editor.

As you can see, it uses drupal_add_css files to retrieve a list of CSS files, this will always be the current admin theme.

It's seems like what this should do is return the CSS files for the current active default theme rather than the admin theme.

function wysiwyg_get_css() {
  static $files;

  if (isset($files)) {
    return $files;
  }
  // In node form previews, the theme has not been initialized yet.
  if (!empty($_POST)) {
    drupal_theme_initialize();
  }

  $files = array();
  foreach (drupal_add_css() as $filepath => $info) {
    if ($info['group'] >= CSS_THEME && $info['media'] != 'print') {
      if ($info['type'] == 'external') {
        $files[] = $filepath;
      }
      elseif (file_exists($filepath)) {
        $files[] = base_path() . $filepath;
      }
    }
  }
  return $files;
}

I had problems with theme chosen as to where to load css files from. Not all files were being loaded.

Using dpm at various points in the module code, I tracked this down in includes/ckeditor.lib.inc

if (isset($conf['ckeditor_load_method']) && $conf['ckeditor_load_method'] == 'ckeditor_source.js') {
    foreach ($css_files as $k => $v) {
      $css_files[$k] = $v . '&t=' . time();
    }
}

It seems that on further investigation the variable ckeditor_load_method wasn't populated. Digging to find where this variable get's populated, I found in includes/ckeditor.admin.inc

if (ckeditor_get_version(TRUE) == 3) {
    $form['advanced']['ckeditor_load_method'] = array(
      '#type' => 'select',
      '#title' => t('Loading method'),
      '#default_value' => !empty($profile->settings['ckeditor_load_method']) ? $profile->settings['ckeditor_load_method'] : 'ckeditor.js',
      '#options' => _ckeditor_load_methods(),
      '#description' => t('Select the loading method of CKEditor. If the !ckeditor_basic_js file is used, only a small file is loaded initially and the rest of the editor is loaded later (see <strong>Loading timeout</strong>). This might be useful if CKEditor is disabled by default.', array(
        '!ckeditor_basic_js' => 'ckeditor_basic.js'
          )
      )
    );

It seems with me, ckeditor_get_version(TRUE) equals a value of 4 and so this check gets skipped which means the original variable $conf['ckeditor_load_method'] doesn't hold a value hence the original piece of code gets skipped also. I changed:

if (isset($conf['ckeditor_load_method']) && $conf['ckeditor_load_method'] == 'ckeditor_source.js') {
    foreach ($css_files as $k => $v) {
      $css_files[$k] = $v . '&t=' . time();
    }
}

TO:

//if (isset($conf['ckeditor_load_method']) && $conf['ckeditor_load_method'] == 'ckeditor_source.js') {
    foreach ($css_files as $k => $v) {
      $css_files[$k] = $v . '&t=' . time();
    }
//}

and now my theme css files get loaded.

Purhaps someone more experienced can help explain and understand what is going on here?

Another issue has a working patch for the same problem.