'Define CSS' does not apply style in CKEditor

Can you check with Firebug for Firefox or a similar tool to see from which URL file is actually requested when the editor is loaded?
If it can't be found, it should show up with red text and status 404 in Firebug's Net tab. (Clear caches first.)
You should then be able to compare the actual path with the one you entered in the settings and compensate for the difference.

If it is found (status 200), maybe the style rules in it are written to include an element which is not available inside the editing area's iframe? The content is only wrapped by a simple body tag there, so if the stylesheet uses a #content (or similar) selector to change most styles, they won't appear in the editor.

I was having the same issue, and, following the advice above, discovered that the request for the CSS file returns a 403 Forbidden error. The CSS file is in my theme's directory.

Does anyone know why this is or how I can fix it? I can fix it temporarily by changing the permissions on that one file, but shouldn't the same permissions that the rest of theme folder has be enough?

Using CKEditor 3.5.2 with Wysiwyg profile

Thanks

Sorry, without further information this issue can only be closed as not reproducible.

Feel free to re-open this issue if you want to provide further information. Thanks.

@goron: If your browser returns a 403, then no one can access that .css file, including the editor and anyone else.

Hello, I'm also using Ckeditor with the Rubik admin theme. Firebug shows that the correct css file are being loaded. It shows link tags with correct paths to the css right below the iframe tag that begins ckeditor. None of the CSS is actually applied, however, and firebug just shows

html {
cursor: text;
}

for every element inside the iframe. Is there a way to debug this?

When looking at the Net tab of Firebug, the CSS files defined do not appear, whereas the ckeditor editor.css file does appear at the bottom of the list. I double checked that "Define CSS" is selected, and cleared browser and Drupal cache several times.

The only way I've been able to get custom CSS to apply to the content area is to edit contents.css in sites/all/libraries/ckeditor (after switching back to "Editor Default CSS") which is not a very maintainable solution.

Maybe the following from source will help with debugging?

