Guide reformats HTML code

Respondida

25 Comentários

  • 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
  • Juan Eusse

    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
  • Trapta Singh
    Community 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
  • 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
    Community 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
  • 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
    Community 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
  • 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
    Community 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
  • 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
    Community Moderator

    @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
    Community 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
  • Trapta Singh
    Community Moderator

    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
    Community 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
  • 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
    Community 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
  • 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
    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
  • 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
    Zendesk Community Manager

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

Publicação fechada para comentários.

Powered by Zendesk