WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 3.9 beta 3 - tinymce not take style colors in the editor bar (8 posts)

  1. andreamk
    Member
    Posted 4 months ago #

    a tiny bug
    link to image

  2. Can explain the issue a bit more please? What is missing?

  3. I made a new post.

    Typed in 'Header 1' and selected the text, changed it to a rather noxious green, then made it Header 1. Color worked.

    Tried it the other way (made it a header then changed color) and it also worked.

    If you're saying that the visual version on the drop down doesn't change, that would be true. It wouldn't really be readable otherwise.

  4. andreamk
    Member
    Posted 4 months ago #

    Exactly. In the menu takes only font-family and font-size but not the colors.
    I have used tinymce in my application and change the colors in the menu is very comfortable.

    an example

  5. andreamk
    Member
    Posted 4 months ago #

    I remembered that I used the inline mode to realize my application.

    Maybe the differences are due to that.

  6. Can you link to your plugin? It's possible that you have to update it for TinyMCE 4.

  7. andreamk
    Member
    Posted 4 months ago #

    It is not a plugin but a theme.
    to change editor styles I use the funcion add_editor_style

    the part of the css file relative to the headers is as follows

    html body.mceContentBody h1,
      html body.mceContentBody h2,
      html body.mceContentBody h3,
      html body.mceContentBody h4,
      html body.mceContentBody h5,
      html body.mceContentBody h6,
      .mce-content h1,
      .mce-content h2,
      .mce-content h3,
      .mce-content h4,
      .mce-content h5,
      .mce-content h6 {
        clear: both; }
      html body.mceContentBody h1,
      .mce-content h1 {
        color: #775f38;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 2.3125rem;
        line-height: 1.2;
        margin: 0 0 20px 0; }
      html body.mceContentBody h2,
      .mce-content h2 {
        color: #775f38;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 1.8rem;
        line-height: 1.2;
        margin: 0 0 20px 0; }
      html body.mceContentBody h3,
      .mce-content h3 {
        color: #444444;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 20px;
        line-height: 1.2;
        margin: 0 0 20px 0; }
      html body.mceContentBody h4,
      .mce-content h4 {
        color: #775f38;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 20px;
        line-height: 1.2;
        margin: 0 0 20px 0; }
      html body.mceContentBody h5,
      .mce-content h5 {
        color: #444444;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.2;
        margin: 0 0 20px 0; }
      html body.mceContentBody h6,
      .mce-content h6 {
        color: #775f38;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-size: 14px;
        line-height: 1.2;
        margin: 0 0 20px 0; }
  8. It's not you, it's tinyMCE 4, which is ... not something we can easily fix. If you inspect the CSS on http://www.tinymce.com/tryit/inline.php you can clearly see they do this for H1:

    <span id="mce_40-text" class="mce-text" style="font-family:'Trebuchet MS', Arial, sans-serif;font-size:24px;font-weight:bold;font-style:normal;text-decoration:none solid rgb(108, 171, 0);text-transform:none;color:rgb(108, 171, 0);background-color:rgba(0, 0, 0, 0);padding:0 2px;border:0px none rgb(108, 171, 0);border-radius:0px;outline:rgb(108, 171, 0) none 0px;text-shadow:none;">Heading 1</span>

    So it's all inline, AND it's not actually calling an H :(

    You'll have to work and research the changes in TinyMCE to see how to apply those.

Reply

You must log in to post.

About this Topic

Tags