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
Jonathan.PolsterJonathan.Polster 

How do I add CSS to Salesforce?

I really want to emphasize a button on a Page Layout by using the brand feature. As in the examples in the Link below. I am used to web development where I use Chrome's inspect feature top identify a class and/or id and use CSS to stylize it. It is apparent, however, that Salesforce works very differently, and I have no idea how. I am merely trying to add CSS to ONE button on my page layout (in the highlights panel). Could anybody direct me to the best way to do this? I am starting at square one, so any advice would be appreciated. Is this something I need to create a full lightning component for? Or could I tackle this using a static resource. Please advise!

https://developer.salesforce.com/docs/component-library/bundle/lightning:button/documentation
Alain CabonAlain Cabon
Hi,

Adding and Removing Styles
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm


User-added image
  
<div class="slds-box">
        <lightning:button aura:id="changeIt" name="MyButton" label="My Button" /><br/>
        <lightning:button onclick="{!c.applyCSS}" label="Add Style" />
        <lightning:button onclick="{!c.removeCSS}" label="Remove Style" />
  </div>
  
({
    applyCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.addClass(cmpTarget, 'changeMe');
    },
    
    removeCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.removeClass(cmpTarget, 'changeMe');
    }
})

.THIS .changeMe {
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    text-shadow: 3px 2px 1px #9daef5;
    -webkit-box-shadow: 6px 5px 24px #666666;
    -moz-box-shadow: 6px 5px 24px #666666;
    box-shadow: 6px 5px 24px #666666;
    font-family: Arial;
    color: #fafafa;
    background-color:blue;
    font-size: 27px;
    padding: 19px;
    text-decoration: none;
}