function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
lescclarklescclark 

Help with basic css

Hi

 

am pretty new to visualforce and am trying to get some css to work -  without any success!

 

Even when i use the example from http://wiki.developerforce.com/index.php/An_Introduction_to_Visualforce I can't get it to work.

 

This is what I do:

 

paste the following into notepad & save as styles.css

.mystyle {
background: url(img/mybackground.png);
font-size:18pt;
font-weight:bold;
width:220px;
height:59px;
}


 I upload as a static resourse called "styles".

 

create a new vfpage using

 

<apex:page showHeader="true" standardStyleSheets="false">
<apex:styleSheet value="{!URLFOR($Resource.styles,'styles.css')}"/>
<apex:outputPanel styleClass="mystyle" layout="block">
My Styled Panel
</apex:outputPanel>
</apex:page>

 and it renders as plain unformatted text.

 

any suggestions ? I guess there is some css syntax that I'm missing ??

Best Answer chosen by Admin (Salesforce Developers) 
ShikibuShikibu

Use a browser to open the source of the html that visualforce generates for you, and you can see the URL to the static resource. You should also be able to click on it, and view the css. Sadly, Salesforce will give you a blank page, not a 404 (not found) error, if the url is incorrect.

 

The syntax you are using ( URLFOR($Resource.styles,'styles.css')) applies when your static resource is in a zip file. Did you zip your files before loading? If you put your files into a directory and zipped the directory,  then you must name the directory in the argument, like this: URLFOR($Resource.styles,'styles/styles.css') (assuming that the top level directory is named "styles").

 

 

All Answers

ShikibuShikibu

Use a browser to open the source of the html that visualforce generates for you, and you can see the URL to the static resource. You should also be able to click on it, and view the css. Sadly, Salesforce will give you a blank page, not a 404 (not found) error, if the url is incorrect.

 

The syntax you are using ( URLFOR($Resource.styles,'styles.css')) applies when your static resource is in a zip file. Did you zip your files before loading? If you put your files into a directory and zipped the directory,  then you must name the directory in the argument, like this: URLFOR($Resource.styles,'styles/styles.css') (assuming that the top level directory is named "styles").

 

 

This was selected as the best answer
prageethprageeth

Hi lescclark,

If you directly uploaded your CSS file in to Static Resourses(It means without compressed) you have to access your style sheet as below.

 

If the name of the css file is styles.css use following syntax;

 

 

<apex:styleSheet value="{!$Resource.styles}"/> 

 

 

lescclarklescclark
Thanks, I knew it was something simple !