+ Start a Discussion
Eager-2-LearnEager-2-Learn 

How do I change the background color of a VF page?

I have the following code and want to get the VF page to have the same color as the opportunity page that I drop it on to.  This way when when the page is not rendered (no partner record found) then the VF page has the same color as the Opportunity page and the user will not see anything their.  As the code works now, the VF is an off white color.

 

Since I added the style you cannot see the VF page outline when the text "Remember to enter partner records" is visible.  Why does it not work when the text his hidden. I need to get the page to be invisible or at least the same color as the Opportunity background color so it appears invisible.

 

<apex:page standardController="Opportunity" extensions="OppPartnerExtension">
    <style>
        #DIV_Container{padding: 0; margin: 0; background-color: #F3F3EC;}
    </style>
    <div id="DIV_Container">
        <apex:outputText style="Color:#FF3300; background-color:yellow; font-style:bold"                    
                       value="Remember to enter partner(s)"
                       rendered="{!NOT(hasPartners)}">
                       <!--
                       value="{!hasPartners}">
                       -->
                       
          <!-- This routine jumps us to the partner screen if a partner
               record does not exists      
               
          <script>
              parent.location.href = '/opp/partneredit.jsp?id={!Opportunity.Id}&fid={!Opportunity.AccountId}&retURL=%2F{!Opportunity.Id}';
          </script>
    
          -->  
        </apex:outputText>
    </div>
</apex:page>

 

 

 

Arvind1Arvind1

Hi,

 

try using tabstyle="opportunity" in apex:page tag and check if it works

 

Thanks

Arvind

UncrasherUncrasher

I tried that but it did not work.  This is a VF page that is dropped on an opportunity page field area and is size just smaller than the normal field size.  It is displaying white instead of the off-gray color of the field area of the opportunity page.  I need it to look the same color or I need the VF page to be invisible when a partner record is not detected.

 

Here is the controller extension code that is used with the code I previously submitted, just in case that helps understand my situation better.

 

public class OppPartnerExtension {
    private boolean hasPartners = false;    

    // Check for any related partner records
    public OppPartnerExtension(ApexPages.StandardController controller) {
       if([select count() from OpportunityPartner where opportunityId = :controller.getRecord().id] > 0){
           hasPartners = true;
       }
    }
    
    public boolean getHasPartners(){
        return hasPartners;
    }
}

 

 

 

ahab1372ahab1372

sp the VF page is displayed within the opportunity page? Are you using S-Controls?

 

Anyways, you specify a CSS stylesheet with <apex:stylesheet and in that stylesheet specify the background color for the html body

Eager-2-LearnEager-2-Learn

Thanks for the suggestion.  All of this stuff is new for me (HTML, CSS, APEX, etc) so I am not certain how to do that.  It looks like per someone elses suggestion that I put inline CSS and this is what it did.  If you refer to the code in the communication stream you will see what I am referring to.  If the text reminder about partner records is displayed the white background goes away; however, if the text is not displayed per the controllers rules, the background is white.  Not knowing to much it looks to me like it is the highest level of a page area that is staying this off white and I want it transparent or the color or the standard Opportunity field area (detail area I think they call it), which is a light gray.

 

I appreciate your support.  Bottom line this is a minor issue but you know how the users community can make the biggest deals out of the smallest cosmetic issue; therefore, I am trying to beat them to the punch. ;)

b-Forceb-Force

Guys,

you are missing simple thing in this case

When you want to give any custom css to your Visual force page you need to add one more attribute in Apex page tag

as follow

 

<apex:page standardController="Opportunity" extensions="OppPartnerExtension" standardStylesheets="false" > 

 by default this is true for  VF pages , If you want add custom css set it too false

 

Hope this will help you,

 

Thanks,

Bala

Eager-2-LearnEager-2-Learn

if the standardStylesheets parm is set to "false" will the Tab take over the color of your style automatically?  Not sure how to create a style forces the tab to a specific color.