... "format6": { "baseHref": "https://dev.phas.localhost/", "width": "100%", "resize_minWidth": 450, "height": 420, "theme": "default", "skin": "kama", "entities_latin": false, "entities_greek": false, "format_tags": "p;address;pre;h2;h3;h4;h5;h6;div", "apply_source_formatting": 1, "contentsCss": [ "/Users/sdychko/Web/phas/phas/public/sites/all/themes/phas/css/pages.css" ], ...

(note that I also tried this without SSL)

This is also a problem when using a basic install with Garland as the only enabled theme (admin and non-admin).

CKEditor 3.6.2.7275

And putting a dpm($settings) on line 250 of ckeditor.inc shows that this editor config function is being called twice. The first time it has the correct CSS files, and the second time it doesn't.

i have the same behavior with a theme based on omega.
its loading no styles at all
http://screensnapr.com/v/2HdWE9.png

i treid setting the settings to "user theme css" and define css and define a path.

what would be the normal working way to define a style for the area (because a lot of people have that working)?

lets analyze that:

switched to garland and xdebuged function wysiwyg_get_css()

http://screensnapr.com/v/RM3qj5.png

everything ok as you can see at the screenshot, the files array has the garland style.css

lets switch to omega:

http://screensnapr.com/v/9EeN1e.png

wrong css file:

structure of omega+subtheme

http://screensnapr.com/v/yluyHr.png

it somehow takes the only css file that contains the grid settings

Subscribing.

subscribing

+1

subscribing

Those still "subscribing", please see the new "Follow" button at the top of the post.

Since there appears to be a couple of slightly different issues here, and those threads quickly get out of hand; If you choose to leave a comment then please mention which exact versions of Drupal, Wysiwyg, CKEditor and theme(s) you're using. It would also be great if you could mention WHICH comment you're referring to when saying "+1", "me too", "same here", etc. I can't keep guessing which solutions, workarounds or debug notes apply to which people or sub-issues. A last resort would be to close this issue and ask for new ones if problems persists.

@e-anima, How and where are those stylesheets "added" (drupal_add_js() or .info file)? If it happens "too late" Wysiwyg has no chance to know they are there. The stylesheet list held by drupal_add_js() is changed after Wysiwyg did its thing. I've seen similar problems with themes that re-arrange their stylesheets in preprocessing functions. It's possible to implement hook_wysiwyg_editor_settings_alter() (see wysiwyg.api.php) to inject the same stylesheets your theme/subtheme does into the settings object passed to the editor when it's initialized. For CKEditor you need to set an array of stylesheets to $settings['contentsCss'] = arary('mytheme/file1.css', 'mytheme/file2.css'). See contenstCSS.

@Shaun Dychko, what exactly did you enter into the list of stylesheets when using "Define CSS"?
Beware that there's currently an issue with the % placeholders in D7, if that's what you're using. See #835682: %t (path_to_theme() ) returns modules/field (or whatever module is creating the wysiwyg) instead of the active theme..

I'm also experiencing the original issue, ie you set the CSS dropdown to 'Define CSS', enter the path to your custom js file, but CKEditor still displays the default styles.

Drupal: 7.11
Wysiwyg module: 7.x-2.1
CKeditor library: 3.6.2.7275

Inspecting in Firebug i can see that my .js file is successfully fetched, twice in fact. However the default settings are also fetched and for some reason these take precedence. The files are fetched in the following order, at the end of page load:

/sites/all/themes/ssgb_genesis/ckeditor/ckeditor.styles.js <-- custom styles file
/sites/all/libraries/ckeditor/plugins/styles/styles/default.js
/sites/all/themes/ssgb_genesis/ckeditor/ckeditor.styles.js <-- custom styles file

As suggested, a workaround for this is to stick your JS file in a module instead, and implement a WYSIWYG hook as follows:

/**
 * Implementation of hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
	if ($context['profile']->editor == 'ckeditor') {
		$settings['stylesCombo_stylesSet'] = 'custom:' . base_path() . drupal_get_path('module', 'MYMODULE') .'/ckeditor.styles.js';
	}
}

You need to make sure that the 'styleset' name in your JS file is 'custom' (ie the bit just before the ':') above

This weekend, I worked on a sandbox (D7) that let's you define your specific style rules, and or activate the stylesheetparser: http://drupal.org/sandbox/derhasi/1456404
That can ship arround the problems of this issue. Maybe you want review it.

#14 - your solution worked fine, thanks!

ckeditor library 3.6.2
ckeditor module 7.x-1.4
wysiwyg 7.x-2.1

You need to make sure that the 'styleset' name in your JS file is 'custom' (ie the bit just before the ':') above

this is important! I missed it the first time :-/ The JS file is typically the ckeditor.styles.js-file. Change the first lines

if(typeof(CKEDITOR) !== 'undefined') {
    CKEDITOR.addStylesSet( 'default',

to

if(typeof(CKEDITOR) !== 'undefined') {
    CKEDITOR.addStylesSet( 'custom',

I am trying the solution by rich.3po but I can't get it to work. benjamin_dk, you also mention to change styleset to custom, do you mean in the config.js file in Libraries/ckeditor or where else. Changing the css file in TinyMCE is so much easier but then I don't have CKditor Link which I really like. I am trying to to just make the changes in CKEditor directly but that is not a great option. Any help is greatly appreciated, I think I will be bald soon if I can' get this working.

see also

#1309040: Select which theme's CSS to use when choosing 'Use theme CSS' in settings
#1071754: 'Define CSS' does not apply style in CKEditor

you can fix it by using the patch here at the bottom:
#835682: %t (path_to_theme() ) returns modules/field (or whatever module is creating the wysiwyg) instead of the active theme.

I experienced this issue upgrading from 7.x-2.1 to 7.x-2.2.

Style sheets that were previously being applied to the editor suddenly broke. Argh.

I was defining my sheets as "sites/all/themes/MYTHEME/css/MYCSS.css" however the fix in #835682: %t (path_to_theme() ) returns modules/field (or whatever module is creating the wysiwyg) instead of the active theme. which appears in wysiwyg 7.x-2.2 broke that format.

Using the tokens instead now works as expected, as in "%b%t/css/MYCSS.css"

Hope that helps someone!

Endless thanks, mlecha!

I got this issue, too. If I entered the full path to the CSS file ( /profiles/[profile-directory]/themes/['theme-name']/css/style.css in my case ), the path to the CSS file in the wysiwyg:s link tag showed up as just "//". Using mlecha's tip, it now works as expected.

I think some of the problems mentioned in this issue was resolved by #835682: %t (path_to_theme() ) returns modules/field (or whatever module is creating the wysiwyg) instead of the active theme..

@kevinquillen never got back about the original issue so I don't know exactly what the problem was or if it got solved.

Anyone still having problems defining paths to stylesheets, please create a new issue to not fragment this one further.