Question
Why is an article's appearance different in the editor than in Help Center?
Answer
The Help Center editor is not a, what you see is what you get, editor. The editor is, instead, it's what you see is what you mean, editor. Because of this, the styling of articles while editing will generally be different from how it looks when published. The reasoning behind this decision is that content structure and presentation are completely split and that styling options are not done in the editor. Instead, all styling options are done in the Help Center CSS which is then applied to the content upon publishing. This is the same principle that you find when working with Markdown, the intent versus the finished product.
Therefore the goal of the article editor is not to exactly show how it will look once published, but rather to allow you to build up the content that you then apply styles to afterward. This ensures consistency across articles, as opposed to using inline styles, which would be difficult to change at a later stage and generally not recommended for web design.
The differences in editor versus published appearance are common when adding tables to Help Center articles.
For more information, see the article: Help center CSS cookbook.
19 Comments
So does that mean I need to use CSS to style my articles to have them come out as I want?
Hey Debbie!
The CSS controls the overall look and feel of your Help Center, but you can format the text of your articles in the article editor.
That is the problem; the formatting is not consistent in the article editor. If I had access to the CSS would it make it easier to format and style articles?
Hey Debbie,
I guess I'm not entirely sure what you mean here... can you go into more detail about what's not looking right?
For example, I noticed that NUMBERED paragraphs in the editor look correct, but in the published article they all began with "1."
Hey Stephen -
You could try enabling "unsafe HTML" in your Help Center settings. If that doesn't resolve the issue, it may be something with the CSS or HTML, in which case the best answer is to open a support ticket so that we can dig into the specifics.
How about the inline styling on the wysiwyg editor? Because I styled it properly on the edit but when published. The styling didn't appear.
Hi Paul! Welcome to the Community!
Can you be more specific about what you're seeing? If you could post some screenshots it would be very helpful!
Hi Jesse, Thank you for looking into it. Please see attached image.
Hi @Paul,
It's because the inline styling is removed by the WYSIWYG editor once the article is published.
I will recommend you to use CSS for the styling.
Team Diziana
Any reason why it is doing it or how to have just a default styling for some of the elements? Like for the <tables> the default styling that we usually see on our browsers are removed.
Hi @Paul,
I recommend you to create common CSS classes for styling and add those classes in the article content.
Team Diziana
I'm having this issue as it relates to multi-level bullets. Sorry, this is a little frustrating, and I'm not sure why this basic style is not supported. Looking to dig further on this.
Hi Robert -
How can we help?
I have a ticket in progress #4861414
Thanks for letting us know. Our team will continue to support you there.
What would cause text in published articles to appear the opposite of shown in the editor? All text that is bold is showing as normal and all text that is normal is showing as bold.
I made general styling updates to our help center recently (changed out logos and colors) and ever since those changes were applied the formatting of articles has been broken. These changes were made in the guide admin settings and not in the css file. At some point in every single article the text formatting switches to the reverse of what it is in the editor- please help!
Hi Maegan!
Welcome to the Zendesk Community! I'm sorry to hear that you've experienced formatting issues after making some changes to your theme.
From what I can see, you had also opened a support ticket with our team. It seems that your issue has been already resolved. However, if you have further questions, please feel free to reach out back to us and we'll be happy to help out!
I could you share the solution of this ticket 4861414, i'm experiencing the same issue
Please sign in to leave a comment.