How to add Flow-Specific CSS Classes?

Question

I've just created a Visualforce page with an embedded flow. This is the code so far:

<apex:page controller="FlowController" standardStylesheets="True" showHeader="False" sidebar="False">
<apex:stylesheet value="{!URLFOR($Resource.Custom_Classes, 'customclasses/css/myfile.css')}"/>

<flow:interview name="Checker" interview="{!Checker}" finishLocation="{!finishcheck}">
 <apex:param name="orgId" value="{!organizationid}"/>
 </flow:interview>

</apex:page>

I'm now trying to add custom css classes as described in this link.

Since I'm new to the whole platform and even CSS in general, I'm not very sure how to override the predefined style classes for the elements listed in the link ( FlowContainer, FlowPageBlockBtns, FlowPreviousBtn, etc)

For example, if I want to add a custom style for the next/previous button how should I go about it?

Edit: I would also like to change the style of the entire page, just in case the process would be different.

Edit2: I have also tried the following after doing a little reading but it still does not seem to be working:

<apex:page controller="FlowController" standardStylesheets="True" showHeader="False" sidebar="False">

<style>

.FlowPageBlockBtns.FlowNextBtn{

color:red;
text-align:center;

}
</style>


<flow:interview name="Checker" interview="{!Checker}" finishLocation="{!finishcheck}">
       <apex:param name="orgId" value="{!organizationid}"/>
</flow:interview>

</apex:page>

Community · Accepted Answer · 2017-05-23 12:37:09Z

0

Replacing the styling for the specific style names is what I think the page you link to intends and either of your approaches to that should work.

Your second example is probably not working because of this Difference between .classA.classB and .classA .classB in CSS? i.e. you are missing a space. CSS selectors can be very precise.

edited May 23, 2017 at 12:37

CommunityBot

1

answered Mar 24, 2014 at 11:36

Keith C

138k31 gold badges233 silver badges478 bronze badges

Thanks for the response! That difference in the CSS was informative but unfortunately didn't help in my case. Neither of the 2 approaches are working for me currently. Do you have any other suggestions?

RohanC
– RohanC

2014-03-24 11:42:45 +00:00
Commented Mar 24, 2014 at 11:42
... only to use your browser's "View Source" or "Inspect Element" to see what classes are being applied to the HTML elements and work back to the CSS from that. But hopefully someone who has done this overriding will see your question and be able to give you an answer.

Keith C
– Keith C

2014-03-24 11:59:12 +00:00
Commented Mar 24, 2014 at 11:59
Hey.. my bad.. I don't know what I did wrong the first time I tried, but this works. :) Change .FlowPageBlockBtns.FlowNextBtn to .FlowPageBlockBtns .FlowNextBtn

RohanC
– RohanC

2014-03-28 11:13:37 +00:00
Commented Mar 28, 2014 at 11:13
Glad you got it sorted; I know when I'm debugging and trying a bunch of things it is very easy to miss stuff. Also thanks for taking the trouble to come back here with your feedback.

Keith C
– Keith C

2014-03-28 11:28:07 +00:00
Commented Mar 28, 2014 at 11:28

Add a comment |

Vignex · Accepted Answer · 2014-12-18 09:45:26Z

0

Try to put a space between the two classes:

.FlowPageBlockBtns .FlowNextBtn {
      color:red;
      text-align:center;
}

edited Dec 18, 2014 at 9:45

Vignex

1,6041 gold badge15 silver badges28 bronze badges

answered Dec 18, 2014 at 8:29

Slamtt

1

Add a comment |

Stack Exchange Network

How to add Flow-Specific CSS Classes?

2 Answers 2

You must log in to answer this question.

Hot Network Questions

How to add Flow-Specific CSS Classes?

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions