81.1 F
Tampa
Friday, September 29, 2023
spot_img
spot_img

Style LWR sites with custom CSS variables

Date:

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.

Resources
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

Popular

More like this
Related

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,...