0

I have a page in communities that I deployed but the appearance differed such that the outlines for the checkbox and textboxes were not visible. After comparing the styling in devtools, I identified that the difference was in a file called app.css that I did not create myself.

After modifying the file in devtools, the pages output match. I therefore want to update the app.css in production to solve the issue. How can I do that given that I did not create the app.css file myself?

The different outputs are shown the images below production enter image description here

For the app.css sample code.. Production enter image description here

In sandbox.. sandbox

I am wondering whether this stylesheet comes out of the box from Salesforce.

2
0

You have probably different release on Sandbox and on Production. You can check when release for your instance is on Salesforce Status Salesforce changed a lot in styling in last release therefore you can observe differences and yes file you've mentioned is connected to standard Salesforce styling (SLDS which can be checked here)

Furthermore you can override styles of Salesforce provided components (which is not recommended because there is a chance it won't fit in nicely in next releases). Documentation around that is here

Obviously you can also change look and feel via Experience (Community) Builder which should not break anything in the future.

Going further: in Summer 21 Salesforce finally released Styling Hooks which can be used with your custom LWC components. It means that your custom components can be (minimally though) styled via Builder now which is mentioned here

1
  • The override turned out to be the solution. Thanks! – Pauline Jun 8 at 13:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.