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

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

(0) Share

Report

Posted on by ez Jurgen

127

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"

I have the same question (0)

All responses (6)

Answers (0)

Suggested answer

Eiken on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Suggested answer

Eiken on at

Like (0)

Report

Hi,

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

Was this reply helpful? Yes No
KatTitus92 15 on at

Like (0)

Report

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>

Was this reply helpful? Yes No
Peter Waugh 145 on at

Like (0)

Report

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)

Was this reply helpful? Yes No
KatTitus92 15 on at

Like (1)

Report

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.

Was this reply helpful? Yes No
Peter Waugh 145 on at

Like (0)

Report

Ok, if you do get news, please share,

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

Was this reply helpful? Yes No