Custom CSS Not Working on Self-Installed Blog

Resolved

(@wordweaver777)

Hello. I just 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 those settings, I created a new blog post in which I tried to implement a few of those div styles. It is not working at all.

I thought that maybe I am doing something wrong, but then I also discovered this on your website:

“Note: you must have either WordPress.com Premium or WordPress.com Business active on your site to be able to add custom CSS to your site.”

So does that mean that custom CSS will not work on my self-installed WP blog unless my blog is connected to a premium or business account on wordpress.com?

I just have a regular, free wordpress.com account.

Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

7 years, 1 month ago

Could you post your site URL here, so I can have a look?

If you want it to remain private, you can also contact us via this contact form:
http://jetpack.com/contact-support/

I also discovered this on your website:

“Note: you must have either WordPress.com Premium or WordPress.com Business active on your site to be able to add custom CSS to your site.”

That warning only applies to WordPress.com site owners. Since you use the self-hosted version of WordPress, there are no restrictions to the CSS you can add to your site.

Thread Starter Bill Kochman
(@wordweaver777)

7 years, 1 month ago

Hello Jeremy,

Well, I just posted another test message on my blog, and in the process of doing so, I discovered exactly what is going on.

If you visit my blog at https://www.billkochman.com/blog/, you will in fact see that the custom CSS *IS* working.

So why was I under the impression that it was not working?

Well, because of the way in which custom CSS is implemented.

In short, if I construct a new post in the “text” pane, and then switch over to the “visual” pane, the custom CSS does *NOT* display.

One has to actually commit the post by hitting the “Publish” button, in order for the custom CSS to take effect.

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.

Other WP users may feel differently about this issue, but personally, I feel this is a much safer route to take.

Please let me know what you think.

Kind regards.

Bill K.

Thread Starter Bill Kochman
(@wordweaver777)

7 years, 1 month ago

Hello again Jeremy,

I thought that maybe if I placed that same custom CSS code in my child theme’s “Additional CSS” section, it might work better, and allow me to see the changes in visual mode. However, as occurs when placing the code in JetPacks “Custom CSS” section, it is still not working.

Again, I hope you folks will find a way to make this possible.

Please let me know what you think.

Kind regards,

Bill K.

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

7 years, 1 month ago

In short, if I construct a new post in the “text” pane, and then switch over to the “visual” pane, the custom CSS does *NOT* display.

One has to actually commit the post by hitting the “Publish” button, in order for the custom CSS to take effect.

I’m not quite sure I understand. The CSS editor doesn’t include any “Text” or “Visual” pane. Are you adding CSS within your posts, in the post editor under the Posts menu in your dashboard?

If so, 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.

That’s not something that’s linked to Jetpack though, so I’m afraid I won’t be able to help with this. If you believe that WordPress’ post editor is stripping away HTML that shouldn’t be stripped away, I’d recommend that you start a new thread in the general support forums here:
https://wordpress.org/support/forum/how-to-and-troubleshooting/

I’d recommend adding a few examples in your post there so others may try to reproduce as well.

If you’re trying to add CSS to that post editor, I’d recommend that you add that CSS under Appearance > Customize > Additional CSS instead. That’s where all custom CSS should in fact be added when you want to add CSS via your dashboard, without changing your theme’s files.

I hope this clarifies things a bit!

Thread Starter Bill Kochman
(@wordweaver777)

7 years, 1 month ago

Hello again Jeremy,

I apologize if my previous comments were not clear to you.

To clarify, yes, I am referring to starting a new post by selecting “Post” under the “New” near the top of my web browser window, or by clicking on the “Add New” button/link in WP’s “Edit Post” window.

I have already shared with you some of the Custom CSS that I have included — as per your instructions — in my previous message.

Let me give you a specific example. If I am in the “Text”pane in the New Post/Editor window, let’s say that I type the following, based on the custom CSS that I have added to JetPack’s Custom CSS section:

<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” mode in the text 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.

I am not seeing that whatsoever. All I am seeing is plain black text in the editor’s white background window.

It is ONLY after I hit the “Publish” button, and go to my main page, that the custom CSS becomes visible.

Are you saying that WP’s post editor will strip away the two divs I have added when I switch to the “Visual” pane?

If so, then how am I supposed to know if it is properly displaying what I want, before I actually publish the message?

Is this then a bug in WP?

Jeremy, if you re-read my third and last message to you above, you will see that when using JetPacks custom CSS section did not seem to work, I did in fact add the same custom CSS to the “Additional CSS” section under Appearance/Customize.

It has not made any difference. I still cannot see the blue box with rounded corners and red text, unless I actually publish the message, and then look on my blog’s home page.

So again, is this indeed possibly a WP bug, or maybe a conflict with some other plugin?

Thank you for your time and patience. I don’t know why this message was marked as resolved. 🙂

Thread Starter Bill Kochman
(@wordweaver777)

7 years, 1 month ago

BTW, Jeremy, in addition to what I stated in my last post, I am the only admin on my blog, and I am always logged in as admin when I post new messages.

Plugin Author Jeremy Herve
(@jeherve)

Jetpack Mechanic 🚀

7 years, 1 month ago

I have already shared with you some of the Custom CSS that I have included — as per your instructions — in my previous message.

That part works well; there are no issues with how Custom CSS is added to your site. The CSS you’ve added to WordPress’ CSS editor is included on your site.

when using JetPacks custom CSS section did not seem to work, I did in fact add the same custom CSS to the “Additional CSS” section under Appearance/Customize.

That’s indeed where you should be adding Custom CSS in your dashboard.

I don’t know why this message was marked as resolved. 🙂

I marked the thread as resolved as it doesn’t appear to be an issue with the Jetpack plugin. The plugin works as expected on your site, and the CSS you’ve added to your site is enqueued properly. You can see it when looking at your site’s source code.

I’m afraid there isn’t a lot more I can do to help you. However, since you’ve now posted in the general support forums about this, you may receive some help there!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom CSS Not Working on Self-Installed Blog’ is closed to new replies.

Tags