V
2  

Back to Socialtext Documentation.

The sidebar contains information that relates to the page you are viewing. It features a link to page revision history, a watchlist star that lets you put the page into your watchlist or remove it, and three colored boxes displaying Tags, Incoming Links, and Attachments.

Toggling the sidebar. Clicking the V shape in the right-hand corner of the page will make the sidebar vanish. Click the > to bring back the sidebar.
View-Page-sidebar.png

The sidebar boxes are presented in the following order:

Tags. This is a list of all the Tags that have been applied to the page.

Incoming links. This is a list of all the pages that have a link to the page you are currently viewing.

Attachments. A list of this page's attached files.

There are two optional sidebar boxes:

What's New. A list of this workspace's most recent changes. Use "What's New" in the Settings page to control display of this box.

Recently Viewed. A list of your twenty most recently viewed pages. Use "Screen Layout" in the Settings page to control display of this box.

Back to Socialtext Documentation.

Tags
Attachments
Socialtext Documentation
page boxes

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


page-boxes.jpg

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

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

 

Upload Files

Click "Browse" to find the file you want to upload. When you click "Upload file" your file will be uploaded and added to the list of attachments for this page.

Maximum file size: 50MB

 
 
 
File Name Author Date Uploaded Size

Save Page As

Enter a meaningful and distinctive title for your page.

Page Title:

Tip: You'll be able to find this page later by using the title you choose.

Page Already Exists

There is already a page named XXX. Would you like to:

Save with a different name:

Save the page with the name "XXX"

Append your text to the bottom of the existing page named: "XXX"

Upload Files

Click "Browse" to find the file you want to upload. When you click "Add file" this file will be added to the list of attachments for this page, and uploaded when you save the page.

 
 
 
Add Tags

Enter a tag and click "Add tag". The tag will be saved when you save the page.

Tag: 

Suggestions: