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

HTML Snippet

The snippet only contains 2 rows.

<div>
  <div id="st-list-title">
    Changes in Last Week (30)
    <a href="/feed/workspace/css-guide-2?watchlist=default"><img border="0" src="/static/1.99.99.11/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=recent_changes;changes=;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=recent_changes;changes=;sortby=From;direction=0">Last Edited By</a>
    </th>
    <th id="st-recent_changes-header-date" class="query-results-header-date">
      <a href="?action=recent_changes;changes=;sortby=Date;direction=0">Date</a>
    </th>
    <th id="st-recent_changes-header-revisions" class="query-results-header-revisions">
      <a href="?action=recent_changes;changes=;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?styling_the_list_view" title="">Styling The 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 12:15pm</td>
    <td class="st-recent_changes-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=styling_the_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?page_boxes_toggle" title="">page boxes toggle</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 11:48am</td>
    <td class="st-recent_changes-row-revisions query-results-row-revisions">
      <a href="index.cgi?action=revision_list;page_name=page_boxes_toggle">5</a>
    </td>
  </tr>
</table>

CSS Selectors

Each tag has an id and a class. This should enable you to style all list views the same (using the classes) or differently (using the ids). Selectors are grouped by tag. You can control alternating row colors using the "tr.w-st-even-row" and "tr.w-st-odd-row" classes.

#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-title a
th.query-results-header-title a

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

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

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

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

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

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

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

a.st-recent_changes-row-title-link 
a.query-results-row-title-link

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

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