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

changing the flow UI with visualforce?

The '12 summer release notes state that you can alter the look and feel of flows with visualforce page/css etc.

Is there any documentation on how to accomplish this?


You should probably post this in the Visualforce Development board, rather than the Visual Workflow board. They're much more likely to have the answer to this over there.


I will try to get a blog on this soon, but at a high level, what we have done is to expose individual CSS classes for each of the flow UI elements so that you can style with ease in VF.  The standard help for visual workflow should provide the class information.


Rajaram, any update on this?  I have a really ugly-looking page I'd like to make pretty :-)


Sorry for the delay. The VF Guide documents the classes you can use:


Cindy NormanCindy Norman
Does anyone have any examples? Or are there posts somewhere else that show usage of this VF Guide. It is very sparse.
Sascha OlahSascha Olah
The Official documentation on this topic is very sparse, u are right.

I have expirienced that changing the ui of a flow will not work without some browser digging apps like firebug.

For example using the FlowContainer Class will not give u automatically access to the basic properties of your flow style, like background-color, because these properties are rewritten within the flow page itself by other classes.

My goal was to simply change the background-color of the flow and this was my result (css declaration within an vf page which holds the flow element).

<style type="text/css">
        .FlowContainer {
            width: 99%;
        body .bPageBlock .pbHeader {
            background-color: white;
        body .bPageBlock .pbBody {
            background-color: white;
        body .bPageBlock, body #bodyCell .bResource .secondaryPalette, body .secondaryPalette.bPageBlock, body .individualPalette .secondaryPalette.bPageBlock, body .bodyDiv .genericTable, body .genericPageBlockTable, body .bodyDiv .bSubBlock, body .bComponentBlock .bPageBlock, body .bMyDashboard .bPageBlock, body.rlHoverFrame .bPageBlock, body.subjectSelectionPopup div.choicesBox, body.lookupTab .secondaryPalette.bPageBlock, body.popupTab .secondaryPalette.bPageBlock, body.UserTagStatsPage .secondaryPalette.bPageBlock {
            background-color: white;

<!-- clearing an known sf bug -->
        .interviewFormHeaderCell {

With the FlowContainer Class from the sf documentation I was (only) eable to shrunk the window size of the flow (first class redefinition).

Changing the color of the flow detail window I was forced to open firebug and look which classes effect the header and the body of the flow detail (second, third and fourth class redefinition).

I'm not comfortable with this solution because I'm aware of the possibilty that the css redefinition will fail if salesforce change any of the class names in a future release. But actually I wasn't able to find any better way.

U asked for an example Cindy. This is mine. :)
Cindy NormanCindy Norman
@Sasha! Wow! That is superb sleuthing! I agree that it is also scary to use...hmmm...what to do?
As a general overall response to SF:
(Beware, I'm venting here!) This has been a real eyeopener for our company concerning SF. We spent 7 months of precious time-to-market developing a new product using Flows all the while being promised by the "sales" guys at SF that we would be able to control the look and make it as professional looking as we needed. But they never would tell us how, just that they will...we just trusted them. A month ago, we finally gave up and restarted the entire project again with VF. Huge disappointment. Our trust in SF is so obliterated now, we will move our products out to another more honest and reasonable platform as soon as we can. There seems to be a complete disconnect from the kids they have doing "sales" and the reality of SF on other issues as well but this one really cost us.