I have a standard lightning dashboard component that has been added to a communities page. I'm trying to hide the red icon on a standard dashboard component on a community page shown below:

enter image description here

I've tried adding the following CSS to the community's stylesheet to hide the icon on the dashboard component. (I've confirmed that the CSS selector is correct using Chrome DevTools):

.slds-icon-standard-dashboard {display:none !important}

enter image description here

However, this does not result in any visible changes on the community page or in the component.

My questions are:

  1. Generally speaking, is it possible to modify the style of a standard lightning component on a community page using this approach?
  2. If so, how could I modify my CSS to achieve the desired effect of hiding the dashboard icon?

You shouldn't, if you require customizations of this nature, you should create a custom component, since updates to the community or components could break your CSS.

If you are really motivated, you can use the browsers dev tools to chose the appropriate selector to override the styling.

fyi: just because it works in the devtools - doesn't mean it will actually work, check the dom tree and adjust your selector, usually to the highest level container.

  • As the question mentions, the CSS selector matches the target but the styling is not applied. – salesforce-hacker Apr 17 '19 at 1:40
  • 1
    if its in the shadow root - you can forget about trying – glls Apr 17 '19 at 2:06
  • It was in an iframe, not shadow DOM but same principle. – salesforce-hacker Apr 17 '19 at 2:50

This is not possible because the dashboard component is located in an iframe.

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.