Editor Style: How to?

  • Anonymous

    #1770

    Hello, I’m starting to explore the options of Graphene, and I’ve installed Tiny MCE Advanced. I want to write my posts with the Graphene style applied while I work. My question is: is there anything special that needs to be done to activate the Visual Editor style for Graphene? I thought that I had to add “add_editor_style();” to the “functions.php” template, but it’s already included. So what else is required for the visual editor to show the Graphene style? I tried to do the same with Twenty Eleven to see if there was something wrong elsewhere, but just by adding add_editor_style(); it worked. Sorry if this is a dumb question, but I’m not a CSS expert.

    Mod

    Kenneth John Odle

    #17127

    I don’t know. I just installed this on my test blog and it’s working just fine. Didn’t have any problems using it, although it slowed performance down a wee bit. And it has so many features I don’t even know what they all do. But it’s cool.

    Did you read the FAQ? — http://wordpress.org/extend/plugins/tinymce-advanced/faq/

    What do you mean by “Graphene style”?

    Include a link to your site. Thanks.

    Ken

    Anonymous

    #17128

    By “Graphene style” I mean that the visual editor text looks like the resulting blog post, with the same font, same layout, etc. while you are still writing. That’s the main function of the Visual Editor Stylesheet (editor_style.css) if I’m not mistaken. (BTW, the block comment in editor_style.css says “Used to style the TinyMCE editor.”)

    What I want to know is if the TinyMCE visual editor is styled by Graphene automatically (since the functions.php already includes the add_editor_style() class which is needed to activate the “styling”), or something extra is needed for this to work. Did it style your visual editor to look like the Graphene layout after you installed TinyMCE Advanced?

    Everything else about the plugin works for me, the new buttons appear on the editor, etc. I did read the FAQ. The editor does import optional “styles” (actually classes) to a drop-down menu (like alignleft, alignright, wp-caption, etc.), but those options don’t behave all that differently from the regular editing options.

    My site is a test blog, but here goes anyway: http://www.alpha-risk.net/blog/

    Mod

    Kenneth John Odle

    #17129

    What I want to know is if the TinyMCE visual editor is styled by Graphene automatically….Did it style your visual editor to look like the Graphene layout after you installed TinyMCE Advanced?

    The style that you see in the “edit post” pane is controlled by the editor-style.css file. This is what the add_editor_style() function is adding in. In order to change how your post looks when you edit it, you would need to change this file. I don’t know if that is possible using a child theme.

    I know that the TinyMCE Advanced website describes the TinyMCE editor as “wysiwyg,” but that’s not really the case.

    Ken

    Anonymous

    #17130

    Yes, the problem is that editor_style.css is doing nothing even though the add_editor_style(); function is already included in functions.php. Are you saying that the styling is not happening because the editor_style.css file needs to be somehow modified for it to work? What kind of changes would I need to do then?

    Isn’t the sole purpose of editor_style.css to style the editor? Why would it need to be changed to carry out its function?

    I don’t think using a child theme is necessary (or indeed possible), since I could simply create a new css file like “new_editor_style.css” and direct the function to that new css:

    Code:
    add_editor_style(new_editor_style.css);
    Mod

    Kenneth John Odle

    #17131

    Isn’t the sole purpose of editor_style.css to style the editor? Why would it need to be changed to carry out its function?

    As I said, the visual editor is not wysiwig. A lot of people think so (including plugin creators, apparently), but this is simply not the case. The editor_style.css file does style the editor, but it doesn’t style it the way your blog post will ultimately look. After all, Graphene offers a lot of built-in options to control how your blog posts will look in addition to offering you a custom CSS option. Open up the editor_style.css file in a text-editor and take a look at the styling. It is very different from the regular style.css file.

    I don’t think using a child theme is necessary (or indeed possible), since I could simply create a new css file like “new_editor_style.css” and direct the function to that new css: add_editor_style(new_editor_style.css);

    I’m not sure that this would work, but if you want to experiment, you would want to add this in your child theme’s functions.php file. Please don’t edit the original theme files.

    Good luck,

    Ken

    Anonymous

    #17132

    I’m sorry Ken, I still don’t understand. Are you saying that GRAPHENE’S editor_style.css is not doing anything because of the theme’s many built-in options? What do you mean that the file “does” style the editor? I don’t see it changing anything at all! As I told you I tried the same with Twenty Eleven, and it does style the editor to very much exactly like posts end up looking like. That’s what I want Graphene to do.

    I still don’t know what to modify in Graphene’s editor_style.css, that’s why I asked you. I guess I could take Twenty Eleven’s code and modify the variables one by one to fit Graphene’s, and then put that code in a child theme. But I don’t want to do that knowing that there’s already an Editor_style.css for Graphene that is supposed to do that. I still don’t understand the point of Graphene’s editor_style.css if it won’t do what it says it does.

    Mod

    Kenneth John Odle

    #17133

    Are you saying that GRAPHENE’S editor_style.css is not doing anything because of the theme’s many built-in options?

    No, Graphene’s editor_style.css is styling the visual editor, just like Twenty Eleven’s styles its visual editor. But if you opened both files in a text-editor (and you really should; it’s a great learning experience), you would find the code they contain to be very different. Graphene’s editor_style.css is much more plain that Twenty Eleven’s.

    I still don’t know what to modify in Graphene’s editor_style.css, that’s why I asked you.

    Open Graphene’s style.css and editor_style.css in a text editor and compare the two. Whatever selectors appear in the editor stylesheet, you would style to match what is in the regular stylesheet.

    You can read this article for more information.

    Ken

    Admin

    Syahir Hakim

    #17134

    I would say that the theme’s editor-style.css is being deprived of love lately from the developers, due to other more important things. When the weather is nice and the coffee is having its effect, it may finally get some (overdue) attention!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!