81.1 F
Friday, September 29, 2023

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

crm erp


More like this

Goodbye Claris Pro, Hello Again FileMaker Pro

If you missed Claris’ announcement from late August on...

Using Claris Connect with AWS Simple Notification Service (SNS)

In our previous blog post, we described Claris Connect as an...

Integrating your CRM with other applications

Integrating your CRM with other applications can be achieved...

CRM Explained – Data Management 101

A CRM system helps companies stay connected to customers,...