1

So I've got a VF page set up where I'm using Visual Strap components to style the "look and feel" of the page. Problem is I'm using it to run a flow and my hopes were that Visual Strap would make the flow UI more appealing to end users... looks a little better, yet flow still seems butt ugly overall. Any suggestions? Not sure how to customize a flow's CSS so any advice/direction would be appreciated.

Here's my code in case it helps:

<apex:page docType="html-5.0" sidebar="false" standardController="Class__c"> <vs:importVisualStrap theme="paper" /> <vs:visualstrapblock > <center> <vs:pageheader icon="home" title="Class Creator" subtitle="Let's Create a New Class for this Quarter"/> </center> <vs:panel title="Select a Class" type="success"> <flow:interview name="ClassCreationFlow" buttonLocation="bottom"/> </vs:panel> </vs:visualstrapblock > </apex:page>

2
  • Hi Jake, welcome to SFSE! Please take the time to visit the Help center and read How do I ask a good question. The more details you provide, the more likely it is that someone will respond to your question with an answer that you'll find helpful. In your case, including some relevant CSS and/or a screen shot would likely be helpful. I really don't know what you expect from what you've included.
    – crmprogdev
    Jul 11, 2015 at 14:49
  • Thanks @crmprogdev! Yes, I am obviously a noob so I will take the time to read up on SFSE. Sorry for not being clear and direct. Jul 14, 2015 at 15:25

1 Answer 1

1

You need to do your own CSS specific to the flow classes, and the flow needs to be embedded in a VF page to gain control of the CSS overrides. Check out the documentation on the themeable elements to see which pieces you have control over.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_flows_customize_runtime_ui.htm

Take whatever bootstrap CSS you are wanting to use (visual strap uses the core bootstrap style) and start with copying the style attributes over to a new CSS file you can import into your vf flow container. Since the CSS file is specific to those flow classes, you usually won't have too much conflict in your page or visual strap styles.

I use the Bootstrap SF1 theme as my source for styling and just imported some of those styles like buttons and input fields into a flow specific CSS and just use that on all my flows now. I like the theme because it matches the SF1 app really well and doesn't compete with standard bootstrap styles too much.

3
  • Thanks @cricketlang ! Could you please share your code? Your answer is clear and perfectly understandable, but I'm obviously a "noob" so need my hand to be held for awhile... I like how your solution is more scalable. Jul 14, 2015 at 15:21
  • @JakeSchmitz yeah I can send you one that I have. Give me a bit though because I'm pretty slammed today and will need to touch it up a bit. In your code posted, you use the paper style bootstrap theme and the one I have is more standard/SF1 friendly. Will that still work? Jul 14, 2015 at 18:02
  • You are the best! No worries about timeframe (although my project deadline is July 31st). I only used paper theme because that is all I was aware of until you enlightened me, haha. Your standard style is a much better idea. Can't wait to behold your code! Jul 15, 2015 at 4:21

You must log in to answer this question.

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