Unable to display stylesheet and images in visualforce page on Force.com site

StackOverflow https://stackoverflow.com/questions/21799982

문제

Hello Salesforcians,

I have a problem that I can not display styles in visualforce page. I have created the css files in the static resources. Also, I have created visualforce page that references these styles. You can access the current force.com site at http://impacttest.force.com/Test . Resources are not displayed and images also!

Here's the code that I used to view this page

<apex:page controller="ContractRenewalFormController">
<!-- Begin Default Content REMOVE THIS -->

<head>

    <title>
                Contract Renewal | ImPACT-Testing &amp; Computerized Neurocognitive Assessment Tools
    </title>

    <meta charset="UTF-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="language" content="en"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <!-- style sheets -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' rel='stylesheet' type='text/css'/>
    <apex:stylesheet value="{$Resource.reset}"/>
    <apex:stylesheet value="{$Resource.default}"/>
    <apex:stylesheet value="{$Resource.medium}"/>
    <apex:stylesheet value="{$Resource.small}"/>
    <apex:stylesheet value="{$Resource.defaultoverride}"/>
    <apex:stylesheet value="{$Resource.print}"/>

    <!--<link href="../css/reset.css?v=0" rel="stylesheet" media="screen, projection, print" />
    <link href="../css/default.css?v=2" rel="stylesheet" media="screen, projection" />
    <link href="../css/medium.css?v=0" rel="stylesheet" media="screen and (max-width : 960px)" />
    <link href="../css/small.css?v=0" rel="stylesheet" media="screen and (max-width: 640px)" />
    <link href="../css/default-override.css?v=0" rel="stylesheet" media="screen, projection" />
    <link href="../css/print.css?v=0" rel="stylesheet" media="print" />-->

    <!-- scripts -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script type="text/javascript">$.noConflict()</script>
    <!-- analytics -->
    <script>
  function clearText(mesg,id){
    var r=document.regform;
    if (r.elements[id].value == mesg) r.elements[id].value = '';
    r.elements[id].style.color="#000";
}
function checkText(mesg,id){
    var r=document.regform;
    curText = r.elements[id].value; 
    curText = curText.replace(" ",""); 
    if(curText == "") r.elements[id].value = mesg;
    r.elements[id].style.color="#000";
}

function checkdets(){
    var r=document.regform;
    if(r.name.value=="" || r.name.value=="Account Name"){
        alert("Please enter account name");
        r.name.value==""
        r.name.focus();
        return false;
    }
    if(r.ReferenceID.value=="" || r.ReferenceID.value=="Reference Number"){
        alert("Please enter reference number");
        r.ReferenceID.value==""
        r.ReferenceID.focus();
        return false;
    }
}

    </script>

    <!--[if lte IE 8]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- analytics -->
</head>

<body class="pay">
<div class="skipnav"><a href="">Jump to main content</a></div>

<div class="pagewrap">

    <div class="mastheadWrap">

        <div class="masthead">

            <h1><a href="https://www.impacttest.com">ImPACT Test</a></h1>

            <h1><a href="https://www.impacttest.com" class="mobileonly"><img src="../imgs/impact-test-mobile.png" alt="ImPACT Test" /></a></h1>

            <nav class="topNav">

                <a href="https://www.impacttest.com/find_care_provider/" class="provider2_nav">Find a Care Provider</a>
                <a href="https://www.impacttestonline.com/customercenter/" class="client_nav">Customer Center</a>

            </nav><!-- /topNav -->

            <nav class="mainNav">

                <a href="https://www.impacttest.com" class="home_nav">Home</a>
                <a href="https://www.impacttest.com/about/" class="about_nav">About</a>
                <a href="https://www.impacttest.com/products/" class="products_nav">Products</a>
                <a href="https://www.impacttest.com/research/" class="research_nav">Research</a>
                <a href="https://www.impacttest.com/training/" class="training_nav">Training</a>
                <a href="https://www.impacttest.com/support/" class="support_nav">Support</a>
                <a href="https://www.impacttest.com/purchase/" class="purchase_nav">Purchase</a>
                <a href="https://www.impacttest.com/news/" class="news_nav">News</a>
                <a href="" class="search_nav" id="searchBtn">Search</a>

            </nav><!-- /mainNav -->


            <div class="mobileNavTrigger mobileonly">
                <a href="#"><img src="../imgs/btn-mobilenav.png"/></a>
            </div><!-- /mobileNavTrigger -->

        </div><!--/masthead-->

    </div><!-- /mastheadWrap -->
    <div class="contentwrap group" id="content">

                            <h1>Contract Renewal</h1>

            <div class="maincontent ">

    <div class="errors" style="color:red;"></div>
