Home: Socialtext Style Customization Guide
Up: Styling The Lightboxes
Previous: Save Page As Lightbox
Next: Upload Files Lightbox (Edit Mode)

HTML Snippet

<div id="st-newpage-duplicate">
  <form onsubmit="return false;">
    <div id="st-newpage-duplicate-overlay" class="popup-overlay"></div>
    <div id="st-newpage-duplicate-interface">
      <div id="st-newpage-duplicate-title">Page Already Exists</div>
      <p class="st-newpage-duplicate-prompt">
        There is 
        <span id="st-newpage-duplicate-emphasis">already a page</span> 
        named 
        <a id="st-newpage-duplicate-link" href="#" target="">XXX</a>. Would you like to:
      </p>
      <p class="st-newpage-duplicate-option">
        <input type="radio" name="st-newpage-duplicate-option" id="st-newpage-duplicate-option-different" value="different"/> 
        Save with a different name: 
        <input id="st-newpage-duplicate-pagename" size="40" type="text" name="pagename"/>
      </p>
      <p class="st-newpage-duplicate-option">
        <input type="radio" name="st-newpage-duplicate-option" id="st-newpage-duplicate-option-suggest" value="suggest"/> 
        Save the page with the name 
        "<span id="st-newpage-duplicate-suggest">XXX</span>"
      </p>
      <p class="st-newpage-duplicate-option">
        <input type="radio" name="st-newpage-duplicate-option" id="st-newpage-duplicate-option-append" value="append"/> 
        Append your text to the bottom of the existing page named: 
        "<span id="st-newpage-duplicate-appendname">XXX</span>"
      </p>
      <div id="st-newpage-duplicate-buttons">
        <table width="100%" border="0">
          <tr>
            <td align="right">
              <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-newpage-duplicate-cancelbutton" href="#" title="">Cancel</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
            <td width="70px" align="right">
              <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-newpage-duplicate-okbutton" href="#" title="">Ok</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </form>
</div>

CSS Selectors

See Standard Button for the CSS selectors for the buttons.

#st-newpage-duplicate
#st-newpage-duplicate-overlay
div.popup-overlay
#st-newpage-duplicate-interface">
#st-newpage-duplicate-title">Page Already Exists</div>
p.st-newpage-duplicate-prompt
#st-newpage-duplicate-emphasis
#st-newpage-duplicate-link
p.st-newpage-duplicate-option
#st-newpage-duplicate-option-different
#st-newpage-duplicate-pagename
#st-newpage-duplicate-option-suggest
#st-newpage-duplicate-suggest
#st-newpage-duplicate-option-append
#st-newpage-duplicate-appendname
#st-newpage-duplicate-buttons
#st-newpage-duplicate-cancelbutton
#st-newpage-duplicate-okbutton