web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / KB Article CSS styling...
Microsoft Dynamics CRM (Archived)

KB Article CSS styling between backend and exposed portal front-end when published help

(0) ShareShare
ReportReport
Posted on by MikeC282 2,175

Hi all,

I'm trying to setup some overarching CSS styles for KB articles published onto Portal. I noticed a few strange things as we're also migrating the KB articles from another source complete with all their HTML and HTML tags.

Some of the migrated articles has CSS added inline within the HTML tags themselves (they were added in the CRM via the Customer Service HUB>Knowledge Articles) whilst others reference off a external style sheet. 

As they were going consolidate the styles I was looking to add in the external style sheet classes into the bootstrap css file in Dynamics and just have published articles inherit that style on the Portal front end. 

This seems to work except when inline CSS is added to the HTML of the KB articles via the Customer Service Hub after which the inline CSS takes precedence over the bootstrap portal styling.

My question is:

- Is there a way to override the inline CSS styling within the created KB articles.

- What's the best method of getting a uniformed CSS style across all KB articles published to the portal. Should I be editing the default CSS of the portal?

Kind regards,

Mike

*This post is locked for comments

I have the same question (0)
  • Suggested answer
    Dmytro Rutkovskyi Profile Picture
    Dmytro Rutkovskyi 1,835 on at

    Hi Mike,

    Inline styles is actual problem. They have highest precedence over any styles defined in CSS, so I recommend to remove them completely, replacing them with class names.

    To do so - you probably need to
    1) export KB articles from the Dynamics into Excel format
    2) if Styles injections are similar - you can use regexps to replace them with class names.
    3) if there are more complex patterns - and amount of the articles is large - probably you can write a program in any program language, which parse dom model of the article, and remove "injected" styles.

    Best practice to get uniformed styles across portal overall and KB articles is to create new css style-sheet file and attach it as child "web file" for portal Home page, or Knowledge-base page particularly.
    If you can find easier not to override styles, but to replace them or slightly fix them, you probably can edit theme.css. But I don't recommend to edit bootstrap.css. This is OOB bootstrap styles file and not intended to be changed. In worth case it could be updated during portal upgrade, in best place you just create hardly supported CSS mush at the portal.

  • MikeC282 Profile Picture
    MikeC282 2,175 on at

    Thanks Dmytro Rutkovskyi, I'll try the above approach and attach the CSS file to the Knowledge Article page and see if it works. Once it works I'll mark this question as resolved!

    EDIT: So I've included the CSS to the Knowledge article (see screenshot below) from the portal front end:

    KB-CSS.PNG


    Does it take some to work? I don't see any of my CSS styles updating the KB articles or do I see any references to the style sheet when I inspect the elements. Is there something I'm doing wrong?

    Below is the CSS code:

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700);.hiq-t{margin:0;padding:0}.hiq-t div,.hiq-t dl,.hiq-t dt,.hiq-t dd,.hiq-t ul,.hiq-t ol,.hiq-t li,.hiq-t h1,.hiq-t h2,.hiq-t h3,.hiq-t h4,.hiq-t h5,.hiq-t h6,.hiq-t pre,.hiq-t form,.hiq-t fieldset,.hiq-t input,.hiq-t p,.hiq-t blockquote,.hiq-t th,.hiq-t td{margin:0;padding:0;}.hiq-t ,.hiq-t {border:0}.hiq-t img{border:0}.hiq-t address,.hiq-t caption,.hiq-t cite,.hiq-t code,.hiq-t dfn,.hiq-t em,.hiq-t th,.hiq-t var{font-style:normal;font-weight:normal;}.hiq-t b,.hiq-t strong{font-weight:bold;font-style:inherit}.hiq-t ol,.hiq-t ul{list-style:none;}.hiq-t caption,.hiq-t th{text-align:left;}.hiq-t h1,.hiq-t h2,.hiq-t h3,.hiq-t h4,.hiq-t h5,.hiq-t h6{font-size:100%;}.hiq-t q:before,.hiq-t q:after{content:'';}.hiq-t em{font-weight: inherit;font-style: italic;}.hiq-t{background-color:#FFF;color:#262626;font-family:'Open Sans',sans-serif;font-size: 14px;padding:15px;margin: 0px;margin-right: 0px;margin-bottom: 20px;font-weight: normal;}.hiq-t HR{border: 0;color: #E4E4E4;background-color: #E4E4E4;height: 1px;width: 100%;text-align: left;overflow:hidden;margin: 0;margin-top:15px;margin-bottom: 5px; }.hiq-t img{border: 0px;}.hiq-t em{font-style: italic;}.hiq-t .computer_code{background-color:#f9f9f9;font-family:"Consolas", "Courier New", Courier, mono, serif;font-size:12px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;line-height: 1.7em;color:#666;padding:5px;border:1px solid #999 }.hiq-t .tip{color: #c09853;background-color: #fcf8e3;padding: 8px 35px 8px 25px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border: 1px solid #fbeed5;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}.hiq-t .info{color: #3a87ad;background-color: #d9edf7;padding: 8px 35px 8px 25px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border: 1px solid #bce8f1;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}.hiq-t .warning{background: #F5E5DA url(/images/warning.png) 5px 50% no-repeat;padding: 8px 35px 8px 25px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);border: 1px solid #FFB7A9;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;color: #CC3300;}.hiq-t .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px; }.hiq-t tt,.hiq-t kbd{font-family:"Consolas", "Courier New", Courier, mono, serif;font-size:12px;}.hiq-t a{color: #00BD9D;cursor: pointer;}.hiq-t a:link{color: #00BD9D;text-decoration:none}.hiq-t a:hover{color: #555;text-decoration: none}.hiq-t p{line-height: 1.6em }.hiq-t p{margin:0;padding:0 }.hiq-t H1{font-family:'Open Sans', sans-serif;color: #00bd9d;font-size: 2.75em;font-weight: 400;line-height: 60px;margin-bottom: 25px;}.hiq-t H2{font-family:'Open Sans', sans-serif;font-size: 2.2em;font-weight: 300;line-height: 40px;margin-bottom: 15px;}.hiq-t H3{font-family:'Open Sans', sans-serif;font-size: 1.6em;font-weight: 300;line-height: 30px;margin-bottom: 15px;}.hiq-t H4{font-family:'Open Sans', sans-serif;font-size: 1.5em;font-weight: 400;margin-bottom: 15px;}.hiq-t H5{font-family:'Open Sans', sans-serif;font-size: 1.125em;font-weight: 400;margin-bottom: 15px;}.hiq-t ul{list-style-type:disc;margin: 5px 0 0 9px;padding: 0 0 0 12px;}.hiq-t li{margin-bottom: 7px;line-height:160%;}.hiq-t ol{list-style-type:decimal;margin:0 0 10px 30px;line-height:180%;}.hiq-t ol li{margin-bottom: 6px;}.hiq-t table{border-collapse:collapse;border-spacing:0;width: 75%;font-family:'Open Sans', sans-serif;}.hiq-t table tr td{border-right:1px solid #CCC;border-left:1px dotted #CCC;border-top:1px solid #CCC;border-bottom:1px solid #CCC;padding: 8px;vertical-align:top;}.hiq-t table th{background-color: #00bd9d;color: white;margin-bottom: 0;border:1px solid #ccc;padding: 8px;text-align:left;}.hiq-t table td{font-family: inherit;}.hiq-t table tr:nth-child(odd){background-color:#ffffff;}.hiq-t table tr:nth-child(even){background-color:#f9f9f9;}.hiq-t table tr:hover{background-color: #ddd;}.hiq-t .left{text-align:inherit}.hiq-t .center{text-align:center }.hiq-t .right{text-align:right }.hiq-t .full{text-align:justify }.hiq-t img.left,.hiq-t table.left{float:left;text-align:inherit}.hiq-t img.center,.hiq-t table.center{margin-left:auto;margin-right:auto;text-align:inherit}.hiq-t img.center{display:block}.hiq-t img.right,.hiq-t table.right{float:right;text-align:inherit}.hiq-t .intro{width:800px;padding-bottom:25px}.hiq-t .container{overflow: hidden;width: 850px;}.hiq-t .container .columns{border:#cccccc 1px solid;float: left;margin: 0 15px 0 0;text-align: left;width: 600px;overflow:hidden;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;box-shadow: 0 1px 2px 1px #e9eded;}.hiq-t .container .contact{background: #ffffff;border: 1px solid #D8DEE3;float: left;margin: 0;padding: 10px;text-align: left;width: 200px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;box-shadow: 0 1px 2px 1px #e9eded;}.hiq-t .container .contact h2{color: #333333;font-family:'Open Sans', sans-serif;font-size: 14px;font-weight: bold;margin: 0 0 7px;}.hiq-t .columns .header{background-color: #f2f2f2;color: #666;font-size: 14px;font-weight: 300;padding: 8px 17px 8px 10px;text-align: left;clear:both}.hiq-t .columns .col-inner{color: #333333;padding: 12px 5px 5px;}.hiq-t .columns .left-col{width:50%;float:left}.hiq-t .columns .right-col{width:50%;float:right}@media only screen and (min-device-width : 320px) and (max-device-width : 1024px){.hiq-t .intro,.hiq-t .container{width:100%}.hiq-t .container .columns{float:none;margin:0 5px 5px 0;background:none;width:100%}.hiq-t .container div.contact{float:none;margin-top: 20px;width:100%;}}@media only screen and (min-device-width : 320px) and (max-device-width : 480px){.hiq-t .columns .left-col,.hiq-t .columns .right-col{float:none;width:auto}} .hiq-t #searchContainer{font-size:12px;margin-bottom:20px;margin-left:0;margin-top:0;padding:10px 5px 10px 20px;max-width:800px;background: #F2F2F2;clear: left;min-width: 600px;white-space: nowrap;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}.hiq-t h2.morehelp{font-size:14px;font-weight:bold;margin:0px 0 7px;font-family:'Open Sans', sans-serif;color:#333}.hiq-t h2.search{font-size:28px;font-weight:300;margin:0px 0 9px;overflow:hidden;font-family:'Open Sans', sans-serif;color:#333}.hiq-t .searchInput{margin:0px;padding-left:10px;padding-right:15px;padding-top:8px;padding-bottom:7px;border-left:#ccc 1px solid;border-top:#ccc 1px solid;border-right:#ccc 1px solid;border-bottom:#ccc 1px solid;width:520px;background:url("/images/kbsearch_bg.gif") #fff repeat-x center top;color:#333;font-size:15px;vertical-align:text-top}.hiq-t .searchInput:focus{box-shadow: 0 0 5px rgba(82,168,236,.5);-webkit-box-shadow: 0 0 5px rgba(82,168,236,.5);-moz-box-shadow: 0 0 5px rgba(82,168,236,.5);border: 1px solid rgba(82,168,236,.75);}.hiq-t .searchButton{-moz-border-radius:5px 5px 5px 5px;background:url("/images/button-bg.gif") repeat-x scroll left bottom #FEFFFE;border-color:#DDD #CCC #CCC #DDD;border-style:solid;border-width:1px;color:#555;cursor:pointer;font-family:Arial, "Lucida Grande";margin:0;font-size:20px;margin:0 0 0 5px;padding:5px 10px 5px;vertical-align:text-top}.hiq-t .searchButton:active,.hiq-t .searchButton.active{background-position:left top}.hiq-t .searchButton:hover,.hiq-t .searchButton.hover{border-color:#069;color:#069}.hiq-t table td#header_left,.hiq-t table td#header_right{border-bottom:1px solid #ccc;border-right:0px;border-left:0px;border-top:0px;padding:2px;}.hiq-t table td#footer_left,.hiq-t table td#footer_right{border-top:1px solid #ccc;border-right:0px;border-left:0px;border-bottom:0px;padding:2px;}.hiq-t iframe:focus{outline: none;}.hiq-t iframe[seamless]{display: block;}


Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans