Service | Customer Service, Contact Center, Fie...

CS: Knowledge article formatting (CSS, <style> or inline)

(0) Share

Report

Posted on by ez Jurgen

123

Hi I am figuring out how to use the knowledge articles internally to add to cases.

Now, It seems H1-H5, collapsable panels and so on already have some styling.

Where does it get this? is it a css somewhere?

I try to override this using a <style> tag in the beginning of the KA template but not everything is listening to that very well. especially the collapsable panels just get their inline format from some magic source...

I tried using this, and as you can see plein H1-H5 work but collapsable uses inline Tahoe

see screenshot, the yellow highlighted does not listen to any styling

I tried adding it as code here but then you do not see it so just in plain tekst

.logo-table { width: 100%; border-collapse: collapse }

.logo { width: 246px; height: 70px; float: left }

h1, .article-title { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 22pt; color: rgba(0, 76, 89, 1); letter-spacing: 0.25pt }

h2, .article-header { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 18pt; color: rgba(244, 135, 26, 1); letter-spacing: 0.25pt }

h3 { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 16pt; color: rgba(244, 135, 26, 1); letter-spacing: 0.25pt }

h4 { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 14pt; color: rgba(0, 76, 89, 1); letter-spacing: 0.25pt }

.tag-icon { width: 12px; height: 12px; float: left }

.collapsible_panel_title { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 18pt; color: rgba(244, 135, 26, 1); letter-spacing: 0.25pt }

table, .data-table { margin-left: 7px; border-collapse: collapse; border: none }

th, .table-header { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 10pt; letter-spacing: -0.25pt; color: rgba(0, 102, 119, 1); border: 1px solid rgba(206, 224, 228, 1); width: auto; padding: 0 7px 2px; background-color: rgba(206, 224, 228, 1); vertical-align: top }

.data-table td { font-family: "Segoe UI", "Helvetica Neue", sans-serif; font-size: 12pt; letter-spacing: 0.5pt; color: rgba(0, 102, 119, 1); border: 1px solid rgba(206, 224, 228, 1); width: auto; padding: 4px 7px; background-color: rgba(255, 255, 255, 1); vertical-align: top }

footer { margin-top: 50px; font-size: 10pt; color: rgba(128, 128, 128, 1); text-align: center }</style><div data-wrapper="true" style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif"><div class="wrapper"><table class="logo-table"><tbody><tr><td><img alt="" class="logo" src="/api/data/v9.0/msdyn_knowledgearticleimages(e4e9b861-21a8-ed11-aad1-000d3a227d72)/msdyn_blobfile/$value"></td><td><img alt="" class="logo" src="/api/data/v9.0/msdyn_knowledgearticleimages(e7e9b861-21a8-ed11-aad1-000d3a227d72)/msdyn_blobfile/$value"></td></tr></tbody></table>

<h1 class="article-title">Knowledge Base Article</h1>

<div class="collapsible_panel collapsible_panel_noborder" style="position: relative; height: auto; background: rgba(255, 255, 255, 1); outline: none !important; overflow: hidden; padding: 8px" tabindex="0"

All responses (6)

Answers (0)

Peter Waugh 125 on at

Like (0)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

Ok, if you do get news, please share,

Later ill check experience.dynamics.com/.../ to see if someone has posted an idea
KatTitus92 15 on at

Like (1)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

No, Peter. We opened a ticket with Microsoft as well and they have told us it is not possible to edit it at this time. We are testing out adding tags to our html code within the KA itself, but this doesn't solve our primary issue, is very time consuming, and means only select people will be able to add and edit KAs so they match our formatting requirements.
Peter Waugh 125 on at

Like (0)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

Hi OP/Kaitlin,

Did you get an answer for inline CSS on the KB Articles?

(Not the CSS for the Portal for the CS Hub)
KatTitus92 15 on at

Like (0)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

Hi Eiken,

We are having the same issue as the OP and the files you noted did not resolve the issue. For example, the bulleted lists and numbered lists have HTML entered when the list item is created within the KA. The CSS files you mentioned do not overwrite the HTML entered. Do you know the name of the web file that would allow us to edit the style of the lists and the special container?

This is how ours displays by default for each type of text:

This is what the HTML looks like:

<div data-wrapper="true" style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif">test  default text for html</div>

<div data-wrapper="true" style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif"> </div>

<ul><li data-wrapper="true" style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif">test bullet list for html</li></ul>

<ol><li style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif">test numbered list for html</li></ol>

<div data-wrapper="true" style="font-size: 12px; font-family: "Segoe UI", "Helvetica Neue", sans-serif"> </div>

<div data-wrapper="true" style="background: rgba(238, 238, 238, 1); border: 1px solid rgba(204, 204, 204, 1); padding: 5px 10px">test special container for html</div>
Suggested answer

Eiken on at

Like (0)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

Hi,

Has your problem been solved? Did my answer help you?
Suggested answer

Eiken on at

Like (0)

Report

RE: CS: Knowledge article formatting (CSS, <style> or inline)

Hi,

Thers are three CSS files in the Portal editor.

It will affect your html style.

You can edit the code in these CSS files directly and save it.