Changing CSS for All knowledge articles on CSM portal

[Luke James]

Hello All, 

I have a requirement where I need to ensure that all knowledge articles in the csm portal have the same CSS. Does anybody know how to do this? 

I've currently updated the knowledge article content widget with the css that I need. And this does work, when the knowledge article is created and published. But when it is then checked out again and the article is updated, the CSS does not adhere to the css in the widget. 

Does anyone know how to solve this? Or had any similar requirements? 

Kind Regards, 

Luke

[jagadeeshsnow]

Hi @Luke James ,

Can you share any css code or screenshot , what you are trying to achieve.

[Luke James]

Thanks for your reply @jagadeeshsnow. Basically I have been given a set of requirements to make every knowledge article have the same css for headings on a knowledge article and tables within a knowledge article. 

I have added this code to the knowledge article content widget within the csm portal. 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/* CSS Rules */
h1 {
font-family: 'Poppins', Tahoma;
color: #002E73; /* Brand (SIMS) */
font-weight: 400;
}

h3 {
font-family: 'Poppins', Tahoma;
font-style: normal; /* Ensure the font style is set to normal */
font-weight: 400; /* Regular weight */
font-size: 24px;
color: #0057ff; /* Brand (SIMS) */
}

h4 {
font-family: 'Poppins', Tahoma;
font-style: normal;
font-weight: 400;
font-size: 20px;
margin-top: 30px;
color: #002E73;
}

h5 {
font-family: 'Poppins', Tahoma, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #002E73;
}

h6 {
font-family: 'Poppins', Tahoma, sans-serif; /* Primary, fallback, and default font */
font-style: normal;
font-weight: 400;
font-size: 16px; /* Size for h6 headers */
color: #0057ff;

This is for the headings for the css. Now when I create a a knowledge article, the heading looks like it should be with this CSS. But when I go and checkout the knowledge article again and update some of the text another font, it stops adhering to the CSS. Basically I always want the Headings in a knowledge article to adhere to the CSS within the widget. 

Any ideas on how to do this?

Thanks, 

Luke

[jagadeeshsnow]

Now create a knowlede article with h1, h3 , h4 , h5, h6 headings and go to the portal open the knowlede article inspect the html code and take screenshots of those headings.

After that make changes to the knowledge article like you need and open knowledge article inspect the html code and take screenshots of those headings.

Please share screenshots of both articles newly created articles and after changing based on that I can suggest what changes you need to do