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

Hi Juan, can you clarify some information:

  1. Do you want to add the code to articles?
  2. Can give an example of code?
  3. Did you tick off "Display unsafe content" in General settings?

 

Best,

Lotus Themes

0


Dear support,

1. I want the code to be rendered in the articles, copy and paste the HTML code.

2.

<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css">.lst-kix_792nxcl5rurz-0>li:before{content:"\0025cf  "}ul.lst-kix_792nxcl5rurz-8{list-style-type:none}ul.lst-kix_792nxcl5rurz-6{list-style-type:none}ul.lst-kix_792nxcl5rurz-7{list-style-type:none}ul.lst-kix_792nxcl5rurz-4{list-style-type:none}ul.lst-kix_792nxcl5rurz-5{list-style-type:none}.lst-kix_792nxcl5rurz-3>li:before{content:"\0025cf  "}.lst-kix_792nxcl5rurz-4>li:before{content:"\0025cb  "}.lst-kix_792nxcl5rurz-5>li:before{content:"\0025a0  "}.lst-kix_792nxcl5rurz-7>li:before{content:"\0025cb  "}.lst-kix_792nxcl5rurz-6>li:before{content:"\0025cf  "}.lst-kix_792nxcl5rurz-8>li:before{content:"\0025a0  "}ul.lst-kix_792nxcl5rurz-2{list-style-type:none}ul.lst-kix_792nxcl5rurz-3{list-style-type:none}ul.lst-kix_792nxcl5rurz-0{list-style-type:none}.lst-kix_792nxcl5rurz-2>li:before{content:"\0025a0  "}ul.lst-kix_792nxcl5rurz-1{list-style-type:none}.lst-kix_792nxcl5rurz-1>li:before{content:"\0025cb  "}ol{margin:0;padding:0}table td,table th{padding:0}.c2{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c8{margin-left:108pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c11{margin-left:72pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c3{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Arial";font-style:normal}.c13{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Courier New";font-style:normal}.c0{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left;height:11pt}.c6{color:#434343;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Arial";font-style:normal}.c14{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c4{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c7{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;text-align:left}.c12{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;text-align:left}.c10{background-color:#ffffff;max-width:451.4pt;padding:72pt 72pt 72pt 72pt}.c5{padding:0;margin:0}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style></head><body class="c10"><h1 class="c12" id="h.wich2v3o1109"><span class="c13">Test Heading</span></h1><p class="c14"><span class="c0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </span></p><h2 class="c4" id="h.9oc8x37u0054"><span class="c3">Heading 2</span></h2><p class="c14"><span class="c0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </span></p><h3 class="c7" id="h.23p29b3l58eg"><span class="c6">Heading 3</span></h3><p class="c9"><span class="c1"></span></p><p class="c14"><span class="c1">Source code in courier new</span></p><p class="c14"><span class="c1">Source code in courier new</span></p><p class="c9"><span class="c0"></span></p><p class="c14"><span class="c0">List:</span></p><ul class="c5 lst-kix_792nxcl5rurz-0 start"><li class="c2"><span class="c0">Level 1</span></li></ul><ul class="c5 lst-kix_792nxcl5rurz-1 start"><li class="c11"><span class="c0">Level 2</span></li></ul><ul class="c5 lst-kix_792nxcl5rurz-2 start"><li class="c8"><span class="c0">Level 3</span></li></ul><ul class="c5 lst-kix_792nxcl5rurz-1"><li class="c11"><span class="c0">Level 2</span></li></ul></body></html>

3. Yes I did

Thanks for the help,

Juan

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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


@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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@Paul Toomey,

Please add below code in your CSS and let me know how it goes for you -

th, td {border: dotted 1px #ddd;}

Thanks

0


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@Paul Toomey,

Please go to your help center settings and enable Display unsafe content.

Thanks

0


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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 -

Thanks

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

I tweaked your code to make it look like this.

Thanks

0


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

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


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


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

@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


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


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


image avatar

Dan Ross

Community Moderator

Hi Niclas,

Did you include the stylesheet

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

for the W3 style classes in your document head template?

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


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


image avatar

Nicole Saunders

Zendesk Community Manager

Hey Niclas -

Thanks for sharing the solution! Glad you got things working. :)

0


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


image avatar

Nicole Saunders

Zendesk Community Manager

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


Post is closed for comments.

Didn't find what you're looking for?

New post