Sign Up ›

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

Applying an external CSS to a table

Hi

 

I'm trying to apply an external CSS to a table but whatever I tried did no work.

This is my code:

 

<apex:page Controller="SearchCheckedOutBooksController" showHeader="false" Tabstyle="Library_Order__c">
<apex:stylesheet value="{!URLFOR($Resource.tableStyles, 'source/style.css')}"/> 
  <apex:sectionHeader subtitle="ECI Information Center Portal"/>
   <style>
      .activeTab {background-color: #2369FF; color:white; background-image:none}
      .inactiveTab { background-color: lightgrey; color:black; background-image:none}
   </style>

   <apex:form >

	   <apex:tabPanel switchType="client" selectedTab=" tabCard" id="InfoCenterTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">   
	
	      <apex:tab label="News" name="News" id="tabnews">
	         <apex:detail relatedList="false" title="true"/>
	      </apex:tab>
	      <apex:tab label="My Library Card" name="Card" id="tabCard">
	         
	          <apex:pageBlock title="Search My Library Orders" mode="edit">         
	               <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Subscriber ID to query&nbsp;</label>
	               <apex:inputText value="{!subscriberId}"/>
	        
	               <apex:commandButton action="{!searchOrders}" value="Search" rerender="orderResults"/>                  
	          </apex:pageBlock>
	                    
	           <!-- The results for each call are handled here. -->              
	               
	            <apex:outputPanel layout="block" id="orderResults">
	                <apex:outputPanel rendered="{!IF(hasError == false,true,false)}"> 
	                    <apex:pageBlock title="Search Results">
	                        <apex:pageBlockButtons >
	
	                                <apex:commandButton value="Cancel Selected Orders" action="{!cancelOrder}" rerender="orderResults"/>
	
	                        </apex:pageBlockButtons>
	                        
	                        <apex:pageBlockSection title="Pending Orders">
								<apex:dataTable value="{!myPendingOrders}" var="entry" id="pendingTable" 
								 				styleClass="#newspaper-a">

	                                <apex:column headerValue="Select">
	                                    <apex:inputCheckbox id="orderCheckedone" value="{!entry.isSelected}" disabled="{!entry.disable}"/>
	                                </apex:column>
	                                <apex:column value="{!entry.order.Name}" headerValue="Order ID"/> 
	                                <apex:column value="{!entry.order.Type__c}" headerValue="Type"/> 
	                                <apex:column value="{!entry.order.Status__c}" headerValue="Order Status"/> 
	                                <apex:column value="{!entry.title}" headerValue="Title"/>
	                                <apex:column value="{!entry.order.Order_Date__c}" headerValue="Order Date"/>
	                                <apex:column value="{!entry.order.Fulfillment_Date__c}" headerValue="Checkout Date"/>
	                                <apex:column value="{!entry.order.Return_By__c}" headerValue="Return By"/>
								</apex:dataTable>
	                        </apex:pageBlockSection>

The styles looks like this:

 

 

#newspaper-a
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#newspaper-a th
{
	padding: 12px 17px 12px 17px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
	border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
	padding: 7px 17px 7px 17px;
	color: #669;
}
#newspaper-a tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}


#newspaper-b
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}

 

 

What am I dong wrong?

 

Thanks

 

Oded

 

Best Answer chosen by Admin (Salesforce Developers) 
Alex_ConfigeroAlex_Configero

 

you need to remove the # from styleCLass

styleClass="newspaper-a"

 

then change your css and replace the # (which means Id) with a . (which means class) oe.

 

 

.newspaper-a

 

 

 

All Answers

Alex_ConfigeroAlex_Configero

 

you need to remove the # from styleCLass

styleClass="newspaper-a"

 

then change your css and replace the # (which means Id) with a . (which means class) oe.

 

 

.newspaper-a

 

 

 

This was selected as the best answer
OdedHarnivOdedHarniv

Thank you 

 

now it works - I followed your advice plus I also noticed that when I work with chrome the MIME type is not correct for ZIP files.

I loaded it again with IE and now everything is OK

 

Thanks again
Alex_ConfigeroAlex_Configero

 

Glad it worked. Sorry to be a pain but can you mark my response as the solution? Every little bit helps :)