iWeb Tip #28 – Attention Bar in iWeb

After adding the attention bar on my site in July 2011 to show the article “iWeb and Beyond” I had a lot of people on the comments, forum, facebook, and Twitter requesting to post a tutorial on how to add an attention bar to their iWeb sites.  So this tutorial is on how to do just that.  First off let’s explain what an attention bar could be used for.  Of course I used it to on my site to get peoples attention and make sure a certain article I wrote got read.  It’s pretty hard to miss.  You might also use it to let your viewers know that your site will be experiencing some matainance, or perhaps you have a big deal or sale on your site, or you could use it for advertising, or if you really just need to get your viewers attention.  So there are some ideas for how you could use this.  

View Demo »

How to add it to iWeb

Now, let’s get to the fun part on how we actually implement this into iWeb.  It’s actually quite easy.  Here are the steps:

Step 1) Create your page that you’d like this alert to be on in iWeb

Step 2) Publish that page to a folder or your server.

Step 3) Download this file that contains all the javascript and css script files that will power the attention bar.

Download attention-bar.zip File »

Step 4) Unzip this folder (if you haven’t already) and you should have a folder simple called “attention-bar” with three folders inside it. Add this folder so it’s along side of your .html file that you published.

Step 5) Open up your publish HTML page in an HTML Editor (Such as Coda, Espresso, or even Text Edit (if you are using textedit be sure to go into the preferences of textedit and check the box that says ignore rich text in html)) and add the code below right before the closing </head> tag of your page.

Step 6) Make changes to the code as necessary such as your message, your link, and other parameters that you may want to change (details on that below).

Step 7) Save your file and your done.

That’s really all there is to it and you’ve got a great looking attention bar on your iWeb site.

Questions

What about if I want this on every page of my site?

You’ll have to add this code to all the pages that you want this to show up, so if you want it on all pages of your site you’ll need to open up each page individually and add this code to the head of each page.  If you have a lot of pages you might want to use one of those tools I’ve mention previously such as iTweak or Mass Replace it and it you could do a find </head> and replace with the code, but just add the </head> to the end of the code and tell it to mass replace it and it would do all your pages.

Do I have to do this each time I publish my site?

Yes, when you republish a page in iWeb your html files will get re-written, so you’ll have to go and add this code to the head of your site again.

Customization:

You can customize quite a bit of this tip.  You’ll see other parameters in the code the is customizable.

Here are the parameters and a little explanation of what they do:

• “positioning” : “fixed” – Inline = scrolls with the page, Fixed = stays on top of the screen also when scrolling the page.
• “display” : “delayed” – This is how the attention bar is displayed upon first load. Options are: delayed, expanded, collapsed, on scroll. The options delayed & on scroll, depend on the Display delay settings.
• “displayDelay” : 2000 – When the site is visited the bar is colapsed by default, it will be expanded after this delay (in milliseconds).
• “speed” : 500 – How fast it animates up and down.
• “height” : 30 – How tall in pixels do you want the attention bar.
• “collapsedButtonHeight” : 30 – The height of the show button when the attention bar is collapsed
• “messagesFadeDelay” : 1500 – The delay that the message fades in.
• “easing” : “swing” – The options are: swing or linear (swing looks better ;-).
• “fontSize” : “10pt” – Size of the font.
• “fontColor” : “black” – Color of the font (you can use hex color values too, such as #ffffff for white).
• “aFontColor” : “black” – The font color of the link.
• “aFontSize” : “10pt” – The font size of the link.
• “backgroundColor” : “lightyellow” – The background color of the attention bar. You can also use hex color here too.
• “positionClose” : “left” – Position of the arrow button when the attention bar is closed.  The options are: left or right only.
• “enableCookie” : true – With this option set to true the users browser will remember the preference of the attention bar.  That way if they close the bar, it won’t pop up on every page.  If you set this to false it will always show whatever settings you set here every time.
• “cookieHash” : “fc3e8788bb772c04d0807b3cc2590518” – Don’t bother changing this.
• “cookieExpire” : 1 – Cookie expire time in days. If the cookie expires, the user saved states will be ignored (The Attention bar will be auto expanded then! this only applies if you have the enable cookie option set to true.)
• “messagesDelay” : 5000 – Display in milliseconds (for ex: 2000 = 2 seconds)
• “announcement” : Long line is the image that shows up on the attention bar.  By default it’s a bullhorn, and the image path is attention-bar/images/announcement.png, but it comes with two other options, just change the announcement.png to “important.png” for a explanation point, or change it to “tip.png” and get a light bulb.
• “announcementClass” : Of course this is where you actually put your message.  I have a default message in there right now, but you can change that as well as the link.