3

I downloaded a free html responsive template from the web and trying to convert it to a visualforce page. The page I am trying to reproduce is blank, so there is no content except css, js and nav bar.

I copy-pasted the content body to my new visualforce page and converted the css and js files to static resources which are used using the includeScript tag.

The issue is that the browser shows css errors for the bootstrap and style.css files for my visualforce page but it runs the html template smoothly. It shows that the errors are in the script files I am using.

If that was the case, wont the html template not render as well?

I am attaching the screenshots of my vf page and the template for comparison.

VF page:

enter image description here

Html template:

enter image description here

4
  • Have you set useStandardStylesheet as false? Commented Sep 26, 2015 at 14:59
  • No. I have not included that attribute in the page tag. Commented Sep 26, 2015 at 15:22
  • Try that.. It might be a standard Salesforce stykesheets messing with your responsive template Commented Sep 26, 2015 at 15:26
  • I did useStandardStylesheet="false", but it made no difference. The page is still blank as shown above, just the font is a little bigger now. Commented Sep 26, 2015 at 15:28

2 Answers 2

1

I've seen this error when the stylesheet is inadvertently included with a script or apex:includeScript tag (incorrect):

<script src="css/style.css"></script>
<apex:includeScript value="css/style.css" />

...rather than a link or apex:stylesheet tag (correct):

<link href="css/style.css" rel="stylesheet">
<apex:stylesheet value="css/style.css" />

See the official docs on apex:includeScript and apex:stylesheet for more details.

4
  • 1
    I am using <apex:includeScript value="{!URLFOR($Resource.css, 'css/style.css')}"/> instead of the script and link tags Commented Sep 26, 2015 at 16:28
  • Yep, apex:includeScript is for including Javascript scripts. Use apex:stylesheet to include your stylesheet. See the official docs for more info.
    – Rob
    Commented Sep 26, 2015 at 16:29
  • I've updated my post.
    – Rob
    Commented Sep 26, 2015 at 16:33
  • 1
    This is super embarrassing. Thanks for the help. I forgot there was a stylesheet tag for css Commented Sep 26, 2015 at 17:32
0

You can import the bootstrap zip in your Salesforce Organization as static resource and include the js and css files as below. Here are couple of links link1 link2, which describes the process in detail.

<apex:page standardController="Account"showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
    <!-- Bootstrap -->
        <!-- Bootstrap -->
         <link href="{!URLFOR($Resource.bootStrap, 'bootstrap/css/bootstrap.min.css')}" rel="stylesheet" media="screen"/>
         <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'js/bootstrap.min.js')}"/>

   <html>
      <head></head>
      <body>
        <!-- Your code -->
      </body>
   </html>
</apex:page>

You must log in to answer this question.

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