I would like to change the colour of the Global Search Box in the Community Cloud. I've tried some CSS, but they do not work.

.actualNode{ color:white; } .slds-input{ color:white; } .inputWrapper{ color:white; } .contentWrapper{ color:white; }

enter image description here


In the builder, in Theme you need to Edit CSS (Use Overrides)

Edit CSS

and then paste this CSS:

.slds-global-header__item--search { background-color: blue; }

.slds-global-header__item--search .slds-input { color:white; }

  • Thank you very much :)
    – Ben Inm
    Sep 9 '21 at 15:32

Ideally, you would want to Build a Custom Search Component and apply your styling within the component's scope.


Because template selectors are subject to change with future releases. If you override the CSS through the editor, there is no guarantee that it will work in future releases.

Same goes for most, if not all css modifications in the editor for community changes.

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.