Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ollie123ollie123 

CSS

Simple things proving very hard to figure out with Sites & VisualForce.

 

I have a CSS file I want a Site page to use, how/where do I reference it?

 

The CSS is uploaded as a static resource (though oddly won't let me call it stylesheet.css as "." is a disallowed character)

 

Not working, problem seems to be getting the <link> tag inside the <head> tag.

 

Best Answer chosen by Admin (Salesforce Developers) 
BulentBulent

visualforce component reference has the following information (also available in visualforce guide)

 

 

stylesheet  component:

 

A link to a stylesheet that can be used to style components on the Visualforce page. When specified, this component injects the stylesheet reference into the head element of the generated HTML page.

attribute: id

type: String

description: An identifier that allows other components in the page to reference the stylesheet component.

 

attribute: value

type: Object 

description: The URL to the style sheet file. Note that this can be a reference to a static resource.

 

 

Example
<apex:stylesheet value="/resources/htdocs/css/basic.css"/>
HTML Output
<link rel="stylesheet"  type="text/css" href="/resources/htdocs/css/basic.css"/>
 
Zip Resource Example
<apex:stylesheet value="{!URLFOR($Resource.StyleZip, 'basic.css')}"/>
HTML Output
<link rel="stylesheet"  type="text/css" href="[generatedId]/basic.css"/> 
 

 
Message Edited by Bulent on  06-17-2009 03:42 PM


All Answers
BulentBulent
visualforce component reference has the following information (also available in visualforce guide)
 
 
stylesheet  component:
 
A link to a stylesheet that can be used to style components on the Visualforce page. When specified, this component injects the stylesheet reference into the head element of the generated HTML page.
	
	
attribute: id	
type: String	
description: An identifier that allows other components in the page to reference the stylesheet component.
 
attribute: value
type: Object 
description: The URL to the style sheet file. Note that this can be a reference to a static resource.
	
 
 
Example
<apex:stylesheet value="/resources/htdocs/css/basic.css"/>
HTML Output
<link rel="stylesheet"  type="text/css" href="/resources/htdocs/css/basic.css"/>
 
Zip Resource Example
<apex:stylesheet value="{!URLFOR($Resource.StyleZip, 'basic.css')}"/>
HTML Output
<link rel="stylesheet"  type="text/css" href="[generatedId]/basic.css"/> 
 

 
Message Edited by Bulent on  06-17-2009 03:42 PM
This was selected as the best answer
wesnoltewesnolte
Hey
 
The above solution will work but it can be quite time consuming. I use components as stylesheets and this is far quicker and easier to maintain. An example can be found here 
 
Basically what I do is create a component that is the 'stylesheet' e.g.
 
<component name="stylesheet">
 <style>
	.myClass{
		width: 100px;
		height: 100px; 
 
		background-image: url({!URLFOR($Resource.images,'image1.png')}); /* Use a static resource image */
 
	} 
 
</style> 
 
</component> 
 
And then your page would use this component
 
<apex:page>
	<c:stylesheet/> 
	<apex:outputPanel layout="block" styleClass="myClass"/> 
 
</apex:page> 
 
This way you don't have to worry about fiddling with access settings either.
 
Cheers,
Wes 
 


kevinwukevinwu
Hi Wes,
 
I'm getting an issue when I try to save my component with styles inside.
 
Basically when I use URLFOR, I'm getting an issue where Eclipse is telling me I am missing a parentheses. Eclipse also starts to format all the following styles in the style definition in a different color used to define another style.
 
background-image: url({!URLFOR($Resource.images,'image1.png')}); 
 
Are you able to save your components with these styles because this method of inserting styles sounds pretty useful to me.
 
Thanks,
 
Kevin 


wesnoltewesnolte
Hey
 
I do have the highlighting issue but not parenthesis issue. I have managed to reproduce your issue though if I remove the URLFOR i.e. 
 
background-image: url({!($Resource.images,'image1.png')});  or
 
background-image: url({!$Resource.images,'image1.png'}); 
 
gives me a parenthesis error. But if I include the URLFOR function it all works.
 
Sorry buddy,
Wes 


kevinwukevinwu
Wes,
 
I think I've got it working. Putting the CSS into a component is incredibly convenient. It makes updating CSS changes much easier during development. 
 
Thanks!!!
 
Kevin