UI Style Update

[jane]

Per discussion and comps on make.wordpress.org/ui, going for a little style refresh in 3.2.

First pass for the new styles. Nav menus, widgets, and list tables need love. So do down arrows. And the blue theme, which looks... a little wonky right now.

These images should be added to/modified in wp-admin/images.

In [17800]:

Big UI style update. props koopersmith. see #17324

In [17801]:

Style tweaks for the "Search Engines Blocked" notice. see #17324

• The "gutter" horizontal rule in the menus needs work.
• We need a "collapse menu" thing like in the comp
• Theme inactive tab needs more contrast

Keep working on this ticket. Nice work, Koop!

This looks funky:

"Configure" link overlaps. And the arrow seems too far to the left.

Replying to markjaquith:

"Configure" link overlaps. And the arrow seems too far to the left.

I thought we were going to get rid of the open/close function. That would lose the arrows.

Few notes. Just minor stuff for now.

• Arrows for toggling menu items and postboxes don't change cursor to show it's clickable (menu one looks on purpose, what's the reasoning on not showing it's clickable)? -- I can do a quick patch, just wanted to know why it was done on purpose.
• Arrow on post box is aligned weird (too far to left or close to the border)? Just saw Mark posted this as well
• Favorites menu uses div's inside the h2 making the dashboard invalid HTML.
• When the menu is collapsed and subpages displayed in the flyout, no border/background/shadow to differentiate from rest of the page. Simple examples:  http://d.pr/2SZB or  http://d.pr/y6L2

I'm going to do more testing on different browsers in a bit for some extra tests.

Widget styling needs fixing. Widget titles are changed to the new style but the holder still uses the old postbox style.  http://d.pr/xRNR

Edit: Also inactive widgets need fixing  http://d.pr/WoBu

I'll do patches for these if someone doesn't get to them first.

Shouldn't the admin bar pointer and the menu pointer be harmonized somehow:

Submenus with the same name look very redundant now:

The long-title class when applied to siteheading mucks up the header a bit. Test with a long site name.

There's no separator between Settings and the first top-level menu added by plugins.

Just a reminder to contributors that this patch went in without being "finished," so it might be worth waiting a day for Daryl to finish getting things put in before listing small details. We went with the broad stroke for v1 to get it up there so people could see progress, but have a whole bunch of stuff to finish up before we start debating details.

I made  a thread on UI blog for people to make UI suggestions, ask questions, debate colors, positioning, size, etc. related to this ticket. This way, we can keep the ticket relatively clean for tasks that need to be completed that have been approved by leads, and/or for reporting bugs with the new code. Thanks.

Replying to andrewryno:

Widget styling needs fixing. Widget titles are changed to the new style but the holder still uses the old postbox style.  http://d.pr/xRNR

Edit: Also inactive widgets need fixing  http://d.pr/WoBu

I'll do patches for these if someone doesn't get to them first.

Daryl is still working on getting all the styling in. Wait a day and see what needs doing. First version went in incomplete on purpose to get basic layout in.

Replying to scribu:

Submenus with the same name look very redundant now:

Would there be any support for the core team for a way to disable the redundant submenu page link via a hook?

Would there be any support for the core team for a way to disable the redundant submenu page link via a hook?

Lets get the UI refresh finalised before getting into adding hooks for things

Replying to dd32:

Would there be any support for the core team for a way to disable the redundant submenu page link via a hook?

Lets get the UI refresh finalised before getting into adding hooks for things

I asked the question to determine if it was worth the effort to submit another ticket for a hook; an opinion that it might be considered would not block UI refreshing in any way that I can see. A simple "yes", "no" or even "maybe" would suffice.

Matching Blue Theme CSS to Grey

I've been following along with Daryl's changes and applying the changes to the Blue Admin. (colors-classic.dev.css) I've attached a diff (blue_update.patch) of what I've modified so far. The colors-fresh.dev.css and the colors-classic.dev.css now match line-for line. There is still more tweaking to be done with colors/borders/menus/widgets. I will post up for a review on the blue changes on make.wordpress.org/ui after the grey is set in stone. So, as we go along, I'll be replacing the patch with modifications following daryl's modifications.

Screenshot:  http://cl.ly/302k273J0e1l0l1B3v1k

In [17815]:

Improve collapsed menu styling. see #17324.

Fixes sidebar background not reaching past footer when scrollbars are visible

In [17817]:

Updated list table styles. First pass, see #17324.

Please, for the love, put Helvetica Neue before Arial in the base font stack. We're better than Arial-as-default.

body, td, textarea, input, select{
  font-family: 'Helvetica Neue', Arial, 'Bitstream Vera Sans', Helvetica, Verdana, sans-serif;
}

In [17818]:

Improve dashboard styles and bump. see #17324.

In [17820]:

Compromise between a mix of razor-sharp corners and gratuitously over-rounded "safety corners" by standardizing around 3px border-radius (mouse-nibbled corners). see #17324

Fave actions pillbox is too small of a click target. Observe (pink area is the clickable area):

