How to Style the Change Password Page on Wapkizs.com and Wapaxo.com?

If you build websites with a user system on Wapkizs.com or Wapaxo.com, you've probably seen the default password change page located at:

/site_chpass.html

This page is useful and practical, but many webmasters face a common issue: they can't directly edit the HTML to apply custom styling.

The Challenge: Locked HTML and Global Styles

The main difficulty is that the content of /site_chpass.html is generated automatically by the platform and doesn't allow direct HTML editing. This limits your ability to customize the visual layout and leaves the elements with the platform's default look.

Some webmasters try to style the password inputs directly like this:

input[type="password"] { /* your styles here */ }

However, this affects all password fields across the entire site, which can lead to conflicts or broken styles on other pages.

The Solution: Use the .chpass Class

The good news is that the change password page has a consistent structure. All elements are wrapped inside a <div> with the class chpass. Inside this container, there is a form with:

  • 3 password input fields (input[type="password"])
  • 1 submit button (input[type="submit"])

Example of the Generated Structure:

<div class="chpass">
<form method="post">
<input type="password" name="oldpass">
<input type="password" name="newpass">
<input type="password" name="confirmpass">
<input type="submit" value="Change Password">
</form> </div>

How to Style It Safely?

You just need to use CSS targeting the .chpass class. This way, your styles will apply only on the password change page.

Practical Example:

.chpass input[type="password"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; font-size: 16px; }
.chpass input[type="submit"] { background-color: #0066cc; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
.chpass input[type="submit"]:hover { background-color: #004d99; }

Final Tip

Use the power of CSS to match this page with the unique design of your website. With a few adjustments, you can turn a basic system page into a consistent part of your brand's look and feel.

Enjoyed the Tip?

If you like customizations for Wapkiz and Wapaxo, stay tuned to our blog for more tutorials! 🚀