How to add a custom CSS file to VisualForce?

Question

I have a simple VisualForce code:

<apex:page controller="Query_and_upload"  standardStylesheets="True" showHeader="false" sidebar="false">
<apex:stylesheet value="{URLFOR($Resourse.customCSS, 'customCSS.css')}"/>
<body>
<h1>
<apex:sectionHeader title="Please Enter user information and upload LogFile"/>
</h1>
<apex:pagemessages />
<apex:form enctype="multipart/form-data">
   <apex:pageBlock >
      <apex:facet name="footer">
      <apex:outputPanel >
         <apex:commandButton action="{!save}" value="Check and Upload" styleClass="btn"/>
      </apex:outputPanel>
      </apex:facet>
   <apex:pageBlockSection title="User Information">
      <apex:panelGrid columns="2">
         <apex:outputLabel value="First Name" for="inqueryFirstName"/>
         <apex:inputField id="inqueryFirstName" value="{!inquery.First_Name__c}" required="true"/>
         <apex:outputLabel value="Last Name" for="inqueryLastName"/>
         <apex:inputField id="inqueryLastName" value="{!inquery.Last_Name__c}"  required="true"/>
         <apex:outputLabel value="Email" for="inqueryEmail"/>
         <apex:inputField id="inqueryEmail" value="{!inquery.Email__c}"  required="true"/>
      </apex:panelGrid>
   </apex:pageBlockSection>
   <apex:pageBlockSection title="Upload File"  >
      <apex:panelGrid columns="2">
         <apex:outputLabel for="file"/>
         <apex:inputFile value="{!contentFile}" filename="{!nameFile}" id="file"/>
      </apex:panelGrid>
   </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</body>
</apex:page>

And i have a CSS file called customCSS.css that has the following code:

<style type="text/css">

  body{
  padding-left: 11em;
   padding-right: 11em;
   padding-top: 5em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: black;
   font-size: 12pt;
font-weight: 300;
text-align:justify;
   margin: 0em auto;
  width: 1200px;
  background-image: url("images/DSCN5018.gif")
}
  h1, h2, h3
{
  margin: 0;
  padding: 0;
  color: white;
}
p
{
margin-top: 1px;
line-height: 180%;
color: white
}

</style>

I have the css file in a folder called customCSS and inside the folder i have another folder called images. And it has the an image called DSCN5018.gif I zipped the folder called customCSS.zip, and i uploaded the zip file as follows

I know this question is redundant, And i am doing exactly what websites are advising, But my page doesnt seem to change,

Does anyone know why?

You are missing ! before the URLFOR if adding ! does not fix the issue, try uploading just the CSS to the static resource and try : {!URLFOR($Resourse.customCSS)} — Rao
– Rao, Commented Sep 11, 2013 at 21:00
try to upload the css as static resource than picking it from a folder. — Rao
– Rao, Commented Sep 11, 2013 at 21:16
By the way rao, i got it to work without zipping the CSS file, so i uploaded the image separately and the CSS file separately, thanks — user2333346
– user2333346, Commented Sep 12, 2013 at 16:31
I always blame it on salesforce,but somewhere deep within I know its human error and not salesforce :P. Happy that it works for you when you try the CSS as a static resource and not trying to access from a folder in the SR. — Rao
– Rao, Commented Sep 12, 2013 at 16:41

Chris Duncombe · Accepted Answer · 2013-09-11 21:41:50Z

4

You have a typo in the code. You have misspelled Resource. As well as the typo pointed out by Rao, you are missing a '!'

Change

<apex:stylesheet value="{URLFOR($Resourse.customCSS, 'customCSS.css')}"/>

To

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

EDIT:

Another Typo. No ';'

Change

background-image: url("images/DSCN5018.gif")

To

background-image: url("images/DSCN5018.gif");

EDIT:

You mention that images is a sub folder of customCSS, and you have no / to indicate that

Change

background-image: url("images/DSCN5018.gif");

To

background-image: url("/images/DSCN5018.gif");

edited Sep 11, 2013 at 21:41

answered Sep 11, 2013 at 21:03

Chris Duncombe

24.4k13 gold badges78 silver badges117 bronze badges

Sorry for the typo, but it still doesn't work!!

user2333346
– user2333346

2013-09-11 21:15:20 +00:00
Commented Sep 11, 2013 at 21:15
Found another typo, updated the answer

Chris Duncombe
– Chris Duncombe

2013-09-11 21:23:49 +00:00
Commented Sep 11, 2013 at 21:23
Think I found another issue regarding the naming of the Resource. I updated the code, try that

Chris Duncombe
– Chris Duncombe

2013-09-11 21:34:15 +00:00
Commented Sep 11, 2013 at 21:34
Dunc44, the MyStyles was a typo from me, i actually called it customCSS, i updated my question, sorry about that

user2333346
– user2333346

2013-09-11 21:36:24 +00:00
Commented Sep 11, 2013 at 21:36
Is that what you meant?

user2333346
– user2333346

2013-09-11 21:37:06 +00:00
Commented Sep 11, 2013 at 21:37

| Show 9 more comments

snugsfbay · Accepted Answer · 2013-12-04 01:55:58Z

0

It sounds like you have a zip file with a folder in it and in that folder is the CSS file you want to access. Why not simplify and put the CSS file directly into the Zip file, with no added folder? Otherwise, when you specify the name of the CSS file, you will need to precede it with the name of the containing folder (after specifying the zip file resource).

Hope this helps!

answered Dec 4, 2013 at 1:55

snugsfbay

9867 silver badges20 bronze badges

yes that's what i did, thnx

user2333346
– user2333346

2013-12-04 16:35:59 +00:00
Commented Dec 4, 2013 at 16:35

Add a comment |

Stack Exchange Network

How to add a custom CSS file to VisualForce?

2 Answers 2

You must log in to answer this question.

Hot Network Questions

How to add a custom CSS file to VisualForce?

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions