Home: Socialtext Style Customization Guide
Up: Styling The Lightboxes
Previous: Upload Files Lightbox (View mode)
Next: Common Elements

---

HTML Snippet

<div style="display: block; height: 618px;" id="st-tagqueue-interface">
  <form onsubmit="return false;">
    <div id="st-tagqueue-overlay" class="popup-overlay"></div>
    <div id="st-tagqueue-dialog">
      <div id="st-tagqueue-title">Add Tags</div>
      <p id="st-tagqueue-message">Enter a tag and click "Add tag". The tag will be saved when you save the page.</p>
      <div id="st-tagqueue-list">
        <span class="st-tagqueue-listlabel">Tags to apply: </span>
        <span class="st-tagqueue-taglist-name">Tagging&nbsp;
          <a href="#" title="Remove Tagging from the queue" class="st-tagqueue-taglist-delete">[x]</a>
        </span>
      </div>
      <p id="st-tagqueue-tagprompt">Tag:&nbsp;
         <input id="st-tagqueue-field" name="tagfield" class="st-tagqueue-input" type="text">
      </p>
      <div id="st-tagqueue-suggestion">
        <span class="st-tagqueue-hint">Suggestions: </span>
        <span id="st-tagqueue-suggestionlist">
          <a href="#" title="Add New Feature to page" class="st-tags-suggestion">New Feature</a>
        </span>
      </div>
      <div id="st-tagqueue-buttons">
        <div id="st-tagqueue-close">
          <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-tagqueue-closebutton" href="#" title="">Done</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="st-tagqueue-addbutton">
          <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-tagqueue-submitbutton" href="#" title="Click this button to add your tag">Add another tag</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
    <div id="st-tagqueue-holder" style="display: none;"></div>
    <div id="st-tagqueue-listtemplate"><!-- template --></div>
    <textarea id="st-tagqueue-suggestiontemplate" class="st-jst-template">
      <!-- template -->
    </textarea>
  </form>
</div>

CSS Selectors

Refer to Standard Button for the selectors for the buttons.

#st-tagqueue-interface
#st-tagqueue-overlay
div.popup-overlay
#st-tagqueue-dialog
#st-tagqueue-title
#st-tagqueue-message
#st-tagqueue-list
span.st-tagqueue-listlabel
span.st-tagqueue-taglist-name
a.st-tagqueue-taglist-delete
#st-tagqueue-tagprompt
#st-tagqueue-field
input.st-tagqueue-input
#st-tagqueue-suggestion
span.st-tagqueue-hint
span.st-tagqueue-suggestionlist
a.st-tags-suggestion
#st-tagqueue-buttons
#st-tagqueue-close
#st-tagqueue-addbutton