Question

Currently on a regular page display in a FogBugz Plugin (i.e., via IPluginPageDisplay) we are using a plain (i.e. not styled) table.

The question is: is there a way to reference the CSS for the wiki so that we can style the tables on our plugin-generated page using the table styles that are used in the FogBugz wiki?

Answer 1

The styles used for tables inside of the wiki are contained within each wiki's template, so there are a couple of different ways you could leverage those styles:

1. Link to the FogBugz 8 Default Template stylesheet and format your HTML such that the table CSS selectors in the wiki template stylesheet would also match your plugin's tables.
2. Copy and paste the styles you're interested in out of the wiki template's stylesheet and send those down along with your plugin's HTML.

The benefit of option 1 is that if we ever change the default table styles in the wiki template, your plugin's tables would automatically reflect those changes. Of course, the downsides are a) you're plugin page will include a lot of extraneous CSS, and b) you'll need to craft your plugin's HTML such that your tables will match the CSS selectors used by the wiki's stylesheet.

Option 2 won't get automatically updated, but is probably the easier/clearer route. It also allows you to tweak your tables styles as you see fit. :)

Option 1: Linking to the FogBugz Default Wiki Template Stylesheet

This link tag will bring in the FogBugz 8 Default Template stylesheet:

<link rel="stylesheet" type="text/css" href="https://path_to_fogbugz/styles.asp?ixTemplate=X" />

Where X is the ixTemplate of your FogBugz 8 Default Template. To determine the ixTemplate of your FogBugz 8 Default Template, go to:

https://path_to_fogbugz/default.asp?pg=pgListTemplates

And then look at the ixTemplate that shows up in the URL for the "Copy template" icon next to the FogBugz 8 Default Template.

Option 2: Copy-and-paste the wiki table styles

Include the following CSS along with your plugin's HTML:

.article-content table.Basic
{
    border-collapse: collapse;
    border: 1px solid #ccc;
    border-bottom-color: #aaa;
    border-radius: 2px;
    -moz-border-radius: 2px;
    box-shadow: 0px 1px 0 #ddd;
    -moz-box-shadow: 0px 1px 0 #ddd;
    -webkit-box-shadow: 0px 1px 0 #ddd;
    line-height: 18px;
    margin-bottom: 17px;
}

.article-content table.Basic tr
{
    background: #fff;
    vertical-align: top;
}

.article-content table.Basic tr:nth-child(even)
{
    background: #eee;
}

.article-content table.Basic tr.even-row
{
    background: #eee;
}

.article-content table.Basic tr:nth-child(1) th
{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#bbb));
    background: -moz-linear-gradient(top, #ccc, #bbb);
    border: 1px solid #aaa;
    border-bottom-color: #999;
    border-top-color: #bbb;
    box-shadow: 0px 1px 1px #ccc;
    -moz-box-shadow: 0px 1px 1px #ccc;
    -webkit-box-shadow: 0px 1px 1px #ccc;
    color: #333;
    font-size: 14px;
    padding: 8px 18px 8px 9px;
    text-shadow: 0 1px #ddd;
}

.article-content table.Basic tr.first-row th
{
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#bbb));
    background: -moz-linear-gradient(top, #ccc, #bbb);
    border: 1px solid #aaa;
    border-bottom-color: #999;
    border-top-color: #bbb;
    box-shadow: 0px 1px 1px #ccc;
    -moz-box-shadow: 0px 1px 1px #ccc;
    -webkit-box-shadow: 0px 1px 1px #ccc;
    color: #333;
    font-size: 14px;
    padding: 8px 18px 8px 9px;
    text-shadow: 0 1px #ddd;
}

.article-content table.Basic tr.first-row th
{
    background-color: #bbb;
}

.article-content table.Basic th
{
    background: #ddd;
    border: 1px solid #bbb;
    color: #000;
    font-weight: normal;
    padding: 4px 18px 4px 9px;
    text-align: left;
}

.article-content table.Basic tr:nth-child(even) th
{
    background: #ccc;
}  .article-content table.Basic tr.even-row th
{
    background: #ccc;
} 

.article-content table.Basic td
{
    border: 1px dotted #ccc;
    padding: 2px 18px 4px 9px;
}

For both options

Once you've got the stylesheet, you'll just need to make sure you tables are nested inside of a div of class article-content and given a class of Basic:

<div class="article-content">
  <table class="Basic">
    <tr>
      <th>...</th>
    </tr>
    <tr>
      <td>...</td>
    </tr>
  </table>
</div>

Finally, in order to have the zebra-striping effect work properly in Internet Explorer, you'll also need to include the following JavaScript:

$(document).ready(function() {
    if($.browser.msie) {
        var jTables = $("table.Basic", $(".article-content"));
        for(var ix = 0; ix < jTables.length; ix++) {
            var elTable = jTables[ix];
            $("tr:odd", elTable).addClass("even-row");
            $("tr:first", elTable).addClass("first-row");
        }
    }
});