<div  id="purchase-form">
 <apex:form >
      <apex:pageMessages />
    <h5>Account Information</h5>



    <hr /> 
    <table cellpadding="8" cellspacing="0" border="0" id="regformTable">                                    
    <tr> 
      <td>Account Name&nbsp;</td> 
      <td nowrap="nowrap"><div style="padding-left:10px;"></div>
        <input name="name" id="name" type="text" class="metal" size="20" style="color:#666;"
                        value="Account Name"
                        onfocus="clearText('Account Name','name')"
                        onblur="checkText('Account Name','name')"
                    /> 
          &nbsp;&nbsp;&nbsp;</td> 
    </tr>
    <!--<tr><td nowrap="nowrap">&nbsp;</td><td></td></tr>-->
     <tr> 
      <td>Reference Number&nbsp;</td> 
      <td nowrap="nowrap"><div style="padding-left:10px;"></div>
        <input name="ReferenceID" id="ReferenceID" type="text" class="metal" size="20" style="color:#666;"
                        value="Reference Number"
                        onfocus="clearText('Reference Number','ReferenceID')"
                        onblur="checkText('Reference Number','ReferenceID')"
                    /> 
          &nbsp;&nbsp;&nbsp;</td> 
    </tr>
    <tr><td nowrap="nowrap">&nbsp;</td><td></td></tr>
    <!--<tr><td nowrap="nowrap">&nbsp;</td><td></td></tr>-->
    <tr>
   <!--<td><input name="submitConfirm" type="submit" value="Confirm" id="submitConfirm" class="button-styled" /></td> -->
       <!-- <td><input name="submitCancel" type="submit" value="Cancel" id="submitCancel" class="button-styled" /></td> -->
        <td><apex:commandButton action="{!confirm}" value="Confirm" id="confirmButton" styleClass="button-styled"/></td>
        <td><apex:commandButton action="{!cancel}" value="Cancel" id="cancelButton" styleClass="button-styled"/></td>


      </tr>     
  </table>
  </apex:form>
  </div>
  </div>
</div>

<div class="footerWrap">

        <div class="footer">            

            <div class="section group">

                <nav class="inTouch">

                    <a href="https://www.facebook.com/pages/ImPACT-Test-Concussion-Management-Program-for-Athletes/172173736183751" class="social facebook"><img src="../imgs/ico-facebook.png" alt="Like us on Facebook" /></a><a href="https://www.youtube.com/user/ImPACTTest" class="social youtube"><img src="../imgs/ico-youtube.png" alt="Subscribe on YouTube" /></a>

                    <a href="https://www.impacttest.com/contact/" class="mail">
                        <img src="../imgs/ico-mail.png" alt="" />
                        Contact Us
                    </a>

                    <a href="" class="phone">
                        <img src="../imgs/ico-message.png" alt="" />
                        1.877.646.7991
                    </a>

                    <a href="#" class="newsletter" onclick="popUp=window.open('https://confirmsubscription.com/h/t/9279885E317A82C6', 'popupwindow', 'scrollbars=yes,width=600,height=400');popUp.focus();return false">
                        <img src="../imgs/ico-pencil.png" alt="" />
                        Sign up for our newsletter
                    </a>

                </nav><!-- /inTouch -->

                <nav class="terms">

                    <a href="https://www.impacttest.com/legal/?Privacy-Policy-1">Privacy Policy</a>
                    <a href="https://www.impacttest.com/legal/?Terms-and-Conditions-2">Terms and Conditions</a>
                    <span class="copyright">ImPACT Applications, Inc. &copy; 2014</span>

                </nav><!-- /terms -->

            </div><!-- /section -->

        </div><!--/footer-->

    </div><!-- /footerWrap -->


</div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>
도움이 되었습니까?

해결책

Using Inspector i see that you are referencing one http url for a png and thats failing .Also there is a javascript issue .One more thing is to see following

1)Does your static resource files made Public ? 2)Also if you are using your own Head tag and body prefer using attribute applyhtml=false on apex:page tag

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top