[SalesForce] Change background color of one of two VF forms on page

I have a VF page in which I have a form (Total two forms) which includes a pageblock section. I want to change the background color of the form using CSS. How do I do it?
I have tried creating a CSS class, and used that class in that particular form (Out of two forms that are in that page) but still unable to do so. Why?

I have to change the background color of the form 1 where there are input fields.How to achieve this functionality?

Code follows Here:

<apex:page Controller="IssueBook" id="abc" showHeader="false">
<style  type="text/css">

.rules_form1
   {
      background-color:#99dce4;
      font-size: 18px;
      font-family: Arial;      
      margin: 10px 0 10px 30px;
      float: left;
      width: 100%;
   }
.rules_form2 
   {
      font-size: 18px;
      font-family: Arial;      
      margin: 10px 0 10px 30px;
      float: left;
      width: 100%;
   }
body { background-color: white; width:80%;margin-left:auto;margin-right:auto; margin-top:10px;}
</style>
 <apex:form styleClass="rules_form1">

    <apex:pageBlock title="Book Request Form">
    <hr size="1px" color="black"/>
        <apex:pageBlockSection columns="2" >
            <apex:inputField value="{!a.Book_Name__c}"/>
            <apex:inputField value="{!a.Author__c}"/>
            <apex:inputField value="{!a.Edition__c}"/>
            <apex:inputField value="{!a.Date_of_Issue__c}"/>
        </apex:pageBlockSection>
        <apex:pageBlockButtons location="Bottom" styleClass="rules">
            <apex:commandButton value="Save" action="{!saveBook}" reRender="BookList" oncomplete="this.form.reset();"> </apex:commandButton>
        </apex:pageBlockButtons>



    </apex:pageBlock>
     </apex:form>
    <apex:form styleClass="rules_form2"  >
    <apex:pageBlock id="BookList">
        <apex:pageblockTable value="{!BookList}" var="ab"  >
            <apex:column value="{!ab.book.Book_Name__c}"/> 
            <apex:column value="{!ab.book.Author__c}"/> 
            <apex:column value="{!ab.book.Edition__c}"/> 
            <apex:column value="{!ab.book.Date_of_Issue__c}"/>
            <apex:column value="{!ab.book.Return_Date__c}"/>
            <apex:column >
              <apex:commandLink value="Delete" action="{!deleteBook}"><apex:param value="{!ab.selected}" name="selectedBook"  /></apex:commandLink>
           </apex:column>  

        </apex:pageblockTable>
        <apex:pageBlockSection ><apex:commandButton value="SUBMIT REQUEST" action="{!saveInDatabase}"/></apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

Best Answer

Here is a sample page that demonstrates how to do some of what you want:

<apex:page standardController="Contact" recordSetVar="cs">

<style type="text/css">
.rules_form1 * {
    background-color:#99dce4;
    font-size: 18px;
    font-family: Arial;      
    width: 100%;
}
.rules_form2 * {
    font-size: 18px;
    font-family: Arial;      
}
</style>

<apex:pageBlock >
    <apex:pageBlockTable value="{!cs}" var="c" styleClass="rules_form1">
        <apex:column value="{!c.Name}"/>
        <apex:column value="{!c.Birthdate}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

<apex:pageBlock>
    <apex:pageBlockTable value="{!cs}" var="c" styleClass="rules_form2">
        <apex:column value="{!c.Name}"/>
        <apex:column value="{!c.Birthdate}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

</apex:page>

The key concept here is that CSS provides descendant selectors. When Visualforce outputs a apex:pageBlockTable, it outputs a variety of nested table, thead, tbody, tr, th, td, span and div elements. You can apply CSS classes directly to some of these via the Visualforce but not all of them.

But if you set a CSS class on the table element as is done in the above example, then you can use CSS's descendant selectors to apply styling as you like to the various descendant elements. In the example above I've used * meaning any element, but you can create separate styles for each type of element as you like.

Use your browser's "Inspect Element" (see How do I start to debug my own Visualforce/JavaScript?) feature to see what HTML the Visualforce tags have been turned into. But bear in mind that the detail of the HTML output and the CSS class names used are not part of any API so Salesforce may make changes in the future os keep what you do simple and general.

Related Topic