Visualforce & Dynamic CSS
When I started working on the Force.com platform CSS was an area that made me sad a bit. Deep down. Overriding the Salesforce CSS is a nightmare and I would recommend you don’t begin the dark and daunting journey down that path. Rather start afresh, you’ll thank me later.
That said, dealing with CSS on the platform can still be a timeconsuming task. Especially if you are incorporting images into your pages using CSS. My initial process was something similar to this:
- Create a stylesheet and some styles. Hopefully you’ve done a good job because you have no way of quick-previewing the result.
- Include said stylesheet and all referenced images in a zip file. Take care to preserve the directory structure so that you can reference all stylesheet and image files correctly.
- Upload the zip file as a static resource.
- Create references to the stylesheet in appropriate pages.
- View page. Realise you need to move one of your outputPanels 3px right. Be sad. Deep down. Goto 1.
It was an unhappy time in my life, but I’m past that now, because one day the solution dawned on me. Components!
A simple solution that gives the added flexibility of using object values within CSS. A breakdown of my current process would be:
- Create a component that only contains styling information between <style> tags.
- Include component in pages.
- Update stylesheet component in one tab, navigate to tab containing page and hit F5.
- High-5 colleague immediately to left and right.
Not only is this process faster, but you can configure stylesheet values on the fly e.g.
p{
font-size: {!configuration__c.fontSize__c}px;
}
And I think that’s pretty cool.
The Silver Lining 
Great post… Hilarious too!
Chris
March 16, 2010 at 8:07 pm
Thanks.. hope it helped:)
Wes
March 17, 2010 at 12:17 pm
never really thought about Components that way before. Thanks for the tip!
Anup
July 28, 2010 at 12:53 pm
How about putting the entire CSS in the component?
Francis
August 3, 2010 at 3:02 pm
Yip that works too. I’ve needed to update this article for some time. A neater approach to the above is to use a VF page and set the contentType=”text/css”. The page is then treated as true CSS. You can then use the cache attribute of the page component to cache your CSS for speedy loading.
Wes
August 3, 2010 at 3:15 pm
I had always hoped that Salesforce would extend the quite capable GUI CSS editor buried deep in the Self-Service Portal to other portals. The one they did bring into the other portals only allowed color control but not configuration for the various advanced attribute.
Luke "AlwaysThinkin" C
August 17, 2010 at 7:21 pm
Awesome! I’ve been sad for so long about this. One of our guys is doing the same thing to upload static javascript files. Would this be relevant to him as well you think?
Josh
August 25, 2010 at 3:47 pm
Yeah I usually proof-of-concept my JS in a page before I move it into a static resource.
Wes
August 25, 2010 at 7:07 pm
Wes, great post, but what about CSS what references images? Would you recommend uploading said images to a zip archive and referencing them via URLFOR from your “componentized css” that way?
Joe Ferraro
October 22, 2010 at 7:40 pm
Exactly. I need to update this post a touch but that’s the gist. As soon as I’m back from vacation I’ll update this as there are a number of situation specific solutions.
Wes
October 23, 2010 at 5:14 pm
One way to make the css->zip->upload process a bit less painful, is to do the following (using Windows/Eclipse):-
* Make .resource files a ‘WinZip’ type file.
* Maintain a local directory structure of the css/image static resources, with a local zip file called .resource.
* Edit your css file locally using your favourite method with a test html file to preview if required.
* Save edited css file and drag&drop css file or directory containing css file (as appropriate) into your open (local) .resource WinZip window.
* Drag&drop local .resource file to staticresources directory in Eclipse window.
Patrick
February 26, 2011 at 2:29 pm
I agree patrick,,
I plan on writing a ant script..
This ant script actually can do the following:
1. ZIp my resources
2. upload the resource folder to the required sandbox/prod usinf apex dataloader
3. also i am planning to add the functionality of retrieving the existing zip file in the resources and putting it into my eclipse workspace.
Pranay Ranga
December 15, 2011 at 10:57 pm
Here is a much better solution: http://bit.ly/QQ6pec
Etienne Giraudy (@egiraudy)
July 31, 2012 at 2:20 am
That does look good!
Wes
July 31, 2012 at 9:43 am
I want to create a template page which will be used a force.com site page. This page will be managed package componenet and needs to display header, footer, css etc. These header,footers should be customizable, so that each customer can configue this page as per their web site. Will the way specified by you work for this case?
Devendra S
August 17, 2012 at 1:25 pm