Home: Socialtext Style Customization Guide
Previous: Page Attribution
Next: Edit Toolbar

HTML Snippet

<div id="st-edit-mode-view">
  <div id="st-edit-mode-button-bar">
    <!-- edit toolbar -->
    <div id="st-edit-border">
      <div id="st-edit-border-left">
        <div id="st-edit-border-right">
          <div id="st-edit-border-top">
            <div id="st-edit-border-bottom">
              <div id="st-edit-border-left-top">
                <div id="st-edit-border-right-top">
                  <div id="st-edit-border-left-bottom">
                    <div id="st-edit-border-right-bottom">
                      <div class="st-content">
                        <div id="st-edit-mode-toolbar" style="clear: both; margin-top: 5px; visibility: inherit;">
                          <div id="st-page-editing">
                            <table id="st-editing-prefix-container">
                              <tbody>
                                <tr>
                                  <td>
                                    <div id="st-editing-title">
                                      Editing: <input size="65" id="st-newpage-pagename-edit" value="Styling The Edit Window" onclick="Socialtext.clear_untitled(this)" type="text">
                                    </div>
                                    <div id="st-page-editing-toolbar">
                                      <div style="display: block;" id="wikiwyg_toolbar" class="wikiwyg_toolbar">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/bold.gif" title="Bold (Ctrl+b)" alt="Bold (Ctrl+b)" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/italic.gif" title="Italic (Ctrl+i)" alt="Italic (Ctrl+i)" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/strike.gif" title="Strike Through (Ctrl+d)" alt="Strike Through (Ctrl+d)" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/separator.gif" title="" alt=" | " class="wikiwyg_separator">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/h1.gif" title="Heading 1" alt="Heading 1" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/h2.gif" title="Heading 2" alt="Heading 2" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/h3.gif" title="Heading 3" alt="Heading 3" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/h4.gif" title="Heading 4" alt="Heading 4" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/p.gif" title="Normal Text" alt="Normal Text" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/separator.gif" title="" alt=" | " class="wikiwyg_separator">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/hr.gif" title="Horizontal Rule" alt="Horizontal Rule" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/separator.gif" title="" alt=" | " class="wikiwyg_separator">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/ordered.gif" title="Numbered List" alt="Numbered List" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/unordered.gif" title="Bulleted List" alt="Bulleted List" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/outdent.gif" title="Less Indented" alt="Less Indented"  class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/indent.gif" title="More Indented" alt="More Indented" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/separator.gif" title="" alt=" | " class="wikiwyg_separator">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/link.gif" title="Create Link" alt="Create Link" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/www.gif" title="External Link" alt="External Link" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/unlink.gif" title="Unlink" alt="Unlink" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/attach.gif" title="Link to Attachment" alt="Link to Attachment" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/image.gif" title="Include an Image" alt="Include an Image" class="wikiwyg_button">
                                        <img src="/static/1.99.99.12/images/wikiwyg_icons/table.gif" title="Create Table" alt="Create Table" class="wikiwyg_button">
                                      </div>
                                    </div>
                                    <div id="st-page-editing-uploadbutton">
                                      <img src="/static/1.99.99.12/images/wikiwyg_icons/separator.gif" style="float: left;">
                                      <table class="button-table">
                                        <tbody>
                                          <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-edit-mode-uploadbutton" href="#" title="Click this button to upload a file to the page">Upload&nbsp;files</a>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <br style="clear: both; height: 1px;">
                            <form id="st-page-editing-form" name="st-page-editing-form" method="post" enctype="multipart/form-data" action="index.cgi">
                              <input id="st-page-editing-pagename" name="page_name" value="Styling The Edit Window" type="hidden">
                              <input id="st-page-editing-revisionid" name="revision_id" value="" type="hidden">
                              <input id="st-page-editing-pagebody" name="page_body" value="" type="hidden">
                              <input id="st-page-editing-action" name="action" value="edit_content" type="hidden">
                              <input id="st-page-editing-caller" name="caller_action" value="" type="hidden">
                              <input id="st-page-editing-append" name="append_mode" value="" type="hidden">
                              <div style="display: none;" id="st-page-editing-files"></div>
                            </form>
                            <iframe style="display: none;" id="st-page-editing-wysiwyg" src="/static/1.99.99.12/html/blank.html" frameborder="0"></iframe>
                          </div>
                        </div>
                        <div style="display: block;">
                          <textarea style="width: 100%; height: 439px;" id="wikiwyg_wikitext_textarea" wrap="virtual" name="page_body_decoy"></textarea>
                        </div>
                        <div style="background-color: lightyellow; display: none;" id="st-page-preview"></div>
                        <div style="display: none;" id="wikiwyg-page-content">
                          <div class="wiki">
                            <!-- content -->
                          </div>
                        </div>
                        <br style="clear: both; height: 1px;">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS Selectors

.pre .pre