6

I need to completely change the design of a Visual Workflow (Flows) I have made,

I know that I can provide a static CSS file as follows:

<apex:stylesheet value="{URLFOR{$Resourse.styles, 'styles.css')}"/>

But I don’t understand how to control the changes in each part of my Flow in the CSS file,

In Visual force markup language, this is straight forward, as this webpage show:

http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm

I can define which parts are h1, p, or even define a style class.

But how can I do this with flows? How do I even know the names of the objects in the flows?

I’m just calling the flow in my visual force page using one line:

<flow:interview name="Name"/>

Can anyone guide me to a website, pdf, or a webinar that demonstrates how to create/change a CSS static file for FLOWS?

Improve this question

3 Answers 3

Reset to default
6

You can customize the flow appearance by applying custom CSS styles:

"Using a combination of flow attributes and CSS classes, you can customize the individual parts of a flow, such as the button location, button style, background, and the look and feel of the screen labels."

See Customizing a Flow’s User Interface in the docs.

Improve this answer
3
  • metadaddy, i use this link to call my CSS file, I uploaded my CSS file with an image folder as a zip file, Into Static resources, And when I call the CSS file from my code as follows: <apex:page standardStylesheets="False" showHeader="False" sidebar="False"> <apex:stylesheet value="{URLFOR{$Resourse.styles, 'styles.css')}"/> <flow:interview name="Pre_Course" buttonLocation="bottom"/> </apex:page> Nothing happens, the page is just rendered empty, None of the CSS settings work, Can you please tell me why?
    – user2333346
    Commented Sep 10, 2013 at 20:51
  • 1
    I think you have to include the standard stylesheets as well (there's lots more in there), but your own CSS will override the relevant styles. Also, $Resourse should be $Resource.
    – metadaddy
    Commented Sep 10, 2013 at 22:10
  • Ok, i take that back, it is actually changing the buttons on my webpage,that's it, so it seems im not calling the right casein the CSS file maybe, but it does seem very limited this way oppose to Visual Force
    – user2333346
    Commented Sep 10, 2013 at 22:40
2

I am not too sure if Flows support what you are asking for natively. I am just going to make an educated guess and provide some advice here:

  1. How about writing JS and manipulate the look and feel. I personally have not tried this, but it would be good to try. So, get ready to inspect elements and do some nasty web work.
  2. Why not write it out in Visualforce? No doubt you will write code, but it will give you some benefits. I am a developer, so I normally tend to go Visualforce over Flows.

Just going to discuss the pros and cons of using Visualforce in a nutshell.

Pros

  • There is complete flexibility in building your page including using HTML, CSS and JavaScript.
  • Can use all of the Visualforce components to make it very easy to display Salesforce data on the screen.
  • Developing the same requirements with Visualforce will normally take less time than building it with Flows.

Cons

  • It takes a developer with Visualforce experience to build and maintain a page.
  • Hiring a developer can be more costly.

If your company is used to using Visualforce and has Visualforce developers, then stick with that. The only caveat to this is if the requirements are that non-developers must support and make tweaks to the finished products, then flows may be required.

Improve this answer
3
  • subodhbah, actually i have my other pages written in Visual Force and APEX, but when i first started i made this one page using FLOWS, that i do not want to repeat, but i agree with you Visual Force is much much better
    – user2333346
    Commented Sep 10, 2013 at 20:55
  • That is true. Did you try inspecting elements and implementing some css? If external style sheet is not working, how about internal?
    – subodhbahl
    Commented Sep 10, 2013 at 22:18
  • Well as i mentioned below, the CSS file is working with the .prevnext class, but i cant seem to get any changes with the .FlowContainer class or i am not using it correctly. is there any examples?
    – user2333346
    Commented Sep 10, 2013 at 22:43
0

It seems that they have a voting pole in IdeaExchange, To encourage Salesforce to add 'Backgrounds and standard styles in Visual Flows'

https://success.salesforce.com/ideaView?id=08730000000gxJNAAY

I just voted

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .