+ Start a Discussion
A. SalespersonA. Salesperson 

CSS and Visualforce

I've poured over a lot of the posts (there are pages of them) with CSS/VIsualforce problems on the forums, and either the issues don't apply to mine, of I've already tried the solution.

I'm trying to use a set of css and js files in a visualforce page to mimic the style and format of my website.  There are multiple references to both css and js files.  Those files are in a zip file in static resources.  My references are working because the images are displaying, but they styles aren't.

I believe I've set the page attributes correctly:

<apex:page showheader="false" sidebar="false" standardstylesheets="false">

And I believe I've correctly referenced the css file:

<apex:stylesheet value="{!URLFOR($Resource.customHelpAssets2, '/css/style.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.customHelpAssets2, 'css/camera.css')}" id='camera-css' />

and the js files.

<apex:includeScript value="{!URLFOR($Resource.customHelpAssets2, 'scripts/jquery.min.js')}"  />

I've tried putting a slash in front of the folder in the reference: '/css/camera.css'  With or without doesn't seem to make a difference.  The zip file - customHelpAssets2 is public.

Anything else I could be missing?  Is there a limit to the number of stylesheets or external files I can include?

Thanks in advance!


Best Answer chosen by A. Salesperson
Try to add like this:

<link href = "{!URLFOR($Resource.samplesheet)}" rel = "stylesheet" type = "text/css"/>


All Answers

A. SalespersonA. Salesperson
Sorry about the goofy A. Salesperson name.  I use the org for training.
Your code looks correct, not sure why it is not working. Maybe you can also try the following:
<apex:stylesheet value="{!$Resource.customHelpAssets2}/css/style.css"/>

Another solution is to put the entire css in a Custom Component, then just refer the "<c:theComponentName>" in your Visualforce Page in order to use it.
Try to add like this:

<link href = "{!URLFOR($Resource.samplesheet)}" rel = "stylesheet" type = "text/css"/>

This was selected as the best answer
A. SalespersonA. Salesperson
Thanks Yuchen and dev.

Yuchen, your structure gave me the same results I was getting.  I don't understand why that it, and if goes against all of the documentation.

Dev, yours worked.  Which makes me just wnat to use straight html tags and not apex for anything that's not specifically apex.

So weird. Thank you both for your help though.  I really appreciate it.