The size of the whole thing isn't necessarily too small, but that clickable area sure is.

Related: #17341

Love it. Know this is still WIP, but the Collapse Menu button on the bottom isn't actually functional yet. Had to hunt for the correct spot in the thick grey separators.

In [17827]:

Add user actions dropdown to admin header. see #17324.

In [17828]:

Bump. see #17324 and [17813].

Replying to tmtrademark:

...the Collapse Menu button on the bottom isn't actually functional yet. Had to hunt for the correct spot in the thick grey separators.

It was a caching issue—fixed in [17828].

In [17829]:

Move 'Search Engines Blocked' to 'Right Now' from admin header. see #17324.

In [17833]:

Reduce admin h2 (page title) size. Use smaller icons. see #17324.

In [17834]:

Increase clickable area within favorite actions button. Props duck_. see #17324.

In [17835]:

Some more mouse-nibbled corners. see #17324

The Plugins nav menu does't have the colored icon when active (only on hover).

Screenshot:  http://cl.ly/0M1N310U1d062l3G1h2z

In [17839]:

More mouse-nibbled corners. see #17324

In [17844]:

Improve 'howdy user' dropdown trigger, delay, and animation. see #17324.

That's a very rough beginning toward moving what is now in the first h2 of each screen up into the h1. The blog name is now moved over under the Howdy. set_screen_attribute() allows setting the title, sub_title, icon class, and other bits for the current screen. Plugins can use this off of a load-* hook.

Tweakage

This style updates looks great. But I think Contextual Help and Screen Options link wrappers don’t fit with new style, so I just changed few things to fit new style

Screenshot:  http://i.imgur.com/lnnH8.jpg

In [17848]:

Increase size of blog title in admin header. see #17324.

In [17849]:

Remove favorite_actions() from h2s. Restore Add New buttons. see #17324

Move blog name out of visual hierarchy

In [17850]:

Lighten the big menu separators and make them 1px taller. see #17324

In [17851]:

Trigger 'howdy' dropdown by click instead of hover. see #17324.

Updated the .stuffbox class with mouse nibbled borders and #f9f9f9 background.

