Make WordPress Core

Opened 20 months ago

Last modified 20 months ago

#57931 new enhancement

Add Border Radius to WP Dashboard Post Boxes

Reported by: generosus's profile generosus Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design-feedback 2nd-opinion has-patch
Focuses: ui, css Cc:

Description

Good Day!

WordPress' dashboard always looks nice and tidy. How about adding another enhancement to it?

Here goes: Add a border radius to the dashboard's post boxes with the following CSS Rule (or equivalent):

.postbox {
    border-radius: 8px!important;
}

Result: https://prnt.sc/Nm40unbF7R-c

Special Note: If approved, the change will have to address the small line extension that appears when the post boxes are collapsed. Should be easy to fix.

Details: https://prnt.sc/DJegHoxdPold

The above will not only add a "cool factor" to the WordPress' dashboard, but also bring it in line with current website design trends.

Looking forward to your approval and integration.

Cheerio!

Change History (6)

#1 @sabernhardt
20 months ago

  • Component changed from Formatting to Administration
  • Focuses ui css added
  • Summary changed from Enhancement Request | Add Border Radius to WP Dashboard Post Boxes to Add Border Radius to WP Dashboard Post Boxes
  • Version trunk deleted

I do not object to rounding the corners, but we would need to do that without !important (#26350).

#2 @generosus
20 months ago

Hey @sabernhardt,

I'll buy that :)

Thank you!

#3 @generosus
20 months ago

Hey @sabernhardt,

I would also like to recommend adding a border radius to the screen-meta (dropdown) element as follows:

#screen-meta {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#screen-meta-links .show-settings {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

Result (Collapsed): https://prnt.sc/yFcepHpB6iaD
Result (Expanded): https://prnt.sc/zWC243JTdhMO

Special Note: In the expanded mode, the "Help" tab will require a minor CSS clean-up.
Details: https://prnt.sc/t5jbYepOOYab

Thank you!

Version 2, edited 20 months ago by generosus (previous) (next) (diff)

This ticket was mentioned in PR #4240 on WordPress/wordpress-develop by bijit027.


20 months ago
#4

  • Keywords has-patch added

Added border radius to WP dashboard post boxes and screen-meta (dropdown)

Trac ticket: https://core.trac.wordpress.org/ticket/57931

#6 @generosus
20 months ago

Update:

The CSS Rules provided below fix the small line extension that appears when the post boxes are collapsed. They should also be added to the affected patch(es) (with or without !important-- whatever works).

.postbox.closed {
    border: 1px solid #c3c4c7!important;
    box-shadow: 0 1px 1px rgba(0,0,0,.04)!important; 
}

.postbox.closed .postbox-header {
    border-bottom: 0px!important;
}

Before Above CSS Rules Applied: https://prnt.sc/WwmNVWGOnSAV
After Above CSS Rules Applied: https://prnt.sc/c8vYltqi1o8A

Special Notes:

  1. It would be nice to come up with a CSS Rule that will add a border radius to the bottom-right corner of the Screen Options screen-meta box as noted here: https://prnt.sc/f_mF8BegYd5Q
  1. It would be nice to check all others WordPress admin sections (e.g., plugins) to see if any boxes would look better with a border radius.
Last edited 20 months ago by generosus (previous) (diff)
Note: See TracTickets for help on using tickets.