Home: Socialtext Style Customization Guide
Up: Styling The Settings
Previous: Settings Selector
Next: Styling the Popup Windows

HTML Snippet

While the forms for each of the setting options are different, they all share the same styles.

<td id="st-settings-section">
  <form method="post" action="index.cgi" enctype="application/x-www-form-urlencoded">
    <div id="st-settings-save">
      <input type="submit" name="Button" value="Save"  class="standard-button-submit" />
      <input type="reset" name="Button" value="Cancel"  class="standard-button-cancel" />
      <div class="message"></div>
    </div>
    <input type="hidden" name="action" value="users_settings" />
    <input type="hidden" name="preferences_class_id" value="" />
    <table id="">
      <tr>
        <td colspan="4"><strong>Name</strong></td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">Email:</td>
        <td width="64%" class="none">
          <strong>brandon.noard@socialtext.com</strong>
        </td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">First Name:</td>
        <td width="64%" class="none">
          <input type="text" name="first_name" size="30" value="Brandon" />
        </td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">Last Name:</td>
        <td width="64%" class="none">
          <input type="text" name="last_name" size="30" value="Noard" />
        </td>
      </tr>
      <tr>
        <td colspan="4">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="4">
          <strong>Change Password</strong>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          New passwords must be at least 6 characters long. A dialog box will pop
          up after your password is changed. Use your email address and new
          password to log in again.
        </td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">Current password:</td>
        <td width="64%" class="none">
          <input type="password" name="old_password" size="30" value=""maxlength="30" />
        </td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">New password:</td>
        <td width="64%" class="none">
          <input type="password" name="new_password" size="30" value=""maxlength="30" />
        </td>
      </tr>
      <tr>
        <td width="30%" class="none" align="right">Type new password again:</td>
        <td width="64%" class="none">
          <input type="password" name="new_password_retype" size="30" value=""maxlength="30" />
        </td>
      </tr>
    </table>
  </form>
</td>

CSS Selectors

#st-settings-section
#st-settings-save
input.standard-button-submit
input.standard-button-cancel
#st-settings-section tr
#st-settings-section td
#st-settings-section td strong
div.message
td.none