Quick jump:  What's new

 
Go to:
 
Weblog: Style Guide 
in Socialtext Documentation
Weblog Archives

Home: Socialtext Style Customization Guide
Up: Styling The Weblog
Previous: Weblog Navigation
Next: Styling The Settings


weblog-archives.jpg

HTML Snippet

<div id="st-weblog-archives">
  <div id="st-weblog-archives-title">Weblog Archives</div>
    <ul id="st-weblog-archives-list">
      <li><a href="index.cgi?action=weblog_display;category=Recent%20Changes;start=0;limit=127">October 2006</a></li>
      <li><a href="index.cgi?action=weblog_display;category=Recent%20Changes;start=127;limit=1">September 2006</a></li>
      <li><a href="index.cgi?action=weblog_display;category=Recent%20Changes;start=128;limit=19">June 2006</a></li>
    </ul>
</div>

CSS Selectors

#st-weblog-archives
#st-weblog-archives-title
#st-weblog-archives-list
#st-weblog-archives-list li
#st-weblog-archives-list li a
permalink
Weblog Actions

Home: Socialtext Style Customization Guide
Up: Styling The Weblog
Previous: Styling The Weblog
Next: Weblog Header


Weblog Actions

weblog-actions.jpg

HTML Snippet

<div id="st-weblog-actionbar">
  <div id="st-weblog-actionbar-chooseweblog">
    <form action="index.cgi">
     <span class="st-weblog-chooseprompt">Go to: </span>
     <input type="hidden" name="action" value="weblog_display" />
     <select name="category" onchange="this.form.submit()" id="page-control-category-selector">
       <option selected="true" value="Recent Changes">Recent Changes</option>
       <option value="Socialtext Weblog">Socialtext Weblog</option>
     </select>
     <span class="st-spacer"/>
   </form>
  </div>
</div>

CSS Selectors

#st-weblog-actionbar
#st-weblog-actionbar-chooseweblog
.st-weblog-chooseprompt
#page-control-category-selector"
.st-spacer
permalink
Using Your Own Logo

Home: Socialtext Style Customization Guide
Top: Process Overview
Previous: Installing Styles into Your Workspace
Next: Styling The Dashboard


By default, Socialtext places its own logo in the top middle of the dashboard. If you'd like to use your own logo for your workspace, you can upload an image through Settings|This Workspace. The image you specify will then be used in place of ours.

The image is contained within a <div> tag with an id of st-wiki-logo. You can style that selector to move/hide the image on the dashboard.

permalink
User Login System

Home: Socialtext Style Customization Guide
Top: Special Cases
Previous: Special Cases
Next: Add Comment


The User Login System houses links for Logging in and out Settings and Help. These styles apply for the login system for various privacy configurations. Most Socialtext wikis are password-protected private wikis, so some of these items will not apply.

CSS Selectors

  #workspace-bar-user-login-system 
  * html #workspace-bar-user-login-system 
  #logout-link 
  #user-welcome-message 
  #user-settings-link 
  #user-help-link 
  #user-invite-self-login-link 
  #user-login-link 
  .user-login-link 
  #user-register-link
permalink
Upload Files Lightbox (View mode)

Home: Socialtext Style Customization Guide
Up: Styling The Lightboxes
Previous: Manage Attachments Lightbox
Next: Add Tags


uploadfileviewmode.png

HTML Snippet

