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 Sep 24 '15 at 16:43
  • no, the css files are not present – debal das Sep 24 '15 at 16:48
  • did you search for the files or look for it ? – Rao Sep 24 '15 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 Sep 24 '15 at 16:51
  • 2
    Just change http to https. – Adrian Larson Sep 24 '15 at 16:53

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 Sep 24 '15 at 17:40
  • That does not seem to be reflected by your question. You are using both a Static Resource and URLFOR? – Adrian Larson Sep 24 '15 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 Sep 24 '15 at 17:53
  • Please update your question. – Adrian Larson Sep 24 '15 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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.