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
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