I created a flow for the custom login with specific profile. However, I could only change the community logo but not having a way to to branding the page. For example, change the background into blue or red.

Is it possible to brand this page? Also, for the flow elements, could we brand it with css as well?

enter image description here

bumped to the homepage by Community yesterday

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.


@Dummy As far as branding is concerned, from official documentation i found this:-

What can you do with a login flow? Enhance or customize the login experience. For example, add a logo or login message. Collect and update user data. For example, request an email address, phone number, or mailing address. Interact with users, and ask them to perform an action. For example, complete a survey or accept terms of service. Connect to an external identity service or geo-fencing service, and collect or verify user information. Enforce strong authentication. For example, implement a two-factor authentication method using hardware, SMS, biometric, or another authentication technique. Run a confirmation process. For example, have a user define a secret question, and validate the answer during login. Create more granular policies. For example, set up a policy that sends a notification every time a user logs in during non-standard working hours.

Refer this link which have straight forward answer for your question:- changing the flow ui with viusalforce

    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.

After some more investigation, I found few blogs which are really helpful:- Reference:- Visual Workflow (Flow) tips and tricks If you are using Visual Workflow on Visualforce Page then you can change following things

  • buttonLocation : – You can define the location of navigation buttons in the flow user interface. Available values are Top, Bottom and Both.
  • buttonStyle : – You can define style to the flow navigation as a set. Can only be used for inline styling, not for CSS classes
  • FlowText : – You can define A field label.
  • FlowCurrency : – You can define A field label.

Now create a Visualforce Page and embed your Flow. To change the label of Text field (Name (Text), Phone Number (Text)) defines one CSS class and use it in Visualforce page

<style type=”text/css”>
.FlowText {
  color: green;

Likewise you can define CSS class different attributes.

In visualforce developer guide i found this:- Reference:- Customize a Flow’s User Interface

Embed Flows in Visualforce Pages To customize a flow’s look and feel or enhance its functionality, embed it in a Visualforce page. If your org has flows enabled for sites and portals, use the Visualforce page to deliver the flow to your Salesforce site, portal, or community.

Customize a Flow’s User Interface After you’ve embedded a flow in a Visualforce page, you can customize what the flow looks like at run time by applying custom styles using CSS. 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.

  <flow:interview name="MyFlow" buttonStyle="color:#050; background-color:#fed; border:1px solid;"/>

You can have more information on these link:-

    Visualforce Page: https://gist.github.com/anonymous/3e18e6a8b05e421978db

    Static Resource[FlowStyle.css]: https://gist.github.com/anonymous/0f3f379320e578b1e452

    Static Resource[FlowScript.js]: https://gist.github.com/anonymous/7cc8c2821b4165fcef88

Hope it helps you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.