function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
asegalasegal 

Is possible include a custom style form in the flow designer to re-style the components of the flow?

Hello,

 

I would like to know if i have any possibility to apply styles to the elements of the Workflow Designer like form element or choice element.  I have seen the form html source code when I'm editing a flow and there I cannot see any form html tag, only allowing me to change the style of the form tabs. Is possible include a custom style form in the flow designer to re-style the components of the flow?

 

Thanks! 

RajaramRajaram

You need to create a VF page with a Flow component and use standard VF styling tools to customize the UI.
asegalasegal

Hi Rajaram,

 

First of all thanks for your reply.

 

I have followed the steps that you have adviced me  but don't find a good solution. In my case i have one tag <flow:interview name="flow_name"></flow:interview> on my VF page and workflow works perfectly. I have investigated but only have found a buton style parameter for modify the button styles of flow. When I have seen the  VF code page and inspect the flow element with firebug appears a div block and a CSS file called extended.css.  Is possible that Salesforce generate internally the div element and the css files? Is posible modify this css file like a normal css zip file in Salesforce?

 

Thanks

 

 
RojodeBearRojodeBear

Raja,

 

Can we get some guidance on using CSS to style a Flow? I am thrilled with what Flow can do, but I need a little more control in the UI, such as:

 

* Making text boxes larger and smaller - you can make the input Short or Long, but need to make a field a little shorter for a zipcode or longer to take a full company name.

* Positioning text boxes - as in the above example, it would be great to have city, state and zipcode on the one 'line'. 

 

I am sure there are more, but this would be great for a start.
RajaramRajaram

You will have to use firebug and identify the CSS classes generated and override the styles by adding the styles to your VF page. For example, the following styes the bottom buttons for flows:

 

.bPageBlock .pbBottomButtons .pbButtonb .btn { 
            color: #663300;
            display: block;
            float: left;
            font: bold 18px arial, sans-serif;
            height: 28px;
            }