+ Start a Discussion
Antonio_hotelbedsAntonio_hotelbeds 

Image in a tab of a tabbed visualforce page

Hi all,

 

I am starting to create a visualforce page to create a tabbed account page and this is my code for the style and the relevant code for the visualforce page:

 

<apex:page standardController="Account" showHeader="true" tabStyle="Account" standardStyleSheets="false">
	
	<!-- Defino estilos para los tabs del segundo Panel -->
	<style>
              .activeTab2 {color:black; background-image:{!$Resource.TabAmarilloDifuminadoActiva}}
              .inactiveTab2 {background-color: #F2F5A9; color:black; background-image:none}
         </style>

<apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountExtraTabPanel" tabClass="activeTab2"
	inactiveTabClass="inactiveTab2">
		
		<apex:tab label="Administrative/Finance" name="AdministrativeInfo" id="AdministrativeInfo">
		</apex:tab>		
		
		<apex:tab label="Commercial" name="CommercialInfo" id="commercialInfo">label for commercial
		</apex:tab>
		
		<apex:tab label="Operational" name="OperationalInfo" id="OperationalInfo">
		</apex:tab>
		
		<apex:tab label="Technical" name="TechnicalInfo" id="TechnicalInfo">
		</apex:tab>
		
		<apex:tab label="Product Profile" name="ProductInfo" id="ProductInfo">
		</apex:tab>
		
		<apex:tab label="Destinos" name="DestinosInfo" id="DestinosInfo">
		</apex:tab>
	
	</apex:tabPanel>
	
</apex:page>

 

Because in the standard tab panel options, in the tabs salesforce degradates the colour from green to grey. I want to do the same but from yellow to grey in the tabs of my panel. So i created an image, called TabAmarilloDifuminadoActiva but I still see it with the green Salesfroce defatul image.

 

Could you please help me for my image to be loaded in the active tab?

 

Thanks a lot!

 





Best Answer chosen by Admin (Salesforce Developers) 
Ispita_NavatarIspita_Navatar

Hi,

            Below is the code snippet for style which would help you attain your requirement:-

             <style>

              .activeTab2 {color:red; background-image:url({!$Resource.datepic})}

             </style>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

All Answers

Ispita_NavatarIspita_Navatar

Hi,

            Below is the code snippet for style which would help you attain your requirement:-

             <style>

              .activeTab2 {color:red; background-image:url({!$Resource.datepic})}

             </style>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 

This was selected as the best answer
Antonio_hotelbedsAntonio_hotelbeds

Thanks sooo much for your help!! It worked!! :)

Ispita_NavatarIspita_Navatar

You are most welcome. Anytime.