Home: Socialtext Style Customization Guide
Up: Styling The List View
Previous: Recently Viewed List View
Next: All Tags List View

Sample HTML

The snippet only has 2 rows.

<div>
  <div id="st-list-title">All Pages (31)
    <a href="/feed/workspace/admin?category=Recent%20Changes"><img border="0" src="/static/2.10.3.0/images/feed-icon-14x14.png"/></a>
  </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-recent_changes-content" class="query-results-content">
  <tr id="st-recent_changes-header-row" class="query-results-header-row">
    <th id="st-recent_changes-header-title" class="query-results-header-title">
      <a href="?action=changes;changes=all;sortby=Subject;direction=0">Title</a>
    </th>
    <th id="st-recent_changes-header-last-edited-by" class="query-results-header-last-edited-by">
      <a href="?action=changes;changes=all;sortby=From;direction=0">Last Edited By</a>
    </th>
    <th id="st-recent_changes-header-date" class="query-results-header-date">
      <a href="?action=changes;changes=all;sortby=Date;direction=0">Date</a>
    </th>
    <th id="st-recent_changes-header-revisions" class="query-results-header-revisions">
      <a href="?action=changes;changes=all;sortby=revision_count;direction=1">Revisions</a>
    </th>
  </tr>

  <tr class="st-recent_changes-row query-results-row w-st-even-row">
    <td class="st-recent_changes-row-title query-results-row-title">
      <a class="st-recent_changes-row-title-link query-results-row-title-link" href="index.cgi?your_watchlist_list_view" title="">Your Watchlist List View</a>
    </td>
    <td class="st-recent_changes-row-last-edited-by query-results-row-last-edited-by">Shawn Devlin</td>
    <td class="st-recent_changes-row-date query-results-row-date">Oct 25 1:56pm</td>
    <td class="st-recent_changes-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=your_watchlist_list_view">2</a>
    </td>
  </tr>
  <tr class="st-recent_changes-row query-results-row w-st-odd-row">
    <td class="st-recent_changes-row-title query-results-row-title">
      <a class="st-recent_changes-row-title-link query-results-row-title-link" href="index.cgi?what_s_new_list_view" title="">What's New List View</a>
    </td>
    <td class="st-recent_changes-row-last-edited-by query-results-row-last-edited-by">Shawn Devlin</td>
    <td class="st-recent_changes-row-date query-results-row-date">Oct 25 1:32pm</td>
    <td class="st-recent_changes-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=what_s_new_list_view">5</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-recent_changes-content
table.query-results-content

#st-recent_changes-header-row
tr.query-results-header-row

#st-recent_changes-header-title
th.query-results-header-title

#st-recent_changes-header-last-edited-by
th.query-results-header-last-edited-by

#st-recent_changes-header-date
th.query-results-header-date

#st-recent_changes-header-revisions
th.query-results-header-revisions

tr.st-recent_changes-row
tr.query-results-row
tr.w-st-even-row
tr.w-st-odd-row

td.st-recent_changes-row-title
td.query-results-row-title

td.st-recent_changes-row-last-edited-by
td.query-results-row-last-edited-by

td.st-recent_changes-row-date
td.query-results-row-date

td.st-recent_changes-row-revisions
td.query-results-row-revisions