Add Custom CSS in your Website

Gelli Samson asked on February 26, 2018 04:34

I have added a custom css in my website and i notice that it overrides the cms' default css. To be specific my custom css overrides the padding of the workflow menu buttons. What is the best way to add your custom css in your website without affecting the default css of kentico?

Thanks, Gelli

Recent Answers

Prashant Verma answered on February 26, 2018 07:06

Hi Gelli,

Best practice says use unique selector or a combination of selector i.e id and class to avoid overwrite the existing CSS.

Example: Applying custom css to specific page and there HTML component inside the body.

<body id="wizard" class="workflow-page" >
<div>
<p>This my text</p>
<span></span>
</div>
</div>

/**** your custom CSS *****/

#wizard.workflow-page {
  p {
    font-size: 20px;
  }
  a {
    color: green;
  }
}

Kentico having one more capability to adding CSS stylesheets to individual page components for more reference checkout this document.

4 votesVote for this answer Mark as a Correct answer

Matt Nield answered on February 26, 2018 12:38

This may sound like a simple question, but how did you add the custom CSS? I don't recall having an issue overriding parts of the CMS desk as you suggest. If you use the CSS applicaiton to create your CSS, then this will only be added to the live site, not the admin pages. Anything a bit more bespoke, and you can use the CSS stylesheet web part in your master templates to add in custom CSS files.

There is a bit more info about that web part on the web part reference page (but not much).

In addition, (as Prashant says) you can also add CSS rules fo individual components as needed.

2 votesVote for this answer Mark as a Correct answer