Edit Toolbar


Home: Socialtext Style Customization Guide
Up: Styling The Edit Window
Previous: Styling The Edit Window
Next: Wikiwyg Toolbar


editwindow-toolbar.png

HTML Snippet

<div id="st-editing-tools-bar">
  <div class="st-actions-bar-spacer">&nbsp;</div>
    <div id="st-editing-tools-edit">
      <table id="st-save-button" class="st-page-action-button">
        <tr>
          <td>
            <div id="st-save-button-border-left-middle">
              <div id="st-save-button-border-right-middle">
                <div id="st-save-button-border-left-top">
                  <div id="st-save-button-border-right-top">
                    <div id="st-save-button-border-left-bottom">
                      <div id="st-save-button-border-right-bottom">
                        <a id="st-save-button-link"
                           title="Click this button to save your page"
                           class="st-page-action-button-link"
                           href="#">Save</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <table id="st-preview-button" class="st-page-action-button">
        <tr>
          <td>
            <div id="st-preview-button-border-left-middle">
              <div id="st-preview-button-border-right-middle">
                <div id="st-preview-button-border-left-top">
                  <div id="st-preview-button-border-right-top">
                    <div id="st-preview-button-border-left-bottom">
                      <div id="st-preview-button-border-right-bottom">
                        <a id="st-preview-button-link"
                           title="Click this button to preview your page before saving it"
                           class="st-page-action-button-link"
                           href="#">Preview</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <table id="st-cancel-button" class="st-page-action-button">
        <tr>
          <td>
            <div id="st-cancel-button-border-left-middle">
              <div id="st-cancel-button-border-right-middle">
                <div id="st-cancel-button-border-left-top">
                  <div id="st-cancel-button-border-right-top">
                    <div id="st-cancel-button-border-left-bottom">
                      <div id="st-cancel-button-border-right-bottom">
                        <a id="st-cancel-button-link"
                           title="Click this button to cancel editing and discard your changes"
                           class="st-page-action-button-link"
                           href="#">Cancel</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <a href="#" id="st-mode-wysiwyg-button">Simple</a>
      <a href="#" id="st-mode-wikitext-button">Advanced</a>
      <a href="#" id="st-edit-tips" onclick="help_popup('index.cgi?action=refcard', 680);return false;">Edit Tips</a>
      <div class="st-actions-bar-spacer-clear">&nbsp;</div>
    </div>
  </div>
</div>

CSS Selectors

#st-editing-tools-bar
div.st-actions-bar-spacer
#st-editing-tools-edit

#st-save-button
table.st-page-action-button
#st-save-button-border-left-middle
#st-save-button-border-right-middle
#st-save-button-border-left-top
#st-save-button-border-right-top
#st-save-button-border-left-bottom
#st-save-button-border-right-bottom">
#st-save-button-link

#st-preview-button
table.st-page-action-button
#st-preview-button-border-left-middle
#st-preview-button-border-right-middle
#st-preview-button-border-left-top
#st-preview-button-border-right-top
#st-preview-button-border-left-bottom
#st-preview-button-border-right-bottom
#st-preview-button-link

#st-cancel-button
table.st-page-action-button
#st-cancel-button-border-left-middle
#st-cancel-button-border-right-middle
#st-cancel-button-border-left-top
#st-cancel-button-border-right-top
#st-cancel-button-border-left-bottom
#st-cancel-button-border-right-bottom
#st-cancel-button-link

a.st-page-action-button-link

#st-mode-wysiwyg-button
#st-mode-wikitext-button
#st-edit-tips