<div id="st-attachments-attachinterface">
  <div id="st-attachments-attach-attachinterface-overlay" class="popup-overlay"></div>
  <div id="st-attachments-attach-interface">
    <form id="st-attachments-attach-form" name="attachForm" method="post" action="/page/css-guide-2/untitled_page/attachments" accept="text/javascript" enctype="multipart/form-data" target="st-attachments-attach-formtarget">
      <iframe id="st-attachments-attach-formtarget" name="st-attachments-attach-formtarget" src="/static/1.99.99.12/html/blank.html"></iframe>
      <div id="st-attachments-attach-title">Upload Files</div>
      <p id="st-attachments-attach-message">
        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.
      </p>
      <p id="st-attachments-attach-fileprompt">
        <input id="st-attachments-attach-filename" size="60" type="file" name="file"/>
      </p>
      <div id="st-attachments-attach-error">&nbsp;</div>
      <div id="st-attachments-attach-uploadmessage">&nbsp;</div>
      <div id="st-attachments-attach-embed">
        <label for="st-attachments-attach-embedcheckbox" id="st-attachments-attach-embedlabel">
          <input class="checkbox" type="checkbox" id="st-attachments-attach-embedcheckbox" name="embedcb" value="1" checked="checked"/>
          <input type="hidden" id="st-attachments-attach-embedfield" name="embed" value="1"/>
          Add a link to the attachment at the top of the page? Images will appear in the page.
        </label>
      </div>
      <div id="st-attachments-attach-unpack">
        <label for="st-attachments-attach-unpackcheckbox" id="st-attachments-attach-unpacklabel">
          <input class="checkbox" type="checkbox" id="st-attachments-attach-unpackcheckbox" name="unpackcb" value="1" />
          <input type="hidden" id="st-attachments-attach-unpackfield" name="unpack" value="0"/>
          Expand zip archive and attach individual files to the page
        </label>
      </div>
      <div id="st-attachments-attach-list"></div>
      <div id="st-attachments-attach-buttons">
        <div id="st-attachments-attach-close">
          <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-attach-closebutton" href="#" title="">Done</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div id="st-attachments-attach-uploadbutton">
          <input id="st-attachments-attach-submit" name="submit" type="submit" value="Upload file" />
        </div>
      </div>
    </form>
  </div>
</div>

CSS Selectors

See Standard Button for the button CSS selectors.

#st-attachments-attachinterface
#st-attachments-attach-attachinterface-overlay
div.popup-overlay
#st-attachments-attach-interface
#st-attachments-attach-form
#st-attachments-attach-formtarget
#st-attachments-attach-title
#st-attachments-attach-message
#st-attachments-attach-fileprompt
#st-attachments-attach-filename
#st-attachments-attach-error
#st-attachments-attach-uploadmessage
#st-attachments-attach-embed
#st-attachments-attach-embedlabel
#st-attachments-attach-embedcheckbox
#st-attachments-attach-unpack
#st-attachments-attach-unpacklabel
#st-attachments-attach-unpackcheckbox
#st-attachments-attach-list
#st-attachments-attach-buttons
#st-attachments-attach-close
#st-attachments-attach-closebutton
#st-attachments-attach-uploadbutton
#st-attachments-attach-submit
permalink
Upload Files Lightbox (Edit Mode)

Home: Socialtext Style Customization Guide
Up: Styling The Lightboxes
Previous: Page Already Exists Lightbox
Next: Manage Attachments Lightbox


uploadfileseditmode.png

HTML Snippet

