2

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>
Improve this question

1 Answer 1

Reset to default
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

Improve this answer
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, 2016 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, 2016 at 22:48
  • but it is not showing
    – user28787
    May 13, 2016 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, 2016 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, 2016 at 23:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .