2

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>

Improve this question
4
  • Could you post the markup? Commented May 18, 2015 at 12:13
  • Without seeing your code, it's very difficult for the community to contribute. This link may help you though. developer.salesforce.com/forums/… Commented May 18, 2015 at 12:16
  • It looks fine to me, as an alternative you can just add an inline style to that form, i.e. <apex:form style="background-color:white;"> or w/e Commented May 18, 2015 at 13:42
  • It is not working. My expected output is to color the whole background except the input fields in the first form. However this is not working with the following code, or the one that you have suggested. Commented May 18, 2015 at 13:49

1 Answer 1

Reset to default
1

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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.