Project Animating an alert sticky post

Here's a quick and simple one. You've got a client who has a good friend, who runs a non-profit educational organization's site, and they need a favor (meaning; do this "for free" please).

The organization's after-school care runs on the public school's schedule (as many kids are bussed over from different schools). If the public school system takes a snow day or some other emergency day, the after-school program also closes down. The organization does their best to notify people through their WordPress site.

Despite making it clear to parents that it's their responsibility to check the site, or call to find out the center's schedule, there's been a few misunderstandings with people who claim that they checked the site but "didn'tsee the closing alert". Apparently, even though they've been making the posts "sticky" so they stay at the top, the posts look awfully similar to the rest of the site's content.

You're happy to help (especially as they were referred to you by a client with well-paying gigs). It helps that this is a really easy fix. First off, you can simply add a few .sticky styles to their theme's style.css file, which makes the sticky posts stand out a lot more on the site.

They've made it clear they only use the "sticky" feature for daycare and other center alerts that affect the organization's center building being open to the public so you decide to do a quick Google search for "creative commons, public domain, alert icon svg" and download a very nice SVG file from http://commons. wikimedia.org/wiki/File:Nuvola_apps_important.svg.

Let's open that SVG file into Inkscape and size it down to 48 pixels wide to save a transparent .png of it (I took the liberty of adding a little blur to the shadow, but you may not want to). Name the PNG sticky-alert.png.

You then add the new sticky-alert.png image to their theme's image directory and update the stylesheet at the very bottom or below the existing .sticky class, if one exists, with a few class rules for the .sticky calls like so:

/*change the .sticky background */

.home .sticky { background-color: #ffff9c;}

/*add the icon to the entry-content div inside the sticky post*/

.home .sticky .entry-content{

background: url(images/sticky-alert.png) no-repeat 0 20px; }

/*nudge the paragraph and lists out of the way of the icon*/

.home .sticky .entry-content p,

.sticky .entry-content ul{margin-left: 6 0px;}

The following screenshot shows the newly re-styled sticky posts:

IB Snow day expected tomorrow, April 16th

A If tiie public school system takes a snow day as expected by the impending storm, oui community center and after school care will also be closed. We will update this alert in the event that we close tomorrow.

To find out if we're open:

■ Watch local news and radio for reports of the public school system taking a snow day. Or:

- Please call our office: 555-555-5555

Posted in Uncateqorized J Leave a comment | Edit

This is more than good enough. Now anyone going to the site regardless of JavaScript being available will certainly notice that. But hey, since you're poking around in the theme anyway, and you've decide to register jQuery, the jQuery Color plugin from the WordPress bundle, and include a custom-jquery.js page to their header.php file, you might as well add in this nice and simple few lines of code.

jQuery(function(){

jQuery('.home .sticky")

jQuery(function(){

jQuery('.home .sticky")

animate({'backgroundColor':

: ■#ff6600'

■slow")

animate({'backgroundColor':

: ■#ffff99'

■slow")

animate({'backgroundColor':

: ■#ff6600'

■slow")

animate({'backgroundColor':

: ■#ffff99'

■slow');

The previous code will fade our sticky posts from light yellow to darker orange, and then repeat it again for emphasis. The following image shows the post faded to darker orange:

Snow day expected tomorrow, April 16th

If the public school system takes a snow day as expected by the impending storm, our community center and after school care will also be dosed. We will update this alert in the event that we close tomorrow.

To find out if we're open:

Watch local news and radio for reports of the public school system taking a snow day. Or:

Check back at this site. Or; Please call our office: 555-555-5555

Again, a bit hard to see the animation in a book, but we just made sure that the alert .sticky post, upon loading, will fade up to orange (#ff99 0 0) and back down to the yellow (#ffffcc), and then repeat one more time for quite the "orange alert" effect.

The alert posts are very noticeable now and the organization can't thank you enough! Which is more than enough for your few minutes worth of work.

Search Engine Traffic Tactics

Search Engine Traffic Tactics

Within this guide you will learn such tactics as the following Domain age, Regular upgrade, Write for your visitors, Press releases, Flash, Meta tags, Heading tag, Site map, Keywords, External links, Business address, Article distribution, Images, Multiple domains, Link exchange and so much more.

Get My Free Ebook


Post a comment