Recent searches
No recent searches
Guide reformats HTML code
Answered
Posted Oct 25, 2017
We have created some nicely formated and very basic HTML pages that we want to incorporate as part of our customer FAQ. Nevertheless, when we try to copy/paste the code, initially it is correctly previewed, but when we click the update button, then it gets re-formated and all the magic goes away. We have already invested some time into this and would like to know if there is any chance of working around this very inconvenient product "feature".
0
25
25 comments
Lotus Themes, Zendesk partner for Help Center design and customization
Hi Juan, can you clarify some information:
Best,
Lotus Themes
0
Juan Eusse
Dear support,
1. I want the code to be rendered in the articles, copy and paste the HTML code.
2.
3. Yes I did
Thanks for the help,
Juan
0
Trapta Singh
@Juan Eusse,
Please copy and paste the CSS you are using in your CSS editor instead of article editor.
The reason behind the issue is, every time you are updating code, the WYSIWYG editor trims the <style></style> and other elements from your code and as a result, you see unformatted text.
Let me know how it goes for you.
Thanks
0
Paul Toomey
We have the same issue, in our article we create nice looking tables with all the widths set on each column
But as soon as we publish this, the table is reformatted
In our code, the table is defined as
but when published all the style tags are removed !!!
So why on earth would your 'designer' put all this CSS style tags in if you are just going to strip them out when we publish the articles ???
How do I fix this please?
Thanks
Paul
0
Trapta Singh
@Paul Toomey
Do you want it to look like similar to one in your editor?
I don't know why the width is not working in your case, maybe there is something messing it up but about the UI part, you have to tweak the CSS to change the look and feel of table UI.
Thanks
0
Paul Toomey
@Trapta
Yes exactly - this is what we 'designed' in your editor, so we expect it to appear the same when we publish. I am not using any external editor (I only copied the code into an editor to check what was going on). We are creating articles with your online editor and publishing them, but they always look different between the two 'views'
Cheers
Paul
0
Trapta Singh
@Paul Toomey,
Please add below code in your CSS and let me know how it goes for you -
Thanks
0
Paul Toomey
Hi There
I don't think you are getting me, we use your online editor as per below
We carefully drag the table columns to the specific widths we need, we then click on Publish and the Help Centre shows this as the result
Which is nothing like what we create in your system.
I have no idea about adding Code to a CSS, I don't have one. I don't care about the dotted line etc, I want the widths that we set kept as otherwise in the published view the spacing is all wrong and various items in the first column wrap onto TWO lines instead of ONE etc
Hope that helps to explain.
Paul
0
Trapta Singh
@Paul Toomey,
Apologies for miss understanding your question.
Have you tried dragging your table columns while adding content to maintain the width?
Also can you please share the URL of your HC so I can take a look and make sure that anything else is not messing it up?
Are you using Copenhagen Theme?
Thanks
0
Paul Toomey
Hi there
Yes - this is exactly what we do. I create a table, start typing in details and then drag the columns so they are the desired width in the editor screen.
When I click on the </> icon on the editor window it shows all of this in the code
However when we click publish all of the style parts of the <td> tags gets removed by your publishing functions. If I go back into the article to edit it again - everything looks fine and all the style attributes are on the <td> as expected. It is just on the published article that all this is missing.
Cheers
Paul
0
Trapta Singh
@Paul Toomey,
Please go to your help center settings and enable Display unsafe content.
Thanks
0
Paul Toomey
Hi there - I tried that setting earlier today due to the comment above from the orignal poster of this query (sorry for hijacking this thread).
I turned on the option, went back into my article and made a change (just pressed enter) and then clicked Update and it looks exactly the same as before - all the formatting of the table column width is still missing.
Our HC is on navitas.zendesk.com, and this particular article is
https://navitas.zendesk.com/hc/en-us/articles/115002414992
Cheers
Paul
0
Trapta Singh
@Paul Toomey,
I can see that width is working now and I tweaked it a bit using inspect tool (just for demo purpose) and this is how it is looking like now -
0
Trapta Singh
I tweaked your code to make it look like this.
Thanks
0
Paul Toomey
Hi There
Thanks for that, the line spacing is still off, but we can live with that I guess.
I would say its actually Zendesks code and not mine you are tweaking as I don't create the code, your editor does !
Did you tweak this on the published Article or something in the editor itself ? I am concerned that when I update and republish the article again the edits you have made will disappear and I will be back to square one.
Cheers
Paul
0
Trapta Singh
Oh no, I haven't made any changes in the editor itself but I can guide you to do it if you want to.
Thanks
0
Paul Toomey
thats fine for now - I will just have to keep in mind that any edits I make will break anything you have done.
I am just concerned that your WYSIWYG editor provided in the help centre is anything but that and what we see is pretty much NEVER what we end up getting on the published articles :(
As can be seen from Juan - even if you have people creating actual HTML/CSS and the like to ensure the articles meet customer and corporate expectations/standards - they just don't end up that way online.
Thanks
Paul
0
Trapta Singh
@Paul Toomey,
Please don't get misunderstood, I haven't done anything so nothing is going to break if you make any edits.
Thanks
0
Juan Eusse
I understand the technical reason behind the reported issue, and also kinda understand the motivation of having an homogeneous look and feel for the articles by having a unified CSS style.This may work for companies where customization is not a major concern, and where homogeneity is favored.
What I think that is a very bad idea is to limit the options. The idea of having an HTML editor parallel to a WYSIWYG one is to enable people to create their own HTML code, and parsing their input seems counter intuitive to say the least. I am not happy with the approach, as this means that the company now needs to pay two different people, one to create the web page, and another to import it in a way that is compatible with zendesk. I would kindly ask if you are planning to create an option in which the user can instruct the HTML code parser not to cut away ANY stuff from custom HTML code, so that the page is rendered as is when the article is updated.
Thanks for the help,
Juan
0
Niclas Kårlin
Are there any topics about this more than this? It's not so easy to work with "Zendesk HTML" as the documentation on w3 school do not always apply, afaik.
I'm trying to make buttons...
0
Dan Ross
Hi Niclas,
Did you include the stylesheet
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
If not, you will need to do this, otherwise the buttons won't be styled and then you may need to specify your own CSS for a .button class in your theme. Can you perhaps include some more info about what your code looks like now and what results you're getting?
0
Niclas Kårlin
Thanks Dan for reaching out. I got help from Zendesk support with this tip and that works.
What I ended up is to include the actual HTML in my style.css, like this:
.OrangeButton {
color: white;
background-color: #d86633;
cursor: pointer;
border-radius: 32px;
border: 1px solid #d86633;
padding: 8px 16px;
}
.OrangeButton:hover {color: #d86633;background-color: white;}
... and then this in my header.hbs:
<a class="OrangeButton" href="https://www.ndcsolutions.com/partner-portal ">Visit the Partner Portal</a>
...so now I am a css guru!
0
Nicole Saunders
Hey Niclas -
Thanks for sharing the solution! Glad you got things working. :)
0
Lily Dodge
I am having a similar problem - I want to add the <meta name="robots" content="noindex"> to just one of my Help Center articles, but that html keeps getting stripped. Help!
0
Nicole Saunders
Hi Lily -
It looks like Brett responded to you in your other post, but you should be able to limit the indexing of a single article by removing the URL in your Google Webmaster's tool as outlined in this article: How do I exclude a Help Center page from being indexed by Google
Check that out and let us know if it works for you.
0