73.9 F
Tampa
Wednesday, March 29, 2023
spot_img
HomeSalesForce
Salesforce Developers
Salesforce Developers

Latest Posts

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.

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

Salesforce Developers
Salesforce Developers

RELATED ARTICLES

Latest Posts

spot_imgspot_img

Don't Miss

[tdn_block_newsletter_subscribe title_text="Stay in touch" description="VG8gYmUgdXBkYXRlZCB3aXRoIGFsbCB0aGUgbGF0ZXN0IG5ld3MsIG9mZmVycyBhbmQgc3BlY2lhbCBhbm5vdW5jZW1lbnRzLg==" input_placeholder="Email address" tds_newsletter2-image="5" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="row" tds_newsletter4-image="6" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="7" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="JTNDIS0tJTIwQmVnaW4lMjBNYWlsQ2hpbXAlMjBTaWdudXAlMjBGb3JtJTIwLS0lM0UlMEElMEElM0Nmb3JtJTIwYWN0aW9uJTNEJTIyaHR0cHMlM0ElMkYlMkZ0YWdkaXYudXMxNi5saXN0LW1hbmFnZS5jb20lMkZzdWJzY3JpYmUlMkZwb3N0JTNGdSUzRDZlYmQzMWU5NGNjYzVhZGRkYmZhZGFhNTUlMjZhbXAlM0JpZCUzRGVkODQwMzZmNGMlMjIlMjBtZXRob2QlM0QlMjJwb3N0JTIyJTIwaWQlM0QlMjJtYy1lbWJlZGRlZC1zdWJzY3JpYmUtZm9ybSUyMiUyMG5hbWUlM0QlMjJtYy1lbWJlZGRlZC1zdWJzY3JpYmUtZm9ybSUyMiUyMGNsYXNzJTNEJTIydmFsaWRhdGUlMjIlMjB0YXJnZXQlM0QlMjJfYmxhbmslMjIlMjBub3ZhbGlkYXRlJTNFJTNDJTJGZm9ybSUzRSUwQSUwQSUzQyEtLUVuZCUyMG1jX2VtYmVkX3NpZ251cC0tJTNF" descr_space="eyJhbGwiOiIxNSIsImxhbmRzY2FwZSI6IjE1In0=" tds_newsletter="tds_newsletter3" tds_newsletter3-all_border_width="0" btn_text="Sign up" tds_newsletter3-btn_bg_color="#ea1717" tds_newsletter3-btn_bg_color_hover="#000000" tds_newsletter3-btn_border_size="0" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJiYWNrZ3JvdW5kLWNvbG9yIjoiI2E3ZTBlNSIsImRpc3BsYXkiOiIifSwicG9ydHJhaXQiOnsiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4fQ==" tds_newsletter3-input_border_size="0" tds_newsletter3-f_title_font_family="445" tds_newsletter3-f_title_font_transform="uppercase" tds_newsletter3-f_descr_font_family="394" tds_newsletter3-f_descr_font_size="eyJhbGwiOiIxMiIsInBvcnRyYWl0IjoiMTEifQ==" tds_newsletter3-f_descr_font_line_height="eyJhbGwiOiIxLjYiLCJwb3J0cmFpdCI6IjEuNCJ9" tds_newsletter3-title_color="#000000" tds_newsletter3-description_color="#000000" tds_newsletter3-f_title_font_weight="600" tds_newsletter3-f_title_font_size="eyJhbGwiOiIyMCIsImxhbmRzY2FwZSI6IjE4IiwicG9ydHJhaXQiOiIxNiJ9" tds_newsletter3-f_input_font_family="394" tds_newsletter3-f_btn_font_family="" tds_newsletter3-f_btn_font_transform="uppercase" tds_newsletter3-f_title_font_line_height="1" title_space="eyJsYW5kc2NhcGUiOiIxMCJ9"]

About us

Check out the Salesforce - FileMaker - Claris Community. It's a free online user-to-user support forum to help people to overcome technical issues, ask questions and get tips from our over 46,200+ professionals.

©1997 - 2022 FMT - MACLANE NOVA - ROSS MACLANE. All Rights Reserved. Salesforce, Sales Cloud, Service Cloud, Marketing Cloud, Force.com, Chatter, and Salesforce logos are trademarks of Salesforce Inc. Claris Pro, Claris Studio, and Filemaker Pro are trademarks of Apple Inc.