Changeset 61798

Timestamp:

03/03/2026 05:20:09 PM (5 months ago)

Author:

joedolson

Message:

Admin: Reskin - Welcome Panel viewport fixes.

Ensure that the black background covers the entire width of the header on large screens, ensure that the dismiss button appears on small screens.

Props peterwilsoncc, ramonopoly, huzaifaalmesbah, marc4, shailu25, ocean90, krokodok, karinchristen, hubersen, stefanvelthuys, joedolson.
Fixes #64741.

Location:

trunk/src/wp-admin

Files:

• css/dashboard.css (modified) (4 diffs)
• includes/dashboard.php (modified) (1 diff)

trunk/src/wp-admin/css/dashboard.css

@@ -142 +142 @@
         overflow: auto;
         margin: 16px 0;
-        background-color: #c3c4c7;
-        border: 1px solid rgb(0, 0, 0, 0.1);
         border-radius: 8px;
         font-size: 14px;
@@ -267 +265 @@
 }
 
+.welcome-panel-header-wrap {
+        background-color: #151515;
+}
+
 .welcome-panel-header {
         box-sizing: border-box;
@@ -287 +289 @@
         align-self: flex-end;
         background: #ffffff;
+        border: 1px solid #c3c4c7;
+        border-top: 0;
+        border-radius: 0 0 8px 8px;
 }
 
@@ -1425 +1430 @@
 
         .welcome-panel .welcome-panel-close::before {
+                position: absolute;
                 top: 5px;
                 left: -35px;

trunk/src/wp-admin/includes/dashboard.php

@@ -2076 +2076 @@
         ?>
         <div class="welcome-panel-content">
-        <div class="welcome-panel-header">
-                <div class="welcome-panel-header-image">
-                        <?php echo file_get_contents( dirname( __DIR__ ) . '/images/dashboard-background.svg' ); ?>
+        <div class="welcome-panel-header-wrap">
+                <div class="welcome-panel-header">
+                        <div class="welcome-panel-header-image">
+                                <?php echo file_get_contents( dirname( __DIR__ ) . '/images/dashboard-background.svg' ); ?>
+                        </div>
+                        <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
+                        <p>
+                                <a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
+                                <?php
+                                        /* translators: %s: Current WordPress version. */
+                                        printf( __( 'Learn more about the %s version.' ), esc_html( $display_version ) );
+                                ?>
+                                </a>
+                        </p>
                 </div>
-                <h2><?php _e( 'Welcome to WordPress!' ); ?></h2>
-                <p>
-                        <a href="<?php echo esc_url( admin_url( 'about.php' ) ); ?>">
-                        <?php
-                                /* translators: %s: Current WordPress version. */
-                                printf( __( 'Learn more about the %s version.' ), esc_html( $display_version ) );
-                        ?>
-                        </a>
-                </p>
         </div>
         <div class="welcome-panel-column-container">