Custom CSS Not Appearing in Visual Pane. Only After Publishing Post.

Hello,

Over the past five days, I was holding an exchange with Jeremy Herve of the JetPack team, regarding a problem I have been having with the custom CSS part of that plugin.

For some reason, a few hours ago, he marked the conversation as resolved — even though it really isn’t — and seems to think that my problem is not related to the JetPack plugin directly.

In one of his responses, Jeremy suggested that I post in this forum instead, being as even when using WP’s “Additional CSS” section under Appearance/Customize, the same problem still occurs. So here I go. I ask for your patience in advance.

Five days ago I learned about the custom CSS that is available via the JetPack plugin, and so I decided to test it out on my WP 4.7.2 self-installed blog using theme TwentyTen.

I went into JetPack’s custom CSS settings, and added the following in the CSS field in the left-hand column as a test:

div.bluefont {
    color:#0000ff;
    }

    div.redfont {
    color:#dd0000;
    }

    div.greenfont {
    color:#427580;
    }

    div.purplefont {
    color:#960af8;
    }

 
    div.box0 {
    position:relative;
    float:left;
    margin-left:0px;
    margin-right:0px;
    margin-bottom:20px;
    -moz-border-radius:5px;
    border-radius:5px;
    padding:20px 0px 20px 5px;
    text-align:left;
    width:100.000%;
    background-color:#6cadee;
        }

    div.box1 {
    position:relative;
    float:left;
    margin-left:0px;
    margin-right:0px;
    margin-top:0.5em;
    margin-bottom:0.5em;
    -moz-border-radius:5px;
    border-radius:5px;
    padding:15px;
    text-align:left;
    width:88.000%;
    background-color:#ffffff;
    }

    div.box2 {
    position:relative;
    float:left;
    margin-bottom:0.5em;
    -moz-border-radius:5px;
    border-radius:5px;
    padding: 15px;
    text-align:left;
    width:88.000%;
    color:#ffffff;
    background-color:#0a1b4e;
    }

    div.box3 {
    position:relative;
    float:left;
    width:100.000%;
    background-color:#ffffff;
    }

    div.floatleft {
    position:relative;
    float:left;
    }

    div.floatright {
    position:relative;
    float:right;
    }

After saving the aforementioned custom CSS settings, I created a new blog post in WP’s post editor, in which I tried to implement a few of those div styles.

More specifically, in WP’s “Text” pane in the New Post/Editor window, I typed the following, based on the custom CSS that I shared with you above:

<div class="box2">
<div class="redfont">
This is just a simple test of my custom CSS.
</div>
</div>

When I switch over to WP’s “Visual” pane in the post editor, based on my custom CSS, I would expect to see a blue box with a 5px border radius, and red text within that box.

However, I was not, and am not, seeing that whatsoever. All I am seeing is plain black text in the editor’s white background window. So, it appeared to not be working at all. However, that turned out to be an only half-right assumption.

Then I discovered exactly what is going on. It is ONLY after I hit the “Publish” button, and go to my main blog page, that the custom CSS becomes visible as a blue box with red text in it.

In short, in my case, even though I am the admin on my blog, and always logged in as the admin, I have to actually commit the post by hitting the “Publish” button, in order to actually see the results of my custom CSS in the post editor.

In my view, this is not a good or safe approach, particularly if one syndicates to eight different social networks as I do.

I much prefer to see what the custom CSS is going to look like in the “visual” pane, before I will know for certain that I should hit the “Publish” button.

In one of his responses to me, Jeremy wrote the following:

“. . . WordPress’ post editor does indeed sanitize your post content when switching from the Text Editor to the Visual Editor. Depending on your role on the site, the editor may strip away specific HTML tags (like JavaScript or iFrames if you’re not an admin), and will try to clean up unnecessary or wrong HTML as well.”

Well, as I said, I am logged in as admin whenever I post, and I am using very simple — and correct — div classes, so I don’t under why WP’s post editor would strip out my CSS code.

In fact, I know for a fact that it is not stripping it out, because, as I said, when I actually publish my post, the div styles I applied are indeed there.

Jeremy then suggested that I try adding my custom CSS under Appearance/Custom/Additional CSS.

However, I was already one step ahead of him, and had ALREADY tried that as well. It has made no difference. I still cannot see the effects of my applied divs when I switch from the “Text” pane to the “Visual” pane. To reiterate, I only see the effect of my custom CSS divs AFTER I actually publish the post.

If anyone here has any ideas regarding why this is occurring, I would really appreciate your assistance.

Thank you in advance.

Kind regards,

WW

• This topic was modified 7 years, 1 month ago by Bill Kochman.