WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 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 8 years ago.
current-category-panel.png (3.3 KB) - added by federico.bond 8 years ago.
first-iteration.png (3.4 KB) - added by federico.bond 8 years ago.
Firefox Screenshot (Not mockup)

Download all attachments as: .zip

Change History (16)

#1 @federico.bond
8 years ago

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

#2 @sivel
8 years ago

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

#3 @federico.bond
8 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.

#4 @federico.bond
8 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.

#5 @federico.bond
8 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.bond
8 years ago

Firefox Screenshot (Not mockup)

#6 @federico.bond
8 years ago

ONLY TESTED IN FIREFOX

#7 @federico.bond
8 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.

#8 @janeforshort
8 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.

#9 @thee17
8 years ago

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

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

#10 @thee17
8 years ago

  • Owner thee17 deleted
  • Status changed from assigned to new

#11 @azaozz
8 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

#12 @azaozz
8 years ago

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

Reopen for trunk

#13 @azaozz
8 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.