WordPress › Support » editor-style.css does not seam to be working?

jhayes
Member
Posted 1 year ago #
I am using WordPress 3.1 with the Eximius 2.2 by dkszone.net theme. My goal is to get the TinyMCE wysiwyg editor to match the theme. The fist thing I did was add the following plug-ins: TinyMCE Advanced and TinyMCE Valid Elements. This leads me to my fist dilemma.

How do you activate the tinymce-advanced css tadv-mce.css?

Then I copied the editor-style.css file from the Twenty Ten theme to the Eximius folder. And then add the following to the Eximius theme's functions.php file.
```
/**
 * Add custom editor-style for WYSIWYG Editor – TinyMCE
*/
if ( ! function_exists( 'addestyle' ) ):
function addestyle() {
	// This theme styles the visual editor with editor-style.css to match the theme style.
	add_editor_style(editor-style.css);
}
endif;
```
[Please post code snippets between backticks or use the code button.]

The editor shows the editor-style.css was added to the theme. When I open the posts editor there is no changes to the styles or fonts. I have spent a couple of days now searching the internet for answers with no luck. Does anybody have any suggestions?
colarikbrothers
Member
Posted 1 year ago #
Hi,

I have been searching for several days as well. I am running into same issue.

[TinyMCE-Advanced]
My Observations: Possible Reasons
** The ui.css is being loaded after / overwriting the editor-style.css.

** Or possibly the load-styles.php isn't working properly (Not 100% sure how that works)

** I've tried using several specific css rules and even the !imporant; in editor-style.css declarations to overwrite the ui.css but to no success.
```
/*
TINYMCE-STYLE CUSTOMIZATION
*/
.mce_formatPreview .mce_h1 .mceText {
	color:red;
}

.mceMenu .mce_formatPreview.mce_h1 .mceText {
	color:green !important;
}

.wp_themeSkin .mce_h1 span.mceText {
	color:orange;
}

.mceMenu.wp_themeSkin .mce_h1 span.mceText {
	color:blue;
}

.wp_themeSkin .mceMenu .mceText {
	color:blue !important;
}
```
** Referenced this to load in another css file...and still its being overwritten: http://wordpress.org/support/topic/add-custom-css-classes-to-the-wysiwyg-drop-down

My Goal is to not have to "hack" into the ui.css and change...because after any update it will be overwritten.

I'm out of ideas...any help is most appreciated.
Many Thanks!
jhayes
Member
Posted 1 year ago #
Hi,

Well the problem with the editor-style.css not being recognized has been resolved. Here is the statement in the beginning of the functions.php that finally made it work.
```
/**
 * Custom CSS for WYSIWYG Editor – TinyMCE
*/
add_editor_style('editor-style.css');

// theme options
$options = array.......
```
The statement for what ever reason had to be at the beginning of the file and I had to include the 'editor-style.css' to make it work.
The other issue about activating the tinymce-advanced css tadv-mce.css has not resolved and I am giving up on that problem. After spending many hours monkeying around with the add_editor_style statement getting it to work, has soured my taste for WordPress.
Andrew Ozz
WordPress Dev
Posted 1 year ago #

@jhayes your first example should work too if the function addestyle() is run at the right time (with a proper hook). I don't think add_editor_style('editor-style.css'); need to be in a separate function though (as in the second post) unless you're doing something more there.

@colarikbrothers this is a completely different place. The TinyMCE's menus are on the actual page but the content is an iframe. add_editor_style() adds another stylesheet to the iframe, this won't affect the menus in any way. If you want to re-declare the menus you will need to add CSS to the Edit Post header. Also, you don't need to overwrite ui.css, just add more specific rules. The C in CSS stands for Cascading :)
jhayes
Member
Posted 1 year ago #

