5

I can't get any CSS to work at all. Am I missing something extremely obvious?

EDITED to include URLfor

<apex:page standardStylesheets="false" showHeader="false" >
    <apex:stylesheet value="{!URLFOR($Resource.cssSampleGREEN)}"/>

    <h1>test content for color output</h1>
</apex:page>

If I have a static resource called cssSampleGREEN which is the COMPLEX CSS code

<style type="text/css">
h1
{
    color:#00cdcd;
}

I should at least have green output to my h1 text but that does not happen, I just get the below. What is my error?

enter image description here

11
  • The code looks ok to me. Try removing both sidebar and standardStyleSheets from apex page definition. Keep showheader as false. Apr 20 '15 at 19:17
  • If its a zip file then use URLFOR function to reference your static resource. Apr 20 '15 at 19:18
  • I have made false both sidebar, header, and standardstylesheets
    – jaw999
    Apr 20 '15 at 19:20
  • I m saying to keep only showheader as false and remove the other two attributes Apr 20 '15 at 19:21
  • Keep your page definition as you have it. It's fine and if you remove useStandardStylesheets="false" your css may get overridden. Apr 20 '15 at 19:26
7

It's fine - just take the <style> tags out of stylesheet.

Static resource like this :-)

h1
{
    color: #00cdcd;
}
1

Updated with list of what you need to do:

  • Use URLFOR()
  • Remove your CSS style tag in your CSS file
  • Name the Resource file the same as your css filename to simplify, ie, Resource is called mystyles and CSS file is called mystyles.css
  • URLFOR() syntax should be like this: <apex:stylesheet value="{!URLFOR($Resource.mystyles, 'mystyles.css')}"/>
  • Set cache control to "Public"
  • Ensure you are setting standardStylesheets="false"

Your CSS file should look like this (note no close tag - thanks bigassforce, missed that):

h1{
    color:#00cdcd;
}

You (were) not actually using URLFOR() in your stylesheet code. Add that, using the syntax described here. You'll see that in many cases, you need a target and an id param (it would appear that you need these all the time, but this does not seem to be true).

I noticed that didn't close your style tag in the css file. You should close this because it could break things in the page.

If this doesn't work, inspect your page (right click and most browsers will give you the option to "inspect" the element you click on) and you should see the broken link as a load resource error on the page.

Perhaps you have the css in a folder that you zipped up to upload as a static resource. If it's in a folder, you'd refer to it like this:

<apex:stylesheet value="{!URLFOR($Resource.your_zipped_folder, 'your_zipped_folder/your_css.css')}"/>

Finally, make sure cache control on the static resource is set to public.

5
  • 2
    It's not zipped. So this should work? <apex:stylesheet value="{!URLFOR($Resource.cssSampleGREEN)}"/> - this URLFOR element is not referenced in this page salesforce.com/docs/developer/pages/Content/…
    – jaw999
    Apr 20 '15 at 19:18
  • Did you make sure cache control was set to public when you saved the resource? Apr 20 '15 at 19:19
  • Yes, use URLFOR. Apr 20 '15 at 19:21
  • it is set to public now
    – jaw999
    Apr 20 '15 at 19:21
  • Hah - I just noticed, you don't actually have URLFOR there! Put it in and you should be golden - leave everything else the same. :) Apr 20 '15 at 19:22

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.