Navigation Bar


Home: Socialtext Style Customization Guide
Top: Common Elements
Prev: Standard Button
Next: Socialtext Attribution


navigation-section.jpg

The navigation section is at the top of the page and contains both a Nav Bar and a Subnav Bar.

nav-bar.jpg

You can control the style and display of the right hand menu using the #st-wikinav-setting, #st-wikinav-login, #st-wikinav-register, #st-wikinav-logout and #st-wikinav-help selections. The HTML snippet below does not show the log in and register options.

HTML Snippet

<div class="st-wiki-nav">
  <div class="st-wiki-nav-right">
    <div class="st-wiki-nav-left">
      <div class="st-wiki-nav-content">
        <div class="st-wiki-nav-actions">
          <span id="st-wikinav-setting"><a href="?action=users_settings">Settings</a></span>
          <span id="st-wikinav-logout"> - <a href="/nlw/submit/logout">Log out</a></span>
          <span id="st-wikinav-help"> - <a href="/help/index.cgi?socialtext_documentation">Help</a></span>
        </div>
        <div id="st-home">
          <a id="st-home-link" href="?">Home</a>
        </div>
        <form id="st-search-form" method="get" action="index.cgi">
          <input id="st-search-term" type="text" name="search_term" value="New search" />
          <input type="hidden" name="action" value="search" />
          <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-search-submit" href="#" title="Click this button to perform your search">Search</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </form>
        <br clear="both" />
      </div>
    </div>
  </div>
</div>

CSS Selectors

.st-wiki-nav
.st-wiki-nav-right
.st-wiki-nav-left
.st-wiki-nav-content
.st-wiki-nav-actions
.st-wiki-nav-actions a
#st-home
#st-home-link
#st-search-term
#st-wikinav-setting
#st-wikinav-setting a
#st-wikinav-login
#st-wikinav-login a
#st-wikinav-register
#st-wikinav-register a
#st-wikinav-logout
#st-wikinav-logout a
#st-wikinav-help
#st-wikinav-help a


subnav-bar.jpg

HTML Snippet

<div id="st-wiki-subnav" class="st-wiki-subnav-dashboard">
  <div id="st-wiki-subnav-left">
    <span class="st-wiki-subnav-label">Quick jump:&nbsp;</span>
      <a id="st-wiki-subnav-link-whats-new" href="?action=recent_changes">What's new</a>
      -
      <a id="st-wiki-subnav-link-weblogs" href="?action=weblog_display">Weblogs</a>
    </div>
    <div id="st-wiki-subnav-right">
      <br style="clear: both; height: 1px;" />
    </div>
  </div>
</div>



CSS Selector

div.st-wiki-subnav-dashboard
#st-wiki-subnav-left
span.st-wiki-subnav-label
#st-wiki-subnav-link-whats-new
#st-wiki-subnav-link-weblogs
#st-wiki-subnav-right