Category Archives: Lightning Design Systems

Disabling standard style sheets – Salesforce

Everywhere we have lightning and Salesforce is in process to provide all classic features in lightning. In this process there would be some features which would not be available in lightning. So sometimes we need to use the best of both worlds classic and lightning. Here is similar problem and its solution.

Problem : Custom click to dial functionality can be used in visualforce pages with the below code

<apex:page standardController="Account" showHeader="true">
    <support:clickToDial         number="415-555-1234"         entityId="001XB000000HFUM"         params="myparam1,myparam2"     />
</apex:page>

Ref: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_support_clickToDial.htm

As of now this only works with the visualforce page where showHeader is enabled. Now if we enable showHeader then visualforce includes standard style sheets but then such standard style sheets  could get mixed up with LDS in visualforce page and creates css conflict issues.

Solution : Lets consider what we want here-

  1. ShowHeader = true, on page level showheader has to be enabled other wise click to dial functionality from visualforce page would not work.
  2. Don’t want any impact on lightning design system css

Here solution is to dynamically remove the standard style sheets which gets loaded because of showheader set to true. The problem with that approach is that whenever any section of page is reRendered then standard style sheets are loaded back which again distorts the LDS css. There is one way to solve this is instead of removing standard stylesheets disabling it by below code:

<script>
 function disableStandardStylesheets(){ 
       $('link[rel=stylesheet]').each(function(){
          if(this.href.indexOf('/sprites/')!=-1 &amp;&amp; this.href.indexOf('/CTI.css') == -1){ 
               $(this).attr("disabled", "disabled");
          }
       });
 }
 disableStandardStylesheets(); 
</script>

Advantage of disabling standard style sheets instead of removing is that after every reRender it will not get loaded back. This solution will other places in Salesforce where you want to disable effect of any standard stylesheets gets loaded by Salesforce.

LDSmixedWithStandardStylesheets

Visualforce page with LDS and Standard Style Sheets

LDSwithDisabledStandardStylesheets

Visualforce page with LDS and disabled Standard Style Sheets