+ Start a Discussion
Ed_IngberEd_Ingber 

Inline CSS in Visual Workflow

Trying to modify the text formatting in the Screens by overriding a default setting of the CSS class. As an experiment, just trying to set text color to red. Found the class name using Chrome's Developer Tools. (Also modified the buttons, successfully based on an example given on the message board here.)

 

Text doesn't change to red - what am I missing?

 

Thanks!

Ed

 

<apex:page >

<style type="text/css">
.bPageBlock .pbBottomButtons .pbButtonb .btn { 
  color: #808080;
  display: inline;
  float: left;
  font: bold 16px arial, sans-serif;
  height: 24px;
}
</style>

<p style="color: #808080; font-size: 175%; font-weight: bolder; margin-top: 0.3em; margin-bottom: 0.2em">
  DH Interface Designer
</p>

<style type="text/css">
.theflow {
  color: #ff0000;
}
</style>
 
<div id="theflow">
  <flow:interview name="GP3_FLOW_9_1_12" buttonLocation="bottom" />
</div>
 
</apex:page><apex:page >

<style type="text/css">
.bPageBlock .pbBottomButtons .pbButtonb .btn { 
  color: #808080;
  display: inline;
  float: left;
  font: bold 16px arial, sans-serif;
  height: 24px;
}
</style>

<p style="color: #808080; font-size: 175%; font-weight: bolder; margin-top: 0.3em; margin-bottom: 0.2em">
  DH Interface Designer
</p>

<style type="text/css">
.theflow {
  color: #ff0000;
}
</style>
 
<div id="theflow">
  <flow:interview name="GP3_FLOW_9_1_12" buttonLocation="bottom" />
</div>
 
</apex:page>

 

markross__cmarkross__c

I know the one thing I've seen work is encase the flow in a div with an id assigned to the div. Once you've done that, you can put CSS in the page assigned specifically to that div's id.

Ed_IngberEd_Ingber

Thanks GetForcedQ, if I understand your suggestion...

 

*I know the one thing I've seen work is encase the flow in a div with an id assigned to the div. Once you've done that, you can put CSS in the page assigned specifically to that div's id.

 

I tried it here, but again doesn't seem to work (unless I did something silly).

wahoobiewahoobie

I came across this post earlier that might shed some light on CSS if you have not already seen it:

Customizing a Flow’s User Interface

 

 

InternalServerErrorInternalServerError

Use

 

<apex:page standardStylesheets="false">

Cindy NormanCindy Norman
It doesn't do much good to be able to change just the look of the labels without changing the look of the input areas as well. Does anyone know how to do this?
Michal GajewskiMichal Gajewski
Following code works for me:

<apex:page standardStylesheets="true" >
<style type="text/css">
.FlowText{
 color: #fed;
 font: bold 16px arial, sans-serif;
 height: 24px;
}

.FlowCurrency{
 color: #fed;
 font: bold 16px arial, sans-serif;
 height: 24px;
}

.FlowDropdown{
 color: #fed;
 font: bold 16px arial, sans-serif;
 height: 24px;
}

</style>
<flow:interview name="New_Customer_Flow" id="theflow">
</flow:interview>
</apex:page>

However class definition like .FlowText .FlowCurrency .FlowDropdown{} won't work 
Robbert Bos1Robbert Bos1
Works for me as wel, however I can't seem to change the background color..