From 981dc640dca686e01494ed30db9d534930ce2fbb Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Wed, 1 Dec 2021 17:06:20 +0200 Subject: [PATCH] docs: Document how to override themes --- styling-and-themes/override-theme-styles.md | 38 +++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 styling-and-themes/override-theme-styles.md diff --git a/styling-and-themes/override-theme-styles.md b/styling-and-themes/override-theme-styles.md new file mode 100644 index 0000000000..5231cde902 --- /dev/null +++ b/styling-and-themes/override-theme-styles.md @@ -0,0 +1,38 @@ +--- +title: Override Theme Styles +page_title: Override Theme Styles +description: General rules of thumb to override UI for Blazor themes +slug: themes-override +tags: telerik,blazor,theme,override +published: True +position: 6 +--- + +# Override Theme Styles + +Sometimes you may need to make a small change to the appearance of a component, while still using the same [built-in]({%slug general-information/themes%}) or [custom]({%slug themes-custom%}) theme. + +This article provides high-level guidance about the required knowledge and tools to override existing CSS styles without changing them. + +## CSS Knowledge + +To override an existing style, you implement another *conflicting* style. To make sure the new style takes precedence, it should have a **higher specificity**. + +* [MDN Documentation for CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). You may prefer a [less formal explanation](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/). +* How to easily [calculate CSS Specificity](https://stuffandnonsense.co.uk/archives/images/css-specificity-wars.png) (part of the article [CSS Specificity Wars](https://stuffandnonsense.co.uk/archives/css_specificity_wars.html)). + +## Tools + +To see what CSS styles are applied on an HTML element, use the browser's developer tools. + +* [Inspect the HTML output of a page](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#inspect-the-generated-html-of-a-control) +* [See the applied styles for a specific element](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools#see-the-applied-styles) +* [Inspect elements that hide automatically and disappear from the DOM](https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools-(part-2)#inspect-auto-hiding-tooltips-and-elements) + +## Blazor CSS Isolation + +[CSS isolation](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation) is a .NET feature, which scopes styles to a specific Razor component. + +* There are two cases when CSS isolation may not work with UI for Blazor components. We explain the reasons and suggest workarounds in [this knowledge base article]({%slug common-kb-css-isolation%}). The two cases are: + * Using isolated styles with a component `Class`. + * Using isolated styles for popups (Window, Dialog).