I have an apex class with the following content

public class RemoteGoogleController {

    transient public string googleHome { get; set; }
    transient public string googleHome1{ get; set; }
    transient public string test{get; set;}

    String url ='http://xx.xx.xx.xx/wrapper/header';
    String url1 ='http://xx.xx.xx.xx/wrapper/footer';

    public void loadGoogleHome() {

        Http endpoint = new Http();

        HttpRequest req = new HttpRequest();



        HttpResponse res = endpoint.send(req);

        googleHome = res.getBody();

        System.debug('Resp1 **********' + googleHome);
        HttpRequest req1 = new HttpRequest();



        HttpResponse res1 = endpoint.send(req);

        googleHome1 = res1.getBody();

        test= googleHome + googleHome1;


The visualforce page has:

<apex:page controller="RemoteGoogleController" action="{!loadGoogleHome}" contentType="text/html" showHeader="false" standardStylesheets="false">

        <apex:stylesheet value="http://xx.xx.xx.xx/modules/system/system.messages.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/system/system.theme.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/date/date_api/date.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/field/theme/field.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/search/search.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/views/css/views.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/lingotek/style/base.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/modules/ctools/css/ctools.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/modules/locale/locale.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/themes/hgst/style.css?"/>
        <apex:stylesheet value="http://xx.xx.xx.xx/sites/all/themes/hgst/js/fancyapps-fancyBox/source/jquery.fancybox.css?"/>

        <apex:outputText  style="" rendered="true" value="{!test}"/>


Right now, the CSS is not being applied to the HTML page when I do a preview, could you please help.

EDIT: I had tried using static resources by making a zip file and referencing the css files. I had removed the URLs before trying this.

  <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'system.messages.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'system.theme.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'date.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'datepicker.1.7.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'field.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'search.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'views.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'base.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'ctools.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'locale.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'style.css')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.CSSFILES,'jquery.fancybox.css')}"/>
  • Are you sure the css is not loading, load your page in chrome right click ==>inspect element ==> click on sources tab and see if you can find your css. Check if there are console errors pointing to missing CSS files. If you see your files everything is working as expected, it might be that you have not added the right html elements on the page.
    – Rao
    Commented Sep 24, 2015 at 16:43
  • no, the css files are not present
    – debal das
    Commented Sep 24, 2015 at 16:48
  • did you search for the files or look for it ?
    – Rao
    Commented Sep 24, 2015 at 16:51
  • Mixed Content: The page at 'c.ap2.visual.force.com/apex/Test_DD' was loaded over HTTPS, but requested an insecure stylesheet 'xx.xx.xx.xx/modules/system/system.messages.css'. This request has been blocked; the content must be served over HTTPS.
    – debal das
    Commented Sep 24, 2015 at 16:51
  • 2
    Just change http to https.
    – Adrian Larson
    Commented Sep 24, 2015 at 16:53

2 Answers 2


I recommend you upload your files to a Static Resource and reference them using URLFOR($Resource.MyResourceName).

It may be easier to zip them up into one resource and reference them like URLFOR($Resource.MyZipFile, "/path/to/file/MyResourceName").

  • I have tried that, the resources are being loaded, but the errors are still there. This is what is confusing me more
    – debal das
    Commented Sep 24, 2015 at 17:40
  • That does not seem to be reflected by your question. You are using both a Static Resource and URLFOR?
    – Adrian Larson
    Commented Sep 24, 2015 at 17:53
  • Sorry, to clarify, I have removed the URL and tried the static resource to test. But the issues is the same
    – debal das
    Commented Sep 24, 2015 at 17:53
  • Please update your question.
    – Adrian Larson
    Commented Sep 24, 2015 at 18:00

Thankyou Rao and Adrian for helping me look at the different areas. I was finally able to figure out the issue. Salesforce security settings wasnt allowing the files to be accessed, I had to make an exception for the ip-address under Remote Site Details

Once I made this exception, the CSS content loaded without any issues.

Appreciate your help.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .