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
fredkafredka 

Using Style Sheet on VF Page

I have the following text file I uploaded as a static resource:

 

 

.centertext {

text-allign:  center;

}

 

 

I am using the tabbed account and I have a controller extension that exposes some lists (because I want to split a custom object into 3 tabs based on record type.) I am trying to center 2 of the columns in the below section of the VF page (Base Members and Current Members) .. I added the reference at the top of the VF page to the static resource as follows:

 

 

<apex:page standardController="Account" extensions="EnrollmentAcctExt" showHeader="true" 
      tabStyle="account" standardStyleSheets="false">
      <apex:stylesheet value="{!URLFOR($Resource.AccountStyle, 'AccountStyle.css')}"/>

 and here is my pageblock that brings in the listing... however, the base members field is not centering:

 

 

 

<apex:tab label="Health Enrollment" name="HealthEnrollment" id="HE" styleclass="AcctListStyle">          
        <apex:pageBlock mode="edit" title="Health Enrollment Current">
           <apex:form >
            <apex:commandButton action="{!NewEnrollHealth}" value="New"/>
           </apex:form>
         <apex:pageblockSection id="key" title="">
          <apex:pageblockTable value="{!healthsummaryactive}" var="hs"> 
              <apex:column headervalue="Health Enrollment Name">
                  <apex:outputLink value="/{!hs.id}">{!hs.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!hs.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!hs.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!hs.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!hs.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!hs.Base_Members__c}" styleClass="centertext"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!hs.Current_Members__c}"/>
              </apex:column> 
          </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock>

 Do I have something in the wrong place or is my css file wrong?  Any help is greatly appreciated!!!! Thanks!!

 

Fred

 

Best Answer chosen by Admin (Salesforce Developers) 
SSRS2SSRS2

 can you change the apex:stylesheet tag as follows and try

 Current tag:

 

<apex:stylesheet value="{!URLFOR($Resource.AccountStyle, 'centertext.css')}"/>

 

 Change to:

<apex:stylesheet value="{!$Resource.AccountStyle}" />

 -Suresh 

All Answers

SSRS2SSRS2

Dear Fred;

  I found spelling mistake with your centertext class.

  try with

.centertext {

text-align:center

}

-Suresh
fredkafredka

Thanks for responding... I still cannot get this to work... any help is greatly appreciated!!!

 

Fred
miha198206miha198206

Move 

 styleClass="centertext"

to apex:column. Like this:

 

 

<apex:column headervalue="Base Members" styleClass="centertext">
  <apex:outputField value="{!hs.Base_Members__c}"/>
</apex:column>

 

 
fredkafredka

Thanks for your help... that is still not working... here is the entire VF page:  Thanks again!!!

 

 

