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:form>
<apex:pageBlock title="test" id="repeat">
<apex:repeat value="{!fieldSetsKeys}" var="fieldSetKey">
<apex:variable var="name" value="{!fieldSetKey}"/>
<style>
body .bPageBlock .pbBody .Color .pbSubheader{
background-color:#473ce6;
}
body .bPageBlock .pbBody .Color .pbSubheader h3{
color:#000;
}
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%);
}
</style>
<apex:outputPanel styleClass="Color">
<apex:pageBlockSection title="{!name}" columns="1">
<apex:pageBlockTable value="{!wrappers[name]}" var="wrapper" id="Table">
<!--some code-->
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:outputPanel>
</apex:repeat>
</apex:pageBlock>
</apex:form>
</apex:page>
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