How can I style a .htaccess password protection promp?

Question

I've just been messing around with setting a password protected directory on my webserver (so as to store hot copies of backups etc.) and was wondering if there's any way I may be able to style the password prompt that appears when a user attempts to access this page.

As it stands nobody will notice my nice little note, which makes me sad.

It seems to display similarly to a standard .js alert, though I've been unable to find a way to specify any css classes I may be able to alter, as the "alert" box does not show up in devtools, just the page bahind it:

Any advice / tips would be greatly appreciated.

Answer 1

You can't edit the authentication login box itself, it's different for every browser and its implemented as part of the browser's internals (for example, a snippet of Chrome's Code dealing with the Login Title: https://code.google.com/p/chromium/codesearch#chromium/src/chrome/app/generated_resources.grd&q=%22Authentication%20Required%22&sq=package:chromium&type=cs&l=3552).

What you can do is to create a custom php login page (with popover if you want) to display:

Redirect 401 "authorization required page" to custom page

Custom Login with htaccess through HTML/PHP

Replace Htaccess popup box with a html form?

Answer 2

Add this to .htaccess

ErrorDocument 401 /401.html

Then in your root directory (where your index.html is) make your own 401.html file. If you want to make the login work, however, you'll need a server side language like PHP.