Home: Socialtext Style Customization Guide
Up: Styling The Page View
Previous: Page View Action Bar
Next: Page Attribution

There are three page boxes: Tags, Incoming Links, and Attachments. The display of the side boxes is controlled by the Page Boxes Toggle element.
HTML Snippet
<div id="st-page-boxes-underlay"></div>
<div id="st-page-boxes">
<!-- Sidebox page tool -->
<div id="st-tags" class="st-page-box st-page-box-first"><!-- see below --></div>
<div id="st-incoming-links" class="st-page-box"><!-- see below --></div>
<div id="st-attachments" class="st-page-box"><!-- see below --></div>
</div>
CSS Selectors
#st-page-boxes-underlay
#st-page-boxes
HTML Snippet
<div id="st-tags" class="st-page-box st-page-box-first">
<div id="st-tags-title" class="st-page-box-title">Tags</div>
<form onsubmit="return false;">
<textarea id="st-tags-tagtemplate" class="st-jst-template"></textarea>
<textarea id="st-tags-suggestiontemplate" class="st-jst-template"></textarea>
<textarea id="st-tags-initial" class="st-json"></textarea>
<textarea id="st-tags-workspace" class="st-json"></textarea>
</form>
<div id="st-no-tags-placeholder" style="display: none">There are no tags for this page.</div>
<ul id="st-tags-listing" class="st-page-box-listing">
</ul>
<div id="st-tags-deletemessage"></div>
<div id="st-tags-addblock">
<table class="button-table">
<tr>
<td>
<div class="button-straight">
<div class="button-straight-right-top">
<div class="button-straight-left-bottom">
<div class="button-straight-right-bottom">
<div class="button-content">
<a id="st-tags-addlink" href="#" title="Click this button to add a tag to the page">Add tag</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="st-tags-addinput">
<form onsubmit="return false;">
<input id="st-tags-field" name="tagfield" class="st-tags-input" type="text" />
<table class="button-table">
<tr>
<td>
<div class="button-straight">
<div class="button-straight-right-top">
<div class="button-straight-left-bottom">
<div class="button-straight-right-bottom">
<div class="button-content">
<a id="st-tags-addbutton" href="#" title="Click this button to save your tag">Save tag</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
</div>
<div id="st-tags-message"></div>
<div id="st-tags-suggestion"><span class="st-tags-hint">Suggestions: </span><span id="st-tags-suggestionlist"></span></div>
</div>
CSS Selectors
The textarea tags contain code for the tag functionality and should not be displayed.
#st-tags
div.st-page-box
div.st-page-box-first
#st-tags-title
div.st-page-box-title
#st-no-tags-placeholder
#st-tags-listing
ul.st-page-box-listing
ul.st-page-box-listing li.st-tags-tagline
ul.st-page-box-listing li.st-page-box-listing-entry">
span.st-tags-level1
span.st-tags-level2
span.st-tags-level3
span.st-tags-level4
span.st-tags-level5
span.st-tags-tagdelete
a.st-tags-tagline-link
span.st-tags-tagdelete
a.st-tags-tagdelete
#st-tags-deletemessage
#st-tags-addblock
#st-tags-addinput
#st-tags-field
input.st-tags-input
#st-tags-message
#st-tags-suggestion
span.st-tags-hint
#st-tags-suggestionlist
a.st-tags-suggestion
Incoming Links
HTML Snippet
<div id="st-incoming-links" class="st-page-box">
<div id="st-incoming-links-title" class="st-page-box-title">Incoming Links</div>
<ul id="st-incoming-links-listing" class="st-page-box-listing">
<li class="st-incoming-links-entry st-page-box-listing-entry"><a href="?getting_started">Getting Started</a></li>
</ul>
</div>
CSS Selectors
#st-incoming-links
div.st-page-box
#st-incoming-links-title
div.st-page-box-title
#st-incoming-links-listing
ul.st-page-box-listing
li.st-incoming-links-entry
li.st-page-box-listing-entry
li.st-incoming-links-entry a
Attachments
HTML Snippet
<div id="st-attachments" class="st-page-box">
<div id="st-attachments-title" class="st-page-box-title">Attachments</div>
<form onsubmit="return false;">
<textarea id="st-attachments-listtemplate" class="st-jst-template"></textarea>
<textarea id="st-attachments-managetable" class="st-jst-template"></textarea>
<textarea id="st-attachments-files" class="st-json">{"attachments":[]}</textarea>
</form>
<ul id="st-attachments-listing" class="st-page-box-listing">
</ul>
<table id="st-attachments-buttons">
<tr>
<td id="st-attachments-buttons-uploadbutton">
<table class="button-table">
<tr>
<td>
<div class="button-straight">
<div class="button-straight-right-top">
<div class="button-straight-left-bottom">
<div class="button-straight-right-bottom">
<div class="button-content">
<a id="st-attachments-uploadbutton" href="#" title="Click this button to add a file to the page">Upload files</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td id="st-attachments-buttons-managebutton">
<table class="button-table">
<tr>
<td>
<div class="button-straight">
<div class="button-straight-right-top">
<div class="button-straight-left-bottom">
<div class="button-straight-right-bottom">
<div class="button-content">
<a id="st-attachments-managebutton" href="#" title="Click this button to manage files attached to the page">Manage files</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
CSS Selectors
#st-attachments
div.st-page-box
#st-attachments-title
div.st-page-box-title
#st-attachments-listing
ul.st-page-box-listing
ul.st-page-box-listing li.st-attachments-line
ul.st-page-box-listing li.st-page-box-listing-entry
#st-attachments-buttons
What's New
The "What's New" box can be enabled from the "What's New" section in the "Settings" page.
HTML Snippet
<div id="st-recent-changes" class="st-page-box">
<div id="st-recent-changes-title" class="st-page-box-title">What's New</div>
<div><a href="index.cgi?usability_review_2006_10_20">Usability Review, 2006-10-20</a></div>
<div><a href="index.cgi?ms_sps_insiders_call_11_20_06">MS SPS Insiders Call 11/20/06</a></div>
<div><a href="index.cgi?microsoft_partnership">Microsoft Partnership</a></div>
<div><a href="index.cgi?kirsten_2006_11_20">Kirsten, 2006-11-20</a></div>
<div><a href="index.cgi?alester_2006_11_20">alester 2006-11-20</a></div>
<div><a href="index.cgi?zac_bir_2006_11_20">Zac Bir, 2006-11-20</a></div>
<div><a href="index.cgi?engineering_vital_factors">Engineering Vital Factors</a></div>
<div><a href="index.cgi?matt_liggett">Matt Liggett</a></div>
</div>
CSS Selectors
#st-recent-changes
div.st-page-box
#st-recent-changes-title
div.st-page-box-title
#st-recent-changes div a
Recently Viewed
The "Recently Viewed" box can be enabled from the "Screen Layout" section in the "Settings" page.
HTML Snippet
<div id="st-breadcrumbs" class="st-page-box">
<div id="st-breadcrumbs-title" class="st-page-box-title">Recently Viewed</div>
<div><a href="index.cgi?css_review">CSS Review</a></div>
<div><a href="index.cgi?documentation_meeting">Documentation Meeting</a></div>
<div><a href="index.cgi?docs_user">Docs User</a></div>
</div>
CSS Selectors
#st-breadcrumbs
div.st-page-box
#st-breadcrumbs-title
div.st-page-box-title
#st-breadcrumbs div a