Welcome! To use this support forum, please Login or Join Today!

   

Poblem with TinyMCE plugin in my Wordpress theme

{name}
Rank

Total Posts: 17

Joined 2011-09-06

PM

 

Hi Casey,


I use the TinyMCE plugin with satisfaction
in my Presstige theme.

However, I would like to add
Custom CSS styles in addition
to those already present in the menu “style”.

I understand the need to check in
settings plugin TinyMCE

“import editor-style.css”. That’s what I did.


Then, I went in the “editor”
of my blog.

There, I edited the file “editor-style.css”.

admit that I want to create a style

.typography link {
  color: #0E4BF2;
  text-decoration: underline;
}

I added in “editor-style.css” and then I save.

After I did a test by creating a new page
to see if the style “typography link”
was added to the menu “style”.

But he does not find it.

Do I did something wrong?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Hi, The editor-style.css is already activated by the theme and imported from wp-content/themes/presstige/editor-style.css

{name}
Rank

Total Posts: 17

Joined 2011-09-06

PM

 

ok, thank you for your response.

I did see the file editor-style.css
panel in my “editor” of Wordpress.

When I want to add such
a CSS class like:

.typography sample {
  color: #0E4BF2;
  text-decoration: underline;
}


and that I update the file editor-style.css,
How is it that the new CSS class
typography sample” does not appear in the tab
“style” of the TinyMCE editor?


Can you tell me what’s missing
for this to work?


Thank you for your help.

Laurie

{name}
Rank

Total Posts: 17

Joined 2011-09-06

PM

 

Hi Casey,

Let me send you a private message,
Further to my question of the post:

http://www.simplethemes.com/support/viewthread/616/

I have not received a response from you. Perhaps
have you not seen seen my last question?

It’s very important for me to see a
answer to this question.

Indeed, I have to use a company
SEO to make my blog more visit
on search engines (they ask me
to add custom style sheets
in TINY MCE editor )

So I absolutely need to be able to create CSS
custom styles (in addition syle drop down menu
of the TINY MCE editor)

Can you tell me specifically (by a small
example) what I should do to achieve ...
taking into account the specificities theme
Presstige:

- The only thing I am certain is that
I should use editor-style.css
to create custom css classes

- What should I do after that? Are there
add code elsewhere?

Looking forward to your response, thank you
much in advance for your invaluable help
you provide me.

Sincerely,

Laurie

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Adding styles to editor-style.css does not add them to the style picker in TinyMCE automatically.
http://www.tinymce.com/wiki.php/Configuration

You’d need to add some functionality via PHP in order to achieve something like this:


Add to functions.php:

/*-----------------------------------------------------------------------------------*/
// Better-Up the TinyMCE Editor
/*-----------------------------------------------------------------------------------*/


function st_change_mce_options($initArray) {
// Comma separated string of extended tags
// Command separated string of extended elements
$ext = 'br[class|style],pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
// maybe; set tiny paramter verify_html
$initArray['theme_advanced_blockformats'] = 'p,pre,code,div,h1,h2,h3,h4,h5,h6';

$initArray['theme_advanced_buttons2_add_before'] = 'formatselect,styleselect,|,anchor,hr';

// styleselect
//$initArray['theme_advanced_styles'] = "1st Option=classname1;2nd Option=classname2;3rd Option=classname3";
$initArray['style_formats'] = "[
 {title : 'Info (div)', inline : 'div', attributes : { 'class' : 'note info'}},
 {title : 'Warn (div)', inline : 'div', attributes : { 'class' : 'note warn'}},
 {title : 'Alert (div)', inline : 'div', attributes : { 'class' : 'note alert'}},
 {title : 'One Half (div)', inline : 'div', attributes : { 'class' : 'one_half'}},
 {title : 'One Half Last (div)', inline : 'div', attributes : { 'class' : 'one_half last'}},
 {title : 'One Third (div)', inline : 'div', attributes : { 'class' : 'one_third'}},
 {title : 'One Third Last (div)', inline : 'div', attributes : { 'class' : 'one_third last'}},
 {title : 'One Fourth (div)', inline : 'div', attributes : { 'class' : 'one_fourth'}},
 {title : 'One Fourth Last (div)', inline : 'div', attributes : { 'class' : 'one_fourth last'}},
 {title : 'Biggest', inline : 'span', attributes : { 'class' : 'biggest'}}
]";

$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css';
$initArray['content_css'] = $url;
// get the defult theme style
$currentstyle = get_option('sthemes_themestyle');
// load the appropriate color pallete
if ($currentstyle == "style1") {
$initArray['theme_advanced_text_colors'] = '3E3425,FFD232,F6961F,000000,338DC9';
} elseif ($currentstyle == "style2") {
$initArray['theme_advanced_text_colors'] = '225884,0064B8,669900,3A3A3A,000000';
} elseif ($currentstyle == "style3") {
$initArray['theme_advanced_text_colors'] = 'F3F3F2,6C0303,B33200,FFCC00,2F2F2F,000000';
} elseif ($currentstyle == "style4") {
$initArray['theme_advanced_text_colors'] = 'F3F3F2,2D2D2D,1A1A1A,6EA600';
} elseif ($currentstyle == "style5") {
$initArray['theme_advanced_text_colors'] = '225884,0064B8,669900,3A3A3A,000000';
} elseif ($currentstyle == "style6") {
$initArray['theme_advanced_text_colors'] = 'E0E0DF,272727,FB7600,3A3A3A,000000';
}
//$initArray['verify_html'] = false;
return $initArray;
}
add_filter('tiny_mce_before_init', 'st_change_mce_options');

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Actually, don’t add that to functions.php because that function (st_change_mce_options) already exists in Presstige around line #304 in /wp-content/themes/presstige/lib/functions/theme_functions.php.

I’ll leave the code above up for reference. That is from the Element theme which you could use for reference. It adds the custom styles like you’re trying to do.


Any styles you add to this must be present in editor-style.css as well as your theme’s stylesheet in order for them to work.

{name}
Rank

Total Posts: 17

Joined 2011-09-06

PM

 

Hi Casey,

Thank you for your answer.

However, there is an error when I do
changes as you have advised me.

Here’s what I did:
——————————————

1. I go to file:
  theme_functions.php

Around line 304, and if I
understand that I replace the function
(st_change_mce_options) by default
(ranging from line 304 to 335),
with the one you gave as an example.

Once I made that change, I commend
theme_functions.php file online.

————————————————-

2.After this, I add in editor-style.css
  a custom class, such as:

a.essai12,
a.essai12: link,
a.essai12: visited {
color: # 6e6e6e;
        text-decoration: none;
}

a.essai12: hover {
color: # 6e6e6e;
        text-decoration: none;
}

———————————————

3. after that, I go syle2.css
(this is what I use for my style
theme):

I also added the same class
personalized:

a.essai12,
a.essai12: link,
a.essai12: visited {
color: # 6e6e6e;
        text-decoration: none;
}

a.essai12: hover {
color: # 6e6e6e;
        text-decoration: none;
}
——————————————-

4. I go to the editor
page of the blog, and I look
if the changes made
allow me to
select the new class
created ...

=======> But that does not work.

WORSE, my visual editor TinyMCE is gone!

=======> Can you tell me what should I do?


Thank you for your answer


Laurie

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

It sounds like you may have made an erroneous edit. It’s tough to say without seeing the source.

{name}
Rank

Total Posts: 17

Joined 2011-09-06

PM

 

would you agree that I can give you the 3 modified files (in PM)
-editor-style.css
style2.css-
-theme_functions.php.

where I made the changes? You may be able to see more clearly as well?


Laurie