Web Design Tidbits #1: WordPress.org’s notification bar

speed up wordpress site tutorial

In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In this post, I’ll show you how to create a neat notification bar, as it’s currently in place on WordPress.org.

WordPress notification bar

A notification bar glued to the top of a page, informing you about a discount, new feature, or – in this case – a user survey, is a very unobtrusive way to catch your visitors attention. Opening  up Firebug, I replicated the notification bar as displayed on WordPress.org and saved it to Codepen:

web design tidbits showing off WordPress' notification bar

Recreating the notification bar

WordPress is mainly using div wrappers to style the bar, giving it its red background and top position. Defining a border-radius makes for the friendly rounded corners. I love how WordPress uses a nice #DDD color for the text, avoiding a harsh white-on-red combination.

Feel free to use my Codepen blurb for your own website! For the next Tidbits edition I’ll look at Kippt’s fancy buttons.