The .stuffbox class was missing the corners and bg color. (Example of these boxes on the "Add New Link Page". 17324.fixed-stuffbox-border-bg.diff fixes that.

Fixes active plugin icon. Was grey, should be colored on active.

In [17853]:

Improve 'howdy' dropdown styles, add 'your profile' item and no-js. see #17324.

In [17854]:

Font-size tweaks. see #17324.

In [17855]:

Increase size of page title. see #17324.

Regarding the Screen Options and Help dropdowns, it might be useful to add a "close" link to the top right of those sections. As it is now, you have to move the mouse quite a bit to close those sections, especially if the screen is very long.

In [17858]:

change the padding on .wrap h2 by one pixel to make it align with the icon better. see #17324

In [17859]:

Embiggen fonts. see #17324.

If the screen_icon size change is staying is the plan to change the screen_icon class to icon28 instead of icon32? That way plugins could provide icons for both 3.2 and pre 3.2. Or is that being accounted for some other way?

My hit list:

• Change the menu drop shadow to be a gradient, with black color and low opacity (instead of grey color and medium opacity).
• Provide a similar drop shadow on the active top level menu item grey arrow
• Fix the "Configure" links on dashboard meta boxes
• Improve meta box style with gradient, as discussed elswhere
• Fix meta box arrow alignment

In [17861]:

Add new metabox styles. see #17324.

In [17862]:

Gradients for everyone! Provide additional browser prefixes (including old webkit syntax) and clean up syntax errors. see #17324.

In [17865]:

Fix footer whitespace/clearing issues, support two-line footer for low widths. see #17324.

added mouse nibbles to Widget boxes.

Updates arrows on widget boxes.

In [17866]:

Menu tweaks. Bold top level items, less padding on submenu items. Props iammattthomas. see #17324.

In [17868]:

Editor toolbar/textarea styling. Props chexee. see #17324, #15986.

In [17869]:

Widgets: nibble the corners and use new arrows. Props chexee. see #17324.

In [17870]:

New gradient menu shadow. see #17324.

There seems to be an extra line added under the Howdy dropdown, but only for super admins:  http://awesomescreenshot.com/06aculc15

Patch for header updates I've been working on with Jane today. Smaller site title, larger page title, adjusted style for user-info dropdown, new add-new-h2 style, and removed button class from all add-new-h2 links.

Screenshot of changes in 17324.header.diff

In [17872]:

Admin Header 2: The Return of 32px Icons. Props, iammattthomas. see #17324.

In [17874]:

Tighten list table styles. see #17324.

In [17876]:

Prevent content from colliding with footer. see #17324.

In [17881]:

Menu style updates. see #17324.

In [17882]:

Widgets style refresh. see #17324.

In [17885]:

Style upload form on custom header/background pages consistently. see #17324.

removes the borders between the minor publishing actions in the publish box, as they were too faint against the bg. also adds a 1px #fff shadow to the border above major publishing actions.

In [17892]:

Improve publish box styles. Props chexee. see #17324.

In [17893]:

Restore lines in publish box, speed up misc-action edit animations. see #17324.

In [17896]:

Fix padding on 'save draft' button. see #17324.

Erm... were's the network admin link?

I can't get a screenshot to show the cursor, but in [17861], the three boxes on the Add/Edit Links page Name, Web Address, and Description show the move cursor even though those three boxes are not moveable. The code responsible is:

.widget .widget-top,
.postbox h3,
.stuffbox h3 {
	margin-top: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	cursor: move;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

My attached patch fixes the problem and I don't see any adverse effects from removing .stuffbox h3 from this CSS code block.

Remove cursor: move from non-movable boxes on the Add/Edit Links page.

Screen Options and Help

Howdy dropdown woth Profile and Logout

Blue Admin style has some problems with readability beacuse of bad background on Screen Options, Help and the "Howdy-dropdown". See screenshots as attachments.

(may be I should have added the screenshot images inline instead of as attachmets, sorry)

the blue admin style is not ready. see known issues in  http://wordpress.org/news/2011/05/wordpress-3-2-beta-1/

New Arrows for Blue Admin

New Dark Arrows for Blue Admin

Blue Admin Update

Uploaded the new arrows for Blue Admin.. and the latest pass at the patch.

Ugh, are commit messages not working again? Manual:

In [17924]:

Blue admin theme updates for the new UI style. props saracannon. see #17324

update on the blue as well as porting over colors from nav-menus.css

Attached a patch to update the top right drop-down menu in Blue. This patch also ports over color styles from nav-menu.css over to colors-fresh.css and colors-classic.css. Still some color modifications left to do in colors-classic.css on the menus. Also, cleaned up the formatting of nav-menus.css a bit while I was at it.

revised update on the blue as well as porting over colors from nav-menus.css

Added a revised version of the patch. Now it also includes color edits to the screen options, darken body text color so its not blue.

In [17930]:

Blue theme revisions. Migrate colors from nav-menu.css to colors-*.css. Props saracannon. see #17324.

In [17935]:

Center admin menu icons when menu is folded, see #17324

Originally in #17389 - RTL for all of the above

I thought this ticket was closed so I created a new ticket for small visual bug. See #17465

li.wp-menu-separator still contains an anchor tag ( a.separator ) that targets ?unfoldmenu=1 resulting in a page reload. The cursor no longer changes to the '➞' or '←' types, indicating that you can fold/unfold anymore, so do these still need to be links? I love being subscribed to this thread <3

In [17941]:

RTL styles, props yoavf, see #17324

In [17943]:

Remove links from the menu separators, see #17324

gradients for login

added patch for gradients for login screen, including ie10 and opera

#adminmenuback is not displayed properly in IE7.

Attached a patch for this ie7-fix.diff

r17943 introduces some bugs with admin menu separators and plugins that add additional menu items (Jetpack, BuddyPress, bbPress)

See #17484 for screen shots and a patch.

In [17963]:

IE7 fixes, see #17324

In [17964]:

More IE7 fixes, see #17324

Is there any reason why, when hovering over the metabox collapse arrow, the cursor is not made into a pointer? It's meant to be clicked, after all.

See collapse-pointer.diff .

Related to scribu: #16440

Replying to scribu:

I would rather leave it as cursor:default; but make the arrow go darker on hover. In all browsers the pointer is used for links, the arrow (default) cursor is used for controls and all default controls (look at the Submit button below) have hover effect.

the arrow (default) cursor is used for controls and all default controls

Yeah, except that's not the case in WP: the widget controls have cursor: pointer on hover, as well as all the buttons.

cursor: pointer; makes more sense to me, which is why I posted the other ticket. A change to a darker color could work, but it just needs to be consistent. I think the way it works on the widget screen, as scribu pointed out, is great. I think all postboxes should act the same way.

Related: #17534

In my opinion we should standardize the behaviour of the collapse arrows.

• On the navigation the arrow is shown only when the menu is open and hidden when it's closed.
• On the metabox the arrow is hidden when the box is open and closed, so only visible on hover.
• The arrow for screen options and contextual help is always there. The orientation will be changed on a click (Box open = arrow up, box closed = arrow down).
• On the new dropdown menu for user info the arrow is always the same (arrow down).

They're all different interactions and user experiences, so let's not conflate them.

Please report further issues on new tickets. Marking this feature ticket as resolved.

In [18173]:

Some CSS cleanup and tuning, see #17324

In [18223]:

Refresh login form styles to match admin style refresh. Props iammattthomas. see #17324.

In [18236]:

The Lightening, Part One: Lighten tabs UI on new post and menus screens. see #17324.

In [18238]:

Improve contrast on login screen by darkening shadow. Props iammattthomas. see #17324.

In [18258]:

The Lightening, Part 2: Return of the Luminous Hex Codes. Make the admin styles a bit brighter. see #17324.