function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
gyani19901.3956550919266765E12gyani19901.3956550919266765E12 

style in active tab in the vf page

hello,
i have a vf page in which , i am using active tab functionality ,
User-added image
my problem is how can i change the font color of the "Opportunity Details" and "Tracking Repairs" and i try contentstyle and the another thing is how can i use own background imgage in place of label my code is:

<style>
    .activeTab {
        background-color: #8A9744;background-image:none; padding-top:5px;height:15px;
    }
    .inactiveTab{
        background-color: #8A9744; background-image:none; padding-top:5px;height:15px;
    }
</style>

<apex:tabPanel switchType="client" selectedTab="tabdetails" id="OpportunityTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" contentstyle="font-size:50px;color:white; font-weith:bold">
{
    code
}
</apex:tabPanel>

can some help me,, many thanks
Jigar.LakhaniJigar.Lakhani
Hello,

You can change font color of tab labels using include color css in your style class like below.
.activeTab {
        background-color: #8A9744;background-image:none; padding-top:5px;height:15px;color:white;
    }

User-added image

As well if you want to set background then you can set your image url to background-image property of css class.

Thanks & Cheers,
Jigar

 
gyani19901.3956550919266765E12gyani19901.3956550919266765E12
Thanks for your reply,
i have tried this so many times,, but its not working.
Jigar.LakhaniJigar.Lakhani
Then there must be something else which effecting it in your page.
If you can send me the whole page, then I can review it.

Thanks & Cheers,
Jigar
gyani19901.3956550919266765E12gyani19901.3956550919266765E12
.activeTab { background-color: #8A9744;background-image:none; padding-top:5px;height:15px;color:white; } .inactiveTab{ background-color: #8A9744; background-image:none; padding-top:5px;height:15px;color:white; }

{!Opportunity.name}

Download Terms And Condition   {!att[0].name} (/servlet/servlet.FileDownload?file={!att[0].id}" download="{!att[0].id}) this is my whole page code please review and let me know and thanks for your help.
Jigar.LakhaniJigar.Lakhani
Can you please send it from <apex:page> to </apex:page> ?
gyani19901.3956550919266765E12gyani19901.3956550919266765E12
.activeTab { background-color: #8A9744;background-image:none; padding-top:5px;height:15px;color:white; } .inactiveTab{ background-color: #8A9744; background-image:none; padding-top:5px;height:15px;color:white; }

{!Opportunity.name}

Download Terms And Condition   {!att[0].name} this is my whole page code and thanks for your reply.
gyani19901.3956550919266765E12gyani19901.3956550919266765E12
<apex:page standardController="Opportunity" extensions="OpportunityDetailCls">
<script>
    function confirmDelete() {
      return confirm('Are you sure you want to delete?');
    }
    function onCancel(){
        document.getElementById('{!$Component.FirstForm.thePageBlock1.thepageBlockButtons.editButton}').style.display = 'Inline';
        document.getElementById('{!$Component.FirstForm.thePageBlock1.thepageBlockButtons.cancelButton}').style.display='None';
        document.getElementById('{!$Component.FirstForm.thePageBlock1.thepageBlockButtons.deleteButton}').style.display='Inline';
        document.getElementById('{!$Component.FirstForm.thePageBlock1.thepageBlockButtons.saveButton}').style.display='None';
        document.getElementById('{!$Component.FirstForm.thePageBlock1.thepageBlockButtons.cloneButton}').style.display='Inline';
    }
</script>

<style>
   
    .activeTab {
        background-color: #8A9744;background-image:none; padding-top:5px;height:15px;color:white;
    }
    .inactiveTab{
        background-color: #8A9744; background-image:none; padding-top:5px;height:15px;color:white;
    }
    
    
</style>

            <center><p style="font-size:25px;font-weight: bold">{!Opportunity.name}</p></center>
            
            <div id ="scroll">
                <chatter:feedWithFollowers entityId="{!Opportunity.id}" />
            </div>
           
    <apex:form id="FirstForm">
        <apex:include pageName="Opportunity_Stages" />
            <apex:pageBlock id="thePageBlock1" tabStyle="Solution" mode="inlineEdit">
                <apex:pageBlockButtons id="thepageBlockButtons">
                    <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
                    <apex:commandButton action="{!save}" id="saveButton" value="Save" style="display: none;"/>
                    <apex:commandButton id="cancelButton" value="Cancel" onclick="onCancel()" reRender="FirstForm" style="display: none;"/>
                    <apex:commandButton action="{!delete}" id="deleteButton" value="Delete" onClick="if (!confirmDelete()) return false;" reRender="thePageBlock1"/>
                    <apex:commandButton value="Clone" action="{!URLFOR($Action.Opportunity.Clone,Opportunity.id)}" id="cloneButton"/>
                </apex:pageBlockButtons>
                
                <apex:pageBlockSection columns="2" id="thePageBlockSection" title="Opportunity Description" collapsible="false">
                    <apex:outputField value="{!Opportunity.Accountid}">
                        <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton,deleteButton,cloneButton" event="ondblclick" />
                    </apex:outputField>
                    <apex:outputField value="{!Opportunity.Product_Line__c}">
                        <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton,deleteButton,cloneButton" event="ondblclick" />
                    </apex:outputField>
                </apex:pageBlockSection>
                
                <apex:pageBlockSection columns="1" collapsible="false">
                    <apex:outputField value="{!Opportunity.Name}"> 
                        <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton,deleteButton,cloneButton" event="ondblclick" />
                    </apex:outputField>
                
                    
              
             
                <apex:tabPanel switchType="client" selectedTab="tabdetails" id="OpportunityTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
                    <apex:tab label="Opportunity Details" name="OppDetails" id="tabdetails" style="background-color:#F8F8F8;font-size:12px;">
                    
                 <apex:pageBlockSection >
                            
                            <apex:outputField value="{!Opportunity.Quote_Type__c}">
                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton,deleteButton,cloneButton" event="ondblclick" />
                            </apex:outputField>
                          
                    </apex:tab>
                    
                    <apex:tab label="Tracking Repairs" name="OppTrackingRepairs" id="tabTrackingRepairs" style="background-color:#F8F8F8;font-size:12px;">
                        <apex:pageBlockSection >
                            
                            <apex:outputField value="{!Opportunity.Disassembly_Start_Date__c}">
                                <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton,deleteButton,cloneButton" event="ondblclick" />
                            </apex:outputField>
                        </apex:pageBlockSection>
                    </apex:tab>
                </apex:tabPanel>
    </apex:form> 
     
</apex:page>

this is my whole page code
Jigar.LakhaniJigar.Lakhani
Hello,

I have tried your code, and it is working fine.

User-added image
You are using another page in this page - <apex:include pageName="Opportunity_Stages" />
Please try without this line.

Thakns & Cheers,
Jigar

 
gyani19901.3956550919266765E12gyani19901.3956550919266765E12
yes i include another page in the same vf page.