1

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>
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.

  • 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 Mar 24 '14 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 Mar 24 '14 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 Mar 28 '14 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 Mar 28 '14 at 11:28
0

Try to put a space between the two classes:

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

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.