I want to apply a color gradient on the background-color on a component of my VisualForce page.

I used some code I found at : PageBlockSection background style using static resource file to test a little but I don't understand what I did.

    <apex:page standardController="ProductRequest" recordSetVar="ProductRequest" extensions="ProductRequestController2" tabstyle="Project__c">
        <apex:pageBlock title="test" id="repeat">
            <apex:repeat value="{!fieldSetsKeys}" var="fieldSetKey">
                <apex:variable var="name" value="{!fieldSetKey}"/>
                    body .bPageBlock .pbBody .Color .pbSubheader{
                    body .bPageBlock .pbBody .Color .pbSubheader h3{
                    body .bPageBlock .pbBody .Color .pbSubheader h2{
                    background-image: linear-gradient(to bottom right, red, yellow);
                    body .bPageBlock .pbBody .Color .pbSubheader h2{
                    background: rgb(2,0,36);
                    body .bPageBlock .pbBody .Color .pbSubheader h2{
                    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(21,21,140,1) 10%, rgba(0,212,255,1) 100%);
                <apex:outputPanel styleClass="Color">
                    <apex:pageBlockSection title="{!name}" columns="1">
                        <apex:pageBlockTable value="{!wrappers[name]}" var="wrapper"  id="Table">
                            <!--some code-->

the first two eements in my tag seems to be working, since the color of the header is the one I put with background-color, and the color of the text is black.

I know that .Color serves as an id, since it is the word wich I have to use with styleClass so it knows which component I want to use.

But I know nothing more, I don't know what is body, bpageBlock, pbBody and pbSubheader and the test I can put just before {. changing the hex value for a linear gradient doesn't apply the style at all.

Can someone tell me where can I find all that information, I know that it uses css inline. Or if you can give me a solution, please explain to me why it works. I don't know what to write before the css code in curved brackets, and what css will work. why background-color and color work, but background and background-image doesn't?

Thank you

  • bpageBlock etc are sfdc VF style classes that you would see if you used the browser's DevTools to explore the generated HTML. They are not documented
    – cropredy
    Jun 18, 2022 at 9:56


Your Answer

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

Browse other questions tagged or ask your own question.