function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Greg RohmanGreg Rohman 

Visualforce dashboard and CSS - standard way to implement?



Is there any documentation on how to properly mimic the default Salesforce look on dashboards in my visualforce dashboard components? I've tried including the standardStylesheets in my apex:page definition, and assigning the same classes to my output table/rows/columns, but that doesn't work. My assumption is that it's related to the iFrame that's used for using Visualforce on dashboards.


My code is below. It is close, but not exact. I've had to "fake" a couple of things to get it close. For example:

  • Created a div around everything with the "pbBody" class
  • Manually removed borders on each cell
  • Create individual styles for the "last" and "even " row styles

Is there a standard method of doing this?



<apex:page controller="CtrlDashAnnualClosedComp" showheader="false" sidebar="false" standardStylesheets="true">
    <apex:stylesheet value="/sCSS/Theme3/default/dashboard.css" />    
    <style type="text/css">
    .list tr.last td { border-bottom-width:0px;}
    .list tr.even td { background-color: #eeeeee;}
    <div class="pbBody">
        <table class="list" border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr class="headerRow">
                <th scope="col" style="border-width: 0px;">&nbsp;</th>
                <th scope="col" class="numericalColumn" style="border-width: 0px;">{!firstYear}</th>
                <th scope="col" class="numericalColumn" style="border-width: 0px;">{!secondYear}</th>
            <apex:repeat var="o" value="{!dashList}">
            <tr class="{!o.CSSclass}">
                <td style="border-width: 0px;"><span class="dashboardRowLabel">{!o.compMonth}</span></td>
                <td class="numericalColumn" style="border-width: 0px;"><span class="dashboardRowValue"><apex:outputText value="{0,number,currency}"><apex:param value="{!o.firstYearPrem}"/></apex:outputText></span></td>
                <td class="numericalColumn" style="border-width: 0px;"><span class="dashboardRowValue"><apex:outputText value="{0,number,currency}"><apex:param value="{!o.secondYearPrem}"/></apex:outputText></span></td>



Thanks in advance.





Instead of the <table> and <apex:repeat> use an <apex:dataTable>.


Hopefully I am correctly interpreting what you want here.

Greg RohmanGreg Rohman

Hi Damien.


Thanks for the prompt reply. Unfortunately, that does not work either. The output from apex:dataTable has no CSS applied at all. I would then have to take a similar approach to what I've already done, using the various CSS attributes of apex:column, apex: dataTable, etc. to "fake" it and get close.


I don't have any issue assigning the CSS classes, whether it's via apex:repeat or apex:dataTable. I just need to know what classes need to be assigned to where, and am hopeful someone can shed some light.




Maybe check out the "/** Lists **/" section of extended.css?  Looks like they're using a table class "list", header rows class "headerRow" and rows "dataRow"?