<div id="st-attachmentsqueue-interface">
  <form onsubmit="return false;">
    <div id="st-attachmentsqueue-overlay" class="popup-overlay"></div>
    <div id="st-attachmentsqueue-dialog">
      <div id="st-attachmentsqueue-title">Upload Files</div>
        <p id="st-attachmentsqueue-message">
          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.
        </p>
        <p id="st-attachmentsqueue-fileprompt">
          <input id="st-attachmentsqueue-filename" size="60" type="file" name="file"/>
        </p>
        <div id="st-attachmentsqueue-error">&nbsp;</div>
        <div id="st-attachmentsqueue-list"></div>
        <div id="st-attachmentsqueue-uploadmessage">&nbsp;</div>
        <div id="st-attachmentsqueue-embed">
          <label for="st-attachmentsqueue-embedcheckbox" id="st-attachmentsqueue-embedlabel">
            <input class="checkbox" type="checkbox" id="st-attachmentsqueue-embedcheckbox" name="embedcb" value="1" checked="checked"/>
            <input type="hidden" id="st-attachmentsqueue-embedfield" name="embed" value="1"/>
            <span id="st-attachmentsqueue-embedmessage">
              Add a link to the attachment at the top of the page?
              Images will appear in the page when the page is saved.
            </span>
          </label>
        </div>
        <div id="st-attachmentsqueue-unpack">
          <label for="st-attachmentsqueue-unpackcheckbox" id="st-attachmentsqueue-unpacklabel">
            <input class="checkbox" type="checkbox" id="st-attachmentsqueue-unpackcheckbox" name="unpackcb" value="1" />
            <input type="hidden" id="st-attachmentsqueue-unpackfield" name="unpack" value="0"/>
            <span id="st-attachmentsqueue-unpackmessage">
              Expand zip archive and attach individual files to the page
            </span>
          </label>
        </div>
        <div id="st-attachmentsqueue-buttons">
          <div id="st-attachmentsqueue-close">
            <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-attachmentsqueue-closebutton" href="#" title="">Done</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div id="st-attachmentsqueue-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-attachmentsqueue-submitbutton" href="#" title="">Add file</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div id="st-attachmentsqueue-holder" style="display: none"></div>

    <div id="st-attachmentsqueue-listtemplate" style="display: none">
      <span class="st-attachmentsqueue-listlabel">Files To upload: </span>
      <!-- json -->
    </div>
  </form>
</div>

CSS Selectors

See Standard Button for the CSS selectors for the buttons.

#st-attachmentsqueue-interface
#st-attachmentsqueue-overlay
div.popup-overlay
#st-attachmentsqueue-dialog
#st-attachmentsqueue-title
#st-attachmentsqueue-message
#st-attachmentsqueue-fileprompt
#st-attachmentsqueue-filename
#st-attachmentsqueue-error
#st-attachmentsqueue-list
#st-attachmentsqueue-uploadmessage
#st-attachmentsqueue-embed
#st-attachmentsqueue-embedlabel
#st-attachmentsqueue-embedcheckbox
#st-attachmentsqueue-embedmessage
#st-attachmentsqueue-unpack
#st-attachmentsqueue-unpacklabel
#st-attachmentsqueue-unpackcheckbox
#st-attachmentsqueue-unpackmessage
#st-attachmentsqueue-buttons
#st-attachmentsqueue-closebutton
#st-attachmentsqueue-uploadbutton
#st-attachmentsqueue-submitbutton
#st-attachmentsqueue-listlabel
permalink
Testing Your Styles

Home: Socialtext Style Customization Guide
Top: Process Overview
Previous: Downloading the Default Style and Wiki Pages
Next: Installing Styles into Your Workspace


Socialtext currently supports a number of web browsers for use with its application. In the process of designing your custom look and feel, be sure to test against each of the following browsers:

  • On Windows 2000 and Windows XP:
Internet Explorer (IE), version 6.0.28xx and later. Not the version 7 beta.
Firefox, version 1.0.7 and 1.5.x

  • On Mac OS 10.4.x
Firefox, version 1.5.x
Safari, version 2.0.3 (WIKIWYG is not supported yet)

  • On Debian Linux
Firefox, version 1.5.x
permalink
System Status

Home: Socialtext Style Customization Guide
Up: Special Cases
Previous: Add Comment
Next: Search Results


HTML Snippet

<div id="st-system-status">
  Welcome to Socialtext 2.0! What's different? Where's my home page? Here's how to <a href="/help/index.cgi?s2_migration_helper">get the most from S2.</a>
</div>

CSS Selectors

#st-system-status
permalink
Styling The Weblog
permalink
Styling The Settings

Home: Socialtext Style Customization Guide
Previous: Weblog Archives
Next: Settings Selector


Settings

settings.jpg

Documentation for Settings is on two pages: Settings Selector and Change Setting. Also see Navigation Bar and Socialtext Attribution.

permalink
Weblog Navigation
Loading...
Weblog Archives
  • Loading...

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: