Home: Socialtext Style Customization Guide
Up: Styling The List View
Previous: Your Watchlist List View
Next: All Pages List View

HTML Snippet

<div>
  <div id="st-list-title">Recently Viewed Pages</div>
  <div id="st-listtools">
    <ul class="level1">
      <li class="submenu"><span id="st-listtools-export">Export</span>
        <ul class="level2">
          <li class="first"><a title="Create PDF document from selected pages" id="st-listview-submit-pdfexport" href="#">Export checked to PDF</a></li>
          <li class="separator"><a title="Create Word document from selected pages" id="st-listview-submit-rtfexport" href="#">Export checked to Word</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="st-actions-bar-spacer-clear">&nbsp;</div>
</div>

<table id="st-breadcrumbs-content" class="query-results-content">
  <tr id="st-breadcrumbs-header-row" class="query-results-header-row">
    <th id="st-breadcrumbs-header-title" class="query-results-header-title">
      <a href="?action=breadcrumbs_list;sortby=Subject;direction=0">Title</a>
    </th>

    <th id="st-breadcrumbs-header-last-edited-by" class="query-results-header-last-edited-by">
      <a href="?action=breadcrumbs_list;sortby=From;direction=0">Last Edited By</a>
    </th>

    <th id="st-breadcrumbs-header-date" class="query-results-header-date">
      <a href="?action=breadcrumbs_list;sortby=Date;direction=0">Date</a>
    </th>

    <th id="st-breadcrumbs-header-revisions" class="query-results-header-revisions">
      <a href="?action=breadcrumbs_list;sortby=revision_count;direction=1">Revisions</a>
    </th>
  </tr>

  <tr class="st-breadcrumbs-row query-results-row w-st-even-row">
    <td class="st-breadcrumbs-row-title query-results-row-title">
      <a class="st-breadcrumbs-row-title-link query-results-row-title-link" href="index.cgi?socialtext_style_customization_guide" title="">
      Socialtext Style Customization Guide</a>
    </td>

    <td class="st-breadcrumbs-row-last-edited-by query-results-row-last-edited-by">System User</td>

    <td class="st-breadcrumbs-row-date query-results-row-date">Oct 17 8:59am</td>

    <td class="st-breadcrumbs-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=socialtext_style_customization_guide">1</a>
    </td>
  </tr>

  <tr class="st-breadcrumbs-row query-results-row w-st-odd-row">
    <td class="st-breadcrumbs-row-title query-results-row-title">
      <a class="st-breadcrumbs-row-title-link query-results-row-title-link" href="index.cgi?getting_started" title="">Getting Started</a>
    </td>

    <td class="st-breadcrumbs-row-last-edited-by query-results-row-last-edited-by">Shawn Devlin</td>

    <td class="st-breadcrumbs-row-date query-results-row-date">Oct 17 12:02pm</td>

    <td class="st-breadcrumbs-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=getting_started">16</a>
    </td>
  </tr>
</table>

CSS Selectors

Many of the elements in these tables are marked with both and ID and a Class. To help keep the multiple selectors clear, they have been grouped in the way that there appear in the markup.

#st-list-title
#st-listtools
#st-listtools ul.level1
#st-listtools ul.level1 li.submenu
span#st-listtools-export
#st-listtools ul.level2
#st-listtools ul.level2 li.first
a#st-listview-submit-pdfexport
#st-listtools ul.level2 li.separator
a#st-listview-submit-rtfexport
div#st-actions-bar-spacer-clear

#st-breadcrumbs-content
.query-results-content

#st-breadcrumbs-header-row
query-results-header-row

#st-breadcrumbs-header-title
.query-results-header-title

#st-breadcrumbs-header-last-edited-by
.query-results-header-last-edited-by

#st-breadcrumbs-header-date
.query-results-header-date

#st-breadcrumbs-header-revisions
.query-results-header-revisions

.st-breadcrumbs-row
.query-results-row

/* These two classes provide alternate for each row, providing a means
   to 'stripe' the table rows. */
.w-st-even-row
.w-st-odd-row

.st-breadcrumbs-row-title
.query-results-row-title

.st-breadcrumbs-row-title-link
.query-results-row-title-link
      
.st-breadcrumbs-row-last-edited-by
.query-results-row-last-edited-by

.st-breadcrumbs-row-date
.query-results-row-date

.st-breadcrumbs-row-revisions
.query-results-row-revisions