3

I want to change the image and font colour on tab details page. please see the below code

how to change font color on backgrounf image in vf pages

<!--apex:flash src="{!$Resource.bluebird}" height="300" width="300"
      flashvars="sessionId={!$Api.Session_ID}&serverUrl={!$Api.Partner_Server_URL_160}"/-->

<apex:page standardController="Account" showChat="true" showHeader="true" tabStyle="Account">

    <body style="background-image:url('{!$Resource.bluebird}');">

      <style>      
          .activeTab {backgrouud-color:Blue;color:White backgroung-image:url"{!$Resource.bluebird}"}
          .inactiveTab {backgrouud-color:Green;color:White backgroung-image:url"{!$Resource.bluebird}"}
      </style> 

           <apex:tabPanel switchType="client" id="AccountTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" contentStyle="">
               <apex:stylesheet value="{!$Resource.bluebird}"/>
               <apex:tab label="Details" name="AccDetails" id="tabDetails" 
                                                           style="background-image:url('{!$Resource.T3Dimg}');" > 
                   <apex:detail relatedList="false" title="true"/>
               </apex:tab>
                   <apex:tab label="Contacts" name="Contacts" id="tabContact">
                       <apex:relatedList list="Contacts" subject="{!Account}"/>
                   </apex:tab>     

           </apex:tabPanel>

     </body>
</apex:page>
1

Given page loads image to apex:detail in apex:tab component, and change color text in pageblocktable columns:

<apex:page standardController="Account" showHeader="true">
<style>
    .backGroungImage { background-image: url({!$Resource.bird}); }
    .pbSubsection { background-image: url({!$Resource.bird}); }
</style>
<apex:tabPanel switchType="client" >
    <apex:tab label="Contacts" name="Contacts" id="tabContact" >     
        <apex:pageBlock title="My Content">
            <apex:pageBlockTable value="{!account.Contacts}" var="item"
                                 styleClass="backGroungImage">

                <apex:column value="{!item.name}" style="color: blue;"/>
                <apex:column value="{!item.Phone}" style="color: green;"/>
                <apex:column value="{!item.account.name}" style="color: red;"/>
            </apex:pageBlockTable>
        </apex:pageBlock> 
    </apex:tab>

</apex:tabPanel>

Where pbSubsection is a standard style for detail table in apex:detail component.

Create custom page textcolor, paste given code and execute it at:

yourinstanceurl/apex/textcolor/?id={accountId}

Demo:

fancy text

6
  • Hi Ilya, you used images for only one tab i want to use for another tab n its for "Account details ho to use – user28787 May 13 '16 at 22:26
  • i want image behind the account details below is the coding line <apex:tab label="Details" name="AccDetails" id="tabDetails" style="background-image:url('{!$Resource.T3Dimg}');" > <apex:detail relatedList="false" title="true"/> </apex:tab> – user28787 May 13 '16 at 22:48
  • but it is not showing – user28787 May 13 '16 at 22:49
  • check out my above code when I click on detail tab it is not shows the images behind the Account details . Please check that codes why it is not showing – user28787 May 13 '16 at 23:16
  • in your above codes it is showing only the contact name ... i want to see the two more i.e; phone number and account name, in different coloum with title – user28787 May 13 '16 at 23:24

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.