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
Satya JaragSatya Jarag 

How to override standard CSS with custom CSS

Hi,
Anyone can help me to remove  white border of below VF Page.

User-added image

I have tried to modify slds-card class with no border but it is not applying to this page.

User-added image

User-added image

any suggestions would be helpful.
Sunil MadanaSunil Madana
Hi,
I had the same requirement to apply my own style for lightning component & VF page.
So i did the below;
Step-1: Copied the whole CSS class values that you see in the browser's console tab [Google Chrome].
Step-2: If it is the lightning component i did the below: 
// for example i am applying border red for the card component
.THIS .slds-card { border: none !important; }
the text marked in bold will override the CSS applied by app.css(Salesforce's css)
So you can keep adding your own styles with '!important' and it will override the CSS that is applied by Salesforce.
Step-2.1: If is VF page, just do that same without '.THIS' to the class, like below: 
<style>
.slds-card { border: none !important; }
.customBg { ....... }
</style>
After trying the above approach and if it worked, please mark this answer correct. Thanks.