function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
StevevStevev 

Using a static style sheet resource in a tabbed page

I'm using tabbed VF pages quite a bit and added in the <style> tag for inline CSS as per the cook book example and it worked great. What I tried to do next is to move the styles to an external style sheet. Unfortunately the cook book doesn't explain what to me is the next obvious requirement (a future improvement in the documentation perhaps?). The style sheet tag seems to be ignored. Can anyone suggest what I'm doing wrong? Below is the source for test objects to try things out.

 

I imported the style sheet as a Static resource file (Style2.css):

 

@charset "ISO-8859-1";

 

.activeTab {background-color: #236FBD; color:white;

            background-image:none}

            

inactiveTab {background-color: lightgrey;

             color:black;

             background-image:none}

 

Page:

 

<apex:page standardController="test_object_A__c" extensions="TestObjectExtension" showHeader="true" tabStyle="test_object_A__c"> <apex:stylesheet value="!$Resource.Style2}"/> <apex:tabPanel switchType="client" selectedTab="tabTestObjectDetails" id="ObjectTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" value="{!TabInFocus}"> <apex:tab label="Object A" name="Test_object_A__c" id="tabTestObjectDetails"> <apex:detail relatedList="false" title="true"/> </apex:tab> <apex:tab label="Object B" name="Test_Object_B__r" id="tabObjectB"> <apex:relatedList subject="{!test_object_A__c}" list="Test_Object_B__r"/> </apex:tab> <apex:tab label="Object C" name="Test_Object_C__r" id="tabObjectC"> <apex:relatedList subject="{!test_object_A__c}" list="Test_Object_C__r"/> </apex:tab> <apex:tab label="Approvals" name="ProcessSteps" id="tabApproval"> <apex:relatedList subject="{!test_object_A__c}" list="ProcessSteps"/> </apex:tab> </apex:tabPanel> 

</apex:page> 

Best Answer chosen by Admin (Salesforce Developers) 
SteveMTCSteveMTC

Hello there

 

From a quick look at the code I'd say the first thing to fix would be the  <apex:stylesheet value="!$Resource.Style2}"/> element. This should be <apex:stylesheet value="{!$Resource.Style2}"> then all the code you want styled by it, followed by </apex:stylesheet>

All Answers

SteveMTCSteveMTC

Hello there

 

From a quick look at the code I'd say the first thing to fix would be the  <apex:stylesheet value="!$Resource.Style2}"/> element. This should be <apex:stylesheet value="{!$Resource.Style2}"> then all the code you want styled by it, followed by </apex:stylesheet>

This was selected as the best answer
StevevStevev

Thanks Steve!! That was really dumb of me! I'm a bit surprised it didn't get picked up by the syntax checking when I saved Apex?

Just goes to show you can look at something too long and not spot the obvious.