Page View Action Bar


Home: Socialtext Style Customization Guide
Up: Styling The Page View
Previous: Page Sidebar Tools
Next: Page Boxes


page-view-action-bar.jpg

The action bar contains two sections: Edit Tools and Page Tools.

Edit Tools

edit-tools.jpg

Edit tools contains two buttons: Edit Button and Comment Button

HTML Snippet

<div id="st-editing-tools">
  <div id="st-editing-tools-display">
  <!-- edit button -->
  <!-- comment button -->
  </div>
</div>

CSS Selectors

#st-editing-tools
#st-editing-tools-display

Page Tools

page-tools.jpg

Page tools contains a small menu implemented via <ul> and <li>.

HTML Snippet

<div id="st-pagetools">
  <ul class="level1">
    <li>
      <a title="Print this page" id="st-pagetools-print" href="JavaScript:window.print()">Print</a>
    </li>
    <li>
      <a title="Email this page" id="st-pagetools-email" 
         href="?action=email_page_popup;page_name=socialtext_style_customization_guide"
         onclick="query_popup('index.cgi?action=email_page_popup;page_name=socialtext_style_customization_guide',690,580); return false;">
         Email
       </a>
    </li>
    <li class="submenu"><span id="st-pagetools-tools">Tools</span>
      <ul class="level2">
        <li class="first">
          <a onclick="query_popup('index.cgi?action=duplicate_popup;page_name=socialtext_style_customization_guide',410,300); return false;" 
             href="index.cgi?action=duplicate_popup;page_name=socialtext_style_customization_guide">
             Duplicate Page
          </a>
        </li>
        <li>
          <a onclick="query_popup('index.cgi?action=rename_popup;page_name=socialtext_style_customization_guide',410,300); return false;" 
             href="index.cgi?action=rename_popup;page_name=socialtext_style_customization_guide">
             Rename Page
           </a>
        </li>
        <li >
          <a href="index.cgi?socialtext_style_customization_guide" 
             onclick="confirm_delete('socialtext_style_customization_guide'); return false">
             Delete Page
          </a>
        </li>
        <li class="separator">
          <a href="index.cgi?action=send_to_workspace_popup;page_name=socialtext_style_customization_guide" 
          onclick="query_popup('index.cgi?action=send_to_workspace_popup;page_name=socialtext_style_customization_guide'); return false;">
          Copy&nbsp;Page&nbsp;to&nbsp;Workspace
          </a>
        </li>
        <li>
          <a href="mailto:css-guide-2@www2.socialtext.net" title="css-guide-2@www2.socialtext.net">Email To This Workspace</a>
        </li>
        <li class="separator">
          <a href="mailto:css-guide-2@www2.socialtext.net?Subject=Socialtext Style Customization Guide"
             title="To: css-guide-2@www2.socialtext.net / Subject: Socialtext Style Customization Guide">
             Email To This Page
          </a>
        </li>
        <li class="separator">
          <a href="index.cgi?action=display_html;page_name=socialtext_style_customization_guide" target="_new">
             Export as HTML
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS Selectors

#st-pagetools
#st-pagetools ul.level1
#st-pagetools ul.level1 li
#st-pagetools ul.level1 li a
#st-pagetools ul.level1 li.submenu
#st-pagetools ul.level1 ul.level2
#st-pagetools ul.level1 ul.level2 li.first
#st-pagetools ul.level1 ul.level2 li
#st-pagetools ul.level1 ul.level2 li.separator
#st-pagetools-tools