WordPress.org

Making WordPress.org

Opened 5 years ago

Closed 3 years ago

#630 closed task (fixed)

Improve the design of the callout boxes (shortcodes)

Reported by: samuelsidler Owned by: coffee2code
Milestone: Priority: lowest
Component: Handbooks Keywords: ui-feedback has-patch needs-testing needs-ui has-screenshots
Cc:

Description

We should have a designer look through the design of our callout boxes and improve them. That probably means changing the colors slightly, change the icon of the "alert" one (to what? dunno), and removing the default text so we can use them more generically. For example, I want to use "Alert" sometimes as a Draft box.

Attachments (2)

630.diff (3.4 KB) - added by McGuive7 5 years ago.
Updated markup and CSS for callout shortcodes
meta-630.comparison.png (56.4 KB) - added by coffee2code 3 years ago.
Comparison of existing callout boxes vs proposed changes.

Download all attachments as: .zip

Change History (10)

#1 @DrewAPicture
5 years ago

Alert: This is a draft.

Seems pretty straightforward to me.

#2 @McGuive7
5 years ago

See #1 for previous discussion.

@McGuive7
5 years ago

Updated markup and CSS for callout shortcodes

#3 @McGuive7
5 years ago

  • Keywords has-patch needs-testing added

One other thing to note is that I was noticing extra <p> tags being generated when testing this locally, in two places:

  1. Wrapping the entire <div class="callout"> element.
  2. Empty <p> tags being inserted in weird places.

I wouldn't think my modifications to the shortcode PHP would cause this (just removed the icon <div> and replaced with a CSS background image), so I think it may have been something wonky caused by manually copying and pasting header and footer code into my local files. Anyhow, I suggest someone else check this code with an install they know to be working properly. Thanks.

#4 @melchoyce
4 years ago

  • Keywords needs-ui added

This ticket was mentioned in Slack in #meta by sam. View the logs.


3 years ago

@coffee2code
3 years ago

Comparison of existing callout boxes vs proposed changes.

#6 @coffee2code
3 years ago

  • Owner set to coffee2code
  • Status changed from new to accepted

I've attached meta-630.comparison.png which compares the current appearance versus the changes implemented as part of selectively applying parts of 630.diff.

The changes to the existing implementation are:

My tweaks from 630.diff:

  • Explicit top position for call-out.
  • Restore removal of margin-bottom for p tags in a callout box, and add margin-top for subsequent paragraphs.
  • Did not enact any color changes (@samuelsidler has indicted the existing colors have since been changed as desired).

#7 @DrewAPicture
3 years ago

  • Keywords has-screenshots added

#8 @coffee2code
3 years ago

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

In 2489:

Handbook plugin: Improve the design of the callout boxes.

  • Only display prefix denoting the type of callout box being shown as screen-reader-text.
  • Use dashicons fully through CSS rather than via HTML placeholder.
  • Use flag dashicon for alerts.
  • Some padding tweaks.

Props McGuive7.
Fixes #630.

Note: See TracTickets for help on using tickets.