You need to sign in to do that
Don't have an account?
gyani19901.3956550919266765E12
style in active tab in the vf page
hello,
i have a vf page in which , i am using active tab functionality ,
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
i have a vf page in which , i am using active tab functionality ,
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
You can change font color of tab labels using include color css in your style class like below.
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
i have tried this so many times,, but its not working.
If you can send me the whole page, then I can review it.
Thanks & Cheers,
Jigar
{!Opportunity.name}
{!Opportunity.name}
<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
I have tried your code, and it is working fine.
You are using another page in this page - <apex:include pageName="Opportunity_Stages" />
Please try without this line.
Thakns & Cheers,
Jigar