<apex:page standardController="Account" extensions="EnrollmentAcctExt" showHeader="true" 
      tabStyle="account" standardStyleSheets="false">
     
      <apex:stylesheet value="{!URLFOR($Resource.AccountStyle, 'centertext.css')}"/>  
   <style>
      .activeTab {background-color: red; color:white; font-size: 9pt;
         background-image:none}
      .inactiveTab { background-color: lightgrey; color:black; font-size: 9pt;
         background-image:none}
      .AcctListStyle {font-size: 11pt; background-image:none}
   </style>
   <apex:outputPanel rendered="{!account.recordType.Name='Prospect'}">  
       <apex:tabPanel switchType="client" selectedTab="tabdetails" id="AccountTabPanel" tabClass="activeTab" 
           inactiveTabClass="inactiveTab">
  
       <apex:tab label="Details" name="AccDetails" id="tabdetails" styleclass="AcctListStyle">
        <apex:detail relatedList="false" title="true"/>
        <c:AccountHistoryComponentController AccountId="{!account.id}" /> 
       </apex:tab>
         
       <apex:tab label="Contacts" name="Contacts" id="tabContact" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="Contacts"/ >
       </apex:tab>

      <apex:tab label="Health Enrollment" name="HealthEnrollment" id="HE" styleclass="AcctListStyle">          
        <apex:pageBlock mode="edit" title="Health Enrollment Current">
           <apex:form >
            <apex:commandButton action="{!NewEnrollHealth}" value="New"/>
           </apex:form>
         <apex:pageblockSection id="key" title="">
          <apex:pageblockTable value="{!healthsummaryactive}" var="hs"> 
              <apex:column headervalue="Health Enrollment Name">
                  <apex:outputLink value="/{!hs.id}">{!hs.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!hs.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!hs.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!hs.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!hs.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members" styleClass="centertext">
                <apex:outputField value="{!hs.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!hs.Current_Members__c}"/>
              </apex:column> 
          </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock> 
      
        <apex:pageBlock mode="edit" title="Health Enrollment Historical">
         <apex:pageblockSection id="key" title="">
          <apex:pageblockTable value="{!healthsummaryhistorical}" var="hs">
              <apex:column headervalue="Health Enrollment Name">
                  <apex:outputLink value="/{!hs.id}">{!hs.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!hs.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!hs.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!hs.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!hs.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!hs.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!hs.Current_Members__c}"/>
              </apex:column> 
           </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock> 
      
         </apex:tab>
   
        <apex:tab label="RX Enrollment" name="RX Enrollment2" id="RX2" styleclass="AcctListStyle"> 
        <apex:pageBlock mode="edit" title="RX Enrollment Current">
         <apex:form >
           <apex:commandButton action="{!NewEnrollRX}" value="New"/>
         </apex:form>
         <apex:pageblockSection id="key" title="">
           <apex:pageblockTable value="{!PrescriptionSummaryactive}" var="rxs">
              <apex:column headervalue="RX Enrollment Name">
                  <apex:outputLink value="/{!rxs.id}">{!rxs.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!rxs.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!rxs.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!rxs.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!rxs.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!rxs.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!rxs.Current_Members__c}"/>
              </apex:column> 
           </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock> 
        
        <apex:pageBlock mode="edit" title="RX Enrollment Historical">
         <apex:form >
           <apex:commandButton action="{!NewEnrollRX}" value="New"/>
         </apex:form>
         <apex:pageblockSection id="key" title="">
           <apex:pageblockTable value="{!PrescriptionSummaryHistorical}" var="rxs">
              <apex:column headervalue="RX Enrollment Name">
                  <apex:outputLink value="/{!rxs.id}">{!rxs.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!rxs.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!rxs.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!rxs.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!rxs.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!rxs.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!rxs.Current_Members__c}"/>
              </apex:column> 
           </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock> 
         </apex:tab>
         
         <apex:tab label="Dental Enrollment" name="Dental Enrollment2" id="Dental2" styleclass="AcctListStyle"> 
        <apex:pageBlock mode="edit" title="Dental Enrollment Current">
         <apex:form >
           <apex:commandButton action="{!NewEnrollDental}" value="New"/>
         </apex:form>
         <apex:pageblockSection id="key" title="">
           <apex:pageblockTable value="{!DentalSummaryactive}" var="ds">
              <apex:column headervalue="Dental Enrollment Name">
                  <apex:outputLink value="/{!ds.id}">{!ds.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!ds.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!ds.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!ds.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!ds.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!ds.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!ds.Current_Members__c}"/>
              </apex:column> 
           </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock>
        
        <apex:pageBlock mode="edit" title="Dental Enrollment Historical">
         <apex:pageblockSection id="key" title="">
           <apex:pageblockTable value="{!DentalSummaryHistorical}" var="ds">
              <apex:column headervalue="RX Enrollment Name">
                  <apex:outputLink value="/{!ds.id}">{!ds.Name}</apex:outputLink>
              </apex:column>  
              <apex:column headervalue="Year">
                <apex:outputField value="{!ds.Year__c}"/>
              </apex:column> 
              <apex:column headervalue="Market">
                <apex:outputField value="{!ds.Market__c}"/>
              </apex:column> 
              <apex:column headervalue="Category">
                <apex:outputField value="{!ds.Category__c}"/>
              </apex:column> 
              <apex:column headervalue="Status">
                <apex:outputField value="{!ds.Status__c}"/>
              </apex:column> 
              <apex:column headervalue="Base Members">
                <apex:outputField value="{!ds.Base_Members__c}"/>
              </apex:column> 
              <apex:column headervalue="Current Members">
                <apex:outputField value="{!ds.Current_Members__c}"/>
              </apex:column> 
           </apex:pageblocktable>
         </apex:pageblockSection>
        </apex:pageblock>  
         </apex:tab>
         
      <apex:tab label="Opportunities" name="Opportunities" id="tabOpp" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="Opportunities" />
         </apex:tab>
       <apex:tab label="Enrollment" name="Health Enrollment" id="Henrl" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="Health_Enrollment_Summary__r" />
      </apex:tab>
       
      <apex:tab label="RX Enrollment" name="RX Enrollment" id="RXenrl" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="Prescription_Enrollment_Summaries__r" />
      </apex:tab>

       <apex:tab label="Dental Enrollment" name="Dental Enrollment" id="Denrl" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="Dental_Enrollment__r" />
      </apex:tab>

       <apex:tab label="Activities" name="Activities" id="tabOpAct" styleclass="AcctListStyle">
         <apex:relatedList subject="{!Account}" list="OpenActivities" />
         <apex:relatedList subject="{!Account}" list="ActivityHistories" />
       </apex:tab>
      
       <apex:tab label="Account Team" name="AccountTeam" id="tabAcctTeam" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="R00N700000021QaWEAU"/ >
       </apex:tab>

      <apex:tab label="Notes and Attachments" name="NotesAndAttachments" id="tabNA" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="NotesAndAttachments" />
      </apex:tab>
      
           
      <apex:tab label="Participation Audit" name="Participation Audit" id="ParAudit" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="Participation_Audits__r" />
      </apex:tab>

      
        <apex:tab label="Prospecting" name="Prospecting" id="tabNoteAtt" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="Prospecting2__r" />
      </apex:tab>
       
   </apex:tabPanel>
    </apex:outputPanel>
   <apex:outputPanel rendered="{!account.recordType.Name='Broker'}">  
       <apex:tabPanel switchType="client" selectedTab="tabdetails" tabClass="activeTab" 
           inactiveTabClass="inactiveTab">
  
       <apex:tab label="Details" name="AccDetails" styleclass="AcctListStyle">
        <apex:detail relatedList="false" title="true"/>
        <c:AccountHistoryComponentController AccountId="{!account.id}" /> 
       </apex:tab>
         
       <apex:tab label="Contacts" name="Contacts" styleclass="AcctListStyle">
         <apex:relatedList subject="{!account}" list="Contacts"/ >
       </apex:tab>
        
       <apex:tab label="Activities" name="Activities" styleclass="AcctListStyle">
         <apex:relatedList subject="{!Account}" list="OpenActivities" />
         <apex:relatedList subject="{!Account}" list="ActivityHistories" />
       </apex:tab>

      <apex:tab label="Notes and Attachments" name="NotesAndAttachments" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="NotesAndAttachments" />
      </apex:tab>
      
          <apex:tab label="Broker Profile" name="Broker Profile" styleclass="AcctListStyle"> 
         <apex:relatedList subject="{!account}" list="R00N70000002IFXUEA0" />
      </apex:tab>


   </apex:tabPanel>
</apex:outputPanel>      
</apex:page>

 

 
SSRS2SSRS2

 can you change the apex:stylesheet tag as follows and try

 Current tag:

 

<apex:stylesheet value="{!URLFOR($Resource.AccountStyle, 'centertext.css')}"/>

 

 Change to:

<apex:stylesheet value="{!$Resource.AccountStyle}" />

 -Suresh 

This was selected as the best answer
Pradeep_NavatarPradeep_Navatar

In my opinion, something is wrong(text-align:center;) in style sheet so change it in css text file. You can call text file from static resource directly on page by  <apex:stylesheet value="{!($Resource.AccountStyle)}"/>

 

Hope this helps.
fredkafredka

Thanks so much to both of you!!!! I did not understand that you only reference the file in the resource ... Thanks again!!!!!

 

Fred