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&nbsp;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&nbsp;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