WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#15154 closed enhancement (fixed)

Generalizing styling for "Manage Themes" / "Install Themes" tabs

Reported by: chrisjean Owned by:
Milestone: 3.1 Priority: normal
Severity: normal Version: 3.1
Component: UI Keywords: has-patch
Focuses: Cc:

Description

The tabs present in Appearance > Themes pages are a very nice design element. I recently tried to recreate this in some editors that I'm building to keep consistency with the present WP UI, but I found that one specific styling selector was too specific to the application to allow for generic use of the tabs.

The problem specifically relates to the following rule:

.themes-php .wrap h2, .theme-install-php .wrap h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0;
}

This rule applies the bottom border to complete the design of the tabs; however, the selectors are completely specific to the pages the tabs are currently used on in core. My attached patch simply changes this to a more generic selector and adds the new class to the <h2> wrapper around the tabs. The new rule is as follows:

h2.nav-tab-wrapper {
    border-bottom: 1px solid #ccc;
    padding-bottom: 0;
}

The new class is nav-tab-wrapper. I considered using nav-tab-bar but decided on using wrapper since it stays consistent with the existing nav-tabs/nav-tabs-wrapper naming scheme used for the Menus editor.

Attachments (2)

nav-bar-style-update.diff (5.4 KB) - added by chrisbliss18 4 years ago.
nav-bar-style-update.2.diff (4.8 KB) - added by chrisbliss18 4 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 @chrisbliss184 years ago

Patch updated to refresh the CSS modification as well as to update the network files that have been updated to use the tabs.

comment:2 @chrisbliss184 years ago

Patch refreshed again to not include the unnecessary minified CSS file.

comment:3 @chrisbliss184 years ago

nav-bar-style-update.2.diff attached file (sorry, should have been a replacement) gets rid of the changes to the newlines at the ends of the files.

comment:4 @ryan4 years ago

  • Milestone changed from Awaiting Review to 3.1

comment:5 @ryan4 years ago

  • Resolution set to fixed
  • Status changed from new to closed

(In [15962]) Generalize seletion for h2 and h3 tabs. Props chrisbliss18 fixes #15154

comment:6 @JohnONolan4 years ago

No backwards compat for old styles?

comment:7 @nacin4 years ago

.nav-tab et al remains.

I don't see why we need to be back compat with http://core.trac.wordpress.org/browser/tags/3.0.1/wp-admin/css/wp-admin.dev.css#L3753, which are purely core rules (and only add a bottom border, so people would have done this on their own if they implemented the tabs): .themes-php .wrap h2, .theme-install-php .wrap h2

comment:8 @JohnONolan4 years ago

I'm just saying, can't guarantee that no plugin/theme dev has called any of the following (for whatever reason), right?

.themes-php .wrap h2, .theme-install-php .wrap h2, .site-info-php .wrap h3, .site-options-php .wrap h3, .site-users-php .wrap h3, .site-themes-php .wrap h3

Just putting it out there :)

comment:9 @JohnONolan4 years ago

I'm just saying = I'm just enquiring, with the distinct possibility that I may be wrong

comment:10 @ryan4 years ago

(In [16243]) Resurrect nav-tab-wrapper. Lost in [16136]. see #15154

Note: See TracTickets for help on using tickets.