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.
Great post… Hilarious too!
Thanks.. hope it helped:)
Great post… Hilarious too!
never really thought about Components that way before. Thanks for the tip!
How about putting the entire CSS in the component?
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.
How about putting the entire CSS in the component?
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.
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.
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?
Yeah I usually proof-of-concept my JS in a page before I move it into a static resource.
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?
Yeah I usually proof-of-concept my JS in a page before I move it into a static resource.
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?
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.
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.
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.
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.
Here is a much better solution: http://bit.ly/QQ6pec
That does look good!
Here is a much better solution: http://bit.ly/QQ6pec
That does look good!
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?
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?