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
Tags
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