Skip to content

Update wp-activate styling; add error class #10823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joedolson wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

Update wp-activate styling; add error class #10823

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc99a10
Update wp-activate styling; add error class
joedolson Jan 29, 2026
0334b29
Update selector and order
joedolson Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/wp-activate.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,12 +101,16 @@ function do_activate_header() {
function wpmu_activate_stylesheet() {
?>
<style>
.wp-activate-container { width: 90%; margin: 0 auto; }
.wp-activate-container form { margin-top: 2em; }
#submit, #key { width: 100%; font-size: 24px; box-sizing: border-box; }
.wp-activate-container { max-width: 1280px; width: 100%; margin: 0 auto; text-align: start; background: #fff; color: #333; padding: 1.5rem; box-sizing: border-box; }
Copy link

@sabernhardt sabernhardt Jan 30, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These screenshots are all at 1200 pixels wide (less than the container's max-width).

  • The white background is problematic with Twenty Twenty-One's dark mode. The input border and focus outline are very light.
  • Twenty Fifteen still has the full-width submit button because it specifies 100% width.
  • The error paragraphs have a background color without any padding.
Theme Before With PR
Twenty Fifteen Twenty Fifteen, showing activation key, before

Twenty Fifteen, error message, before		 Twenty Fifteen, showing activation key, with patch

Twenty Fifteen, error message, with patch
Twenty Twenty-One (light) Twenty Twenty-One light mode, showing activation key, before

Twenty Twenty-One light mode, error message, before		 Twenty Twenty-One light mode, showing activation key, with patch

Twenty Twenty-One light mode, error message, with patch
Twenty Twenty-One (dark) Twenty Twenty-One dark mode, showing activation key, before

Twenty Twenty-One dark mode, error message, before		 Twenty Twenty-One dark mode, showing activation key, with patch

Twenty Twenty-One dark mode, error message, with patch
Twenty Twenty-Five (Midnight) Twenty Twenty-Five, showing activation key, before

Twenty Twenty-Five, error message, before		 Twenty Twenty-Five, showing activation key, with patch

Twenty Twenty-Five, error message, with patch

.wp-activate-container form { margin: 1.5rem 0; }
.wp-activate-container a { color: #2271b1; }
.wp-activate-container p { font-size: 18px; }
#submit, #key { font-size: 24px; box-sizing: border-box; }
#key { width: 100%; }
#submit { width: auto; }
#language { margin-top: 0.5em; }
.wp-activate-container .error { background: #f66; color: #333; }
span.h3 { padding: 0 8px; font-size: 1.3em; font-weight: 600; }
.wp-activate-container .error { background: #f86; color: #333; }
span.h3 { font-weight: 600; }
</style>
<?php
}
Expand Down Expand Up @@ -166,7 +170,7 @@ function wpmu_activate_stylesheet() {
?>
<h2><?php _e( 'An error occurred during the activation' ); ?></h2>
<?php if ( is_wp_error( $result ) ) : ?>
<p><?php echo esc_html( $result->get_error_message() ); ?></p>
<p class="error"><?php echo esc_html( $result->get_error_message() ); ?></p>
<?php endif; ?>
<?php
} else {
Expand Down
Loading