function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MellycooksMellycooks 

SLDS Theme Styling not working in Napili Community

When I apply slds_theme styling in a component, the component styling seems to be overridden when used on a Communities page.  I am using the straight-up sample code from the SLDS.  Other SLDS styling is working just fine.  attached is the code and a screenshot of the component in communities (incorrect) and the same component on a Lighting Experience page (correctly styled)

The class is slds-theme--shade

Am I missing something about styling with SLDS in Communities?

code snipit
User-added image

User-added image
Rajiv Penagonda 12Rajiv Penagonda 12
There is a known bug in lightning component where the styles applied on the first div is ignored by the system. Update your code to be as follows: 
<div>
<div class="slds-box slds-theme--shade">
YOUR CONTENT HERE
</div>
</div>

Hope this helps
 
MellycooksMellycooks
I did try that, but unfortunately wrapping it in another div still does not add shading.  Plus the box styling is being applied, it's only the slds-theme--shade that is being ignored

User-added image

User-added image
Adarsh.SharmaAdarsh.Sharma
Hi Mellycooks,
I think you have not added lightning design system css. Please add lightning design system in your lightning component.

Hope this will help you!
Thanks
MellycooksMellycooks
Brian, components inherit SLDS from their App or container.  In this case they are in a Napili Community in a custom theme which automatically gets slds.  Other SLDS styling classes work just fine, but it seems there are some that aren't working, including the slds-theme--shade.  

I've been playing around and other themes work fine, such as slds-theme_warning,  it seems that slds-theme_shade is not working specifically.  I've just added custom styling in the meantime, but if anyone has insights on this I'd appreciate it!

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_builder_theme_layout.htm
Adarsh.SharmaAdarsh.Sharma
Hi Mellycooks,
let me know is your problem solved or not.
thanks
Vincent Bastos 7Vincent Bastos 7
I am facing the same problem. It seems to me that this is an error in the SLDS style sheet. Is the SLDS style sheet for the community part of the Lightning Community infrastructure or is it part of the theme applied to the community?