The Silver Lining

Lessons & Learnings from a salesforce certified technical architect.

Visualforce & Dynamic CSS

with 15 comments

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:

  1. Create a stylesheet and some styles. Hopefully you’ve done a good job because you have no way of quick-previewing the result.
  2. 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.
  3. Upload the zip file as a static resource.
  4. Create references to the stylesheet in appropriate pages.
  5. 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:

  1. Create a component that only contains styling information between <style> tags.
  2. Include component in pages.
  3. Update stylesheet component in one tab, navigate to tab containing page and hit F5.
  4. 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.

About these ads

15 Responses

Subscribe to comments with RSS.

  1. Great post… Hilarious too!

    Chris

    March 16, 2010 at 8:07 pm

  2. never really thought about Components that way before. Thanks for the tip!

    Anup

    July 28, 2010 at 12:53 pm

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

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

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

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

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

  8. Here is a much better solution: http://bit.ly/QQ6pec

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 2,099 other followers

%d bloggers like this: