Advance Styling - WIT

Edit CSS

The WIT separates content from style, similarly to the way websites use HTML for the page, and CSS for styling. With your donation pages, the HTML component lives in Salesforce Lightning code, while the CSS component lives on a Salesforce Experience Cloud site. If you want to change layout, content and text, you manage it through Lightning. If you want to change the look, colours, spacing, and more, you control it through Salesforce Experience Cloud. Though content and style are separated, you can manage them from one place -- your org.

Edit Donation Pages CSS

Step Number	Task
1	Navigate To All Sites (Refer to NAV At Top Of This Page)
2	Find Your Site And Click Builder
3	Click Themes
4	Answer Yes To Manual Overrides If Prompted
5	On Themes drop-down, Select Edit CSS
6	Make Your Edits In The Open Style Sheet
7	Save

Salesforce Experience Cloud Site

Navigate To CSS

Edit CSS

Screens and indicators

In every Lightning screen flow, we add an Indicator so that we can easily modify the CSS.

Indicator

CSS Page Names

Multi-Screen Page

Screens

Screen 1 (Campaign details)

Screen 2 (Contact Details/Organisation)

Screen 3 (Amount/Dollar Handle/Tribute)

Screen 4 (Payment Method)

Screen 5 (Thank you page)

CSS Name/Screen Indicator

MultipageDonationForm-P1

MultipageDonationForm-P3

MultipageDonationForm-P4

MultipageDonationForm-Thankyou

Single-Screen Donation Page

Screen

Screen 1

Screen 2

CSS Name/Screen Indicator

SinglepageDonationForm

SinglepageDonationForm-Thankyou

Update Contact Details Page

Screen

Screen 1

Screen 2

CSS Name/Screen Indicator

UpdateContactDetails

UpdateContactDetails-Thankyou

Example of Usage

Example: Pt. 1- Edit The @Media Rule CSS

In the following example, we want to edit the CSS so that not all of a donation page's fields display on a mobile device. We will use a combination of a modified media query and hiding elements.

▪ In the CSS, locate @media screen and (max-wIdth: 800px)

▪ Modify CSS to ensure this section displays for mobile devices. See below screenshot for finished, edited CSS.

Note: The @media rule is used in media queries to apply different styles for different media types/devices.

Example: Pt. 2 - Hide the Salutation And Address Fields

Fields, image and text were added through Flow, and each was added inside a div tag.

Note: Check by inspecting the element or pressing F12.

To hide the salutation and address fields, we must apply the following CSS:

▪ The:nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

▪ The visibility property specifies whether or not an element is visible

Additional style Changes

Change The Colour Of The Button

Change The Background Colour of the Footer

Click the footer section and click the Edit Markup button in HTML Editor.

Change The Image size Of The Banner

Change the Font Size and The Colour of the Text