Wednesday, August 23, 2017

CSS Styles/Scripts Are Not Working in Salesforce Force.com Sites

If your styles/scripts are working perfectly in Sandbox and Production preview but if it's not working on Force.com sites which has hosted publicly on Sales force server below points might be the issue.

Your page is referring to some external CSS/JS files:

<apex:page>
 <head>
 <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> 
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>

If your referring any styles/scripts from external sources with out storing them in Static Resource you will end up with problem Please store that files in Statistic resource and then use it then it will work in Force.com sites as well.


<apex:page>
 <head>
  <apex:includeScript value="{!$Resource.dataTableJS}"/>
  <apex:stylesheet value="{!$Resource.dataTableCSS}" />
</head>
<apex:form>
  ----
  ----
</apex:form>
</apex:page>


Your Static Resource is File not accessible publicly



If your using any static resource in your page and if that static resource is not accessible publicly (Cache Control set to Private) then styles will not reflect in Force.com sites.So mark your Static resources cache control as Public



Hope this helps you...Enjoy!


No comments: