WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#8606 closed enhancement (fixed)

Write page Category widget styling

Reported by: federico.bond Owned by:
Milestone: 2.8 Priority: low
Severity: minor Version: 2.7
Component: UI Keywords:
Focuses: Cc:

Description

The categories widget/panel in the Write page looks like it was made at the last minute. Uploaded current state and a proposed use of tabs following the style of the tabs used to switch between html and visual editor.

Attachments (3)

proposed-category-panel.png (3.6 KB) - added by federico.bond 5 years ago.
current-category-panel.png (3.3 KB) - added by federico.bond 5 years ago.
first-iteration.png (3.4 KB) - added by federico.bond 5 years ago.
Firefox Screenshot (Not mockup)

Download all attachments as: .zip

Change History (16)

comment:1 federico.bond5 years ago

Sorry. It was "Most Used" not "Most Popular" but you get the idea.

comment:2 sivel5 years ago

Can you add a patch to this ticket for the code modifications you made?

comment:3 federico.bond5 years ago

Sorry, it's just a mockup. I am fluent in XHTML/CSS and I will look into it but I haven't worked inside wordpress before.

comment:4 federico.bond5 years ago

I'm also not sure whether to use that styling or the plain gray one found in the same categories widget when you place it on the left column.

comment:5 federico.bond5 years ago

These are the styles I used. I made them look like the tabs that appear when you place the widget in the wider left column. Not sure where to place this modifications.

#category-adder H4
{
	margin-top: 4px;
	margin-bottom: 0px;
}
#categorydiv .ui-tabs-panel
{
	border: 3px solid #F1F1F1; 
}
UL#category-tabs
{
	margin-top: 12px;
}
UL#category-tabs LI
{
	padding: 5px 8px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-webkit-border-radius-topleft: 3px;
	-webkit-border-radius-topright: 3px;
}

Step by step:

#category-adder H4
This is the Add new category link. Just a small correction to get it centered

#categorydiv .ui-tabs-panel
Thick border similar to the one the widget has when you place it on the left column. Gray theme colors.

UL#category-tabs
Another small correction so that the tabs are not too close to the top border of the panel

UL#category-tabs LI
Some padding to enlarge the click area and make the links look like tabs, and rounded corner goodness. Don't know if we have to support other vendors.

federico.bond5 years ago

Firefox Screenshot (Not mockup)

comment:6 federico.bond5 years ago

ONLY TESTED IN FIREFOX

comment:7 federico.bond5 years ago

font-weight: bold; should also be added to UL#category-tabs LI.ui-tabs-selected to maximize consistency independently of the column where you place the widget.

comment:8 janeforshort5 years ago

  • Component changed from Administration to UI
  • Owner anonymous deleted
  • Priority changed from normal to low
  • Type changed from defect (bug) to enhancement

+1, but this is an enhancement, not a bug. Please be careful to choose the correct metadata on tickets to avoid slowing down developers.

comment:9 thee175 years ago

  • Owner set to thee17
  • Status changed from new to assigned

I'll attempt today to turn this to a diff.

comment:10 thee175 years ago

  • Owner thee17 deleted
  • Status changed from assigned to new

comment:11 azaozz5 years ago

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

(In [10301]) Categories postbox styling when in right sidebar, props federico.bond, fixes #8606 for 2.7

comment:12 azaozz5 years ago

  • Milestone changed from 2.7.1 to 2.8
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for trunk

comment:13 azaozz5 years ago

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

(In [10302]) Categories postbox styling when in right sidebar, props federico.bond, fixes #8606 for trunk

Note: See TracTickets for help on using tickets.