Home SalesForce Style LWR sites with custom CSS variables

Style LWR sites with custom CSS variables


The fourth episode of this series looks into how you can bring your custom branding to LWR sites, your custom Lightning web components, as well as base Lightning components.

Sample app: AZ insurance (https://github.com/trailheadapps/az-insurance)
Documentation: Style your LWR site (https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/advanced_custom_style.htm)
Documentation: Lightning Design System Styling Hooks (https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/)
Documentation: WCAG AA Contrast Ratio (https://www.w3.org/TR/WCAG/#contrast-minimum)
Tool: Contrast Ratio Validator (https://webaim.org/resources/contrastchecker/)

0:00 Introduction
0:22 Custom styling overview
1:18 Custom CSS properties explained
3:28 How to customize an LWR site theme visually
4:28 Use static resources for global CSS properties
5:24 Programmatic use of CSS properties
6:50 CSS fallback properties and contrast ratio

Connect with Salesforce Developers:
Website: https://www.developer.salesforce.com/
Facebook: https://www.facebook.com/salesforcedevs/
Twitter: https://www.twitter.com/salesforcedevs
LinkedIn: https://www.linkedin.com/showcase/salesforce-developers

Exit mobile version