Andrew, Yes I agree with you, The first statement should have worked. However it did not. This is the reason for this post. After 6-8 hours working on the problem and crashing the website 3 times, I have concluded that it does not work with the latest version of WordPress. add_editor_style('editor-style.css'); at the very begining of the functions.php got it to work, I really not up to messing with it any more. :-(
colarikbrothers
Member
Posted 1 year ago #
@Andrew Ozz:
Thank you for insight. I am in need of your expertise. I tried using more specific css in editor-style.css such as
```
/*
TINYMCE-STYLE CUSTOMIZATION  [ Placed in editor-style.css || functions.php: calling at top as in twentyten theme default:
// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();]
*/

div.mceMenu.mceListBoxMenu td.mce_formatPreview.mce_h1 span.mceText {
	color:red;
}
```
* Still didn't work
* Tried add_editor_style('editor-style.css'); and didn't work

**My Goal: Simply to have [TinyMCE-Advanced Plugin] format dropdown match the h1,h2,h3,+ styles from theme/editor-style.css AND if possible the h1,h2,h3,+ styles will render in the content area. (Which you mentioned to put CSS in "Edit Post" Header)

**Is there a conflict with the plugin?
1. Am I going about this the right way?
2. Where is this "Edit Post" header you are referring to? wp-admin folder?
3. If so, when I update WP does it overwrite my wp-admin folder when I customize it? What is the best way to safe-guard this?
Thank you soo much for your help with this!

-------

@jhayes:
TinyMCE-Advanced Plugin Page
Pulled from FAQ section:

* I just added my css classes to tinymce.css but they are still missing from the editor.

Click on “Save Changes” on the admin page of the plugin, even if you did not change any buttons. This will force TinyMCE to reload the css files.

After re-reading what I think you're trying to do: "Get the Styles Dropdown to reference the tadv-mce.css and/or your theme's styles."
- The Style Dropdown ONLY references the styles located in the tadv-mce.css file. If you want to bring in classes from your theme...you have to go to the Tiny-ADV Editor Settings and check the box that reads: "Import the current theme CSS classes".
- Also, after making changes to the tadv-mce.css file, you have to clear your cache in order for TinyMCE-Advanced to show changes. This happened to me last week.
I'm currently doing my first web-project with WP and running into lots of things...but I believe when I tested "Updating" the TinyMCE-Advanced Editor...it overwrites any styles in the tadv-mce.css file which is unfortunate. Only Solution I know of: MUST place in styles.css and import...but that brings in all valid classes from your theme and 90% are unnecessary. Hope this helps
jhayes
Member
Posted 1 year ago #

@colarikbrothers after making each change to the functions.php file, I log off the site. I would think the after log-in and opening a post to edit, the css files would be applied to the tinyMCE editor. Wouldn’t that also clear cache?

For what ever reason, it did not seam to work. However, once the editor-style.css was recognized, the font and styles in tinyMCE changed to match Twenty-Ten theme. Since that time I have successfully edited the editor-style.css to match the Eximius 2.2 theme.

My goal is to get the TinyMCE wysiwyg editor to match the theme has been reached. The warm glow of victory is short lived as the pain of the experience is realized.

Thanks for your input.
Adam
Member
Posted 9 months ago #

I'm having a related issue with TinyMCE Advanced. (Great plugin, by the way!) When I add the "editor-style.css" file to my themes folder, the styles are applied to the editor. Great, works just fine.

If I am to later edit those styles in the "editor-style.css" file, the updated styles don't show up with my changes in the editor. Is there some sort of WP cache I need to clear? If so, what is it?

I did try clearing my browser cache, but that didn't work.

Thanks!
Adam
Member
Posted 9 months ago #

Figured it out. Not as time-efficient as I would like, but here it is...

Completely clear the browser's cache excluding the "cookies" option. Clearing cookies will delete the WP cookies, and you will be, essentially, logged out. The cache is really all we're concerned with here. In Firefox: Tools > Clear Recent History...

Refresh the page you're working on in the WP back-end, and the changes you made to the "editor-style.css" file will be revealed.

If anyone has a more time-efficient way of doing this, please let me know! Thanks!
juliedc
Member
Posted 8 months ago #

After spending days trying all sorts of things (including those on this page), I downloaded the CKEditor plugin. Done with Tiny MCE forever (with any luck)!!!!
mary_k
Member
Posted 3 months ago #

@jhayes a little late but, in your first example you needed single quotes: add_editor_style('editor-style.css');
instead of
add_editor_style(editor-style.css);

maybe that was the issue all along?

Topic Closed

This topic has been closed to new replies.

WordPress.org

Forums

[resolved] editor-style.css does not seam to be working? (11 posts)

Topic Closed

About this Topic

Tags

Code is Poetry