iWeb Tip #28 – Attention Bar in iWeb

37
10204

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.

That should just about do it.  Let me know if you have any questions by adding it to the comments below.

Video Tutorial

Here’s a video tutorial on this just in case your still not sure.

Thanks everyone and hope you had fun with this iWeb tip.

If you found this tutorial helpful, please consider donating as it takes a lot of time to put together these tips. Thanks much for visiting iWebUnlimited.com.

[iWeb-Code=’donation’]

37 comments

  1. Robert 13 August, 2011 at 09:08 Reply

    Great, it works fine. But the graphics inside the HTML snippet box’s stop working.

    Any idea’s as to what is wrong.

    Great tips though I have used several on our site.

    Thanks

  2. Andy 26 August, 2011 at 02:36 Reply

    Brilliant! It did work. However, I encountered the same symptom like Robert said. Any ideas?

    By the way, how can I provide the link to you to analyze? via e-mail?

    Thanks in advance! :-)

  3. Axel 29 August, 2011 at 11:25 Reply

    I was able to get the Announcement bar up and showing on the website. However it then would not let the navigation bar on the website or the rolling scroll to operate. Any suggestions as I have tried several times now. Thanks.

  4. Michael 4 September, 2011 at 17:13 Reply

    Hi Jason,

    Thanks for all your help in the past. Your website is GREAT!

    How do you open an .html page for my existing published website with mobile me? I’d like to add this announcement widget on one of my pages but can’t locate the .html file. I can only find the .domain file which opens the website up in iWeb. I did a search for .html files in spotlight and ZERO help locating my already created .html files!
    Any suggestions?

    Kind Regards,
    Michael

  5. Michael 4 September, 2011 at 17:16 Reply

    Hello again,

    I’ve just submitted (i think I did) a question for you but didn’t get a message or signal that the question made it through to you. Could you confirm? Maybe add an auto reply to your comment box???

    Thanks Jason.

    • Shivam Sinha 24 October, 2011 at 12:36 Reply

      Oh! Please don’t mind the spelling errors. What I wanted to say was that I need some help with the menubar on my website. I have seen your previous tip about the CSS Buttons,, which are very difficult to customize and you are restricted to just a button. Please help me iJason. You have been the only one who proved to be the best at iWeb YET.

  6. Pat Burton 29 October, 2011 at 09:10 Reply

    I have install the announcement bar with success but it stopped the other widgets from fontionning (Google Maps and a rollover). Is there something that I did wrong?.

  7. Menno 29 November, 2011 at 15:55 Reply

    Dear Jason,

    I found your website an couple of weeks ago and it is awesome dude!!
    Always wanted to make my own website and i thought “Lets use iWeb” then i found your website and the first thing i wanted to put on my site was the attention bar. I tried to host my site on an FTP server and used transmit to get my home.html that i changed with Coda on my server but if i look at it it doesn’t work. I don’t see the attention bar

    What did i do wrong?

    Greetings from Holland,

    Warmest regards,

    Menno

  8. Patricio 9 December, 2011 at 22:07 Reply

    The RSS widget stops working every time I install this attention-bar…..

    I do exactly what you explain…step by step
    the attention-bar works great but the RSS stops working!!!

    as soon I re edit the .html file (by erasing the attention-bar code) and publish it the RSS works fine again!

    Please help.
    Thanks

  9. prny 17 December, 2011 at 12:52 Reply

    thanks for the great tips… howeveroncei placed the attention bar my page contents like html snippet, rss feed, entries and navigation bar disappeared… how did i resolve this?

  10. Shane 6 January, 2012 at 10:05 Reply

    I’m having a problem! Attention Bar works a treat,however it makes the Navigation menu at the top of my pages disappear?!!

    I’ve settled on including it on my welcome page for now but would much prefer it to be featured on ALL of my pages!!

    Any ideas?

    • Nate 30 January, 2012 at 21:55 Reply

      I’m having the same issue. The attention bar works great but the the countdown and other html snippets have been disabled.

      Has anyone figured out how to circumvent this yet? I’d love to use the attention bar, but not at the expense of the other items I have running on the site…

  11. Lucas 18 February, 2012 at 11:21 Reply

    Hi!
    First; Great website! thanks for all the good tips!

    Seccond; i’ve uploaded my site to my FTP server, but i can’t find it on my computer. where find i the html file of my site? thanks!

    Lucas

  12. DIEGO PY 2 March, 2012 at 20:09 Reply

    Hi guys, I was running into the same issue with this code. Basically if you copy and paste the code just before the it stops displaying your navigation bar.

    Well, I figure out that instead of adding BEFORE the I would add it AFTER the . That’s right. exactly after you open your head.

    and it works. try out!!!

    chau

  13. bach140 30 June, 2012 at 00:20 Reply

    Your tips have really helped! I’m especially thankful for your “Attention Bar” tip.

    I run iWeb “08 v. 2.0.4 on mac os 10.4.11. I was losing my dropshadows and strokes (and who knows what else) when I put the attention bar code inside the tags. I found putting the code BEFORE the tag fixes the problem, although I have yet to re-upload the page. Can this fix be correct?

    • bach140 30 June, 2012 at 00:33 Reply

      Let me clarify: I was losing my dropshadows and strokes (and who knows what else) when I put the attention bar code between the HEAD tags. I found putting the code BEFORE the opening HEAD tag fixes the problem, although I have yet to re-upload the page. Can this fix be correct?

  14. abuur 8 August, 2012 at 14:33 Reply

    GREAT SITE! GREAT FEATURE!! Thanx…

    However, my index-file is a index.php in order for it to send mobile users through to my mobile site. So I cannot make the Attention bar working after I change the index file to .php.

    Is there any way I can make it work within an .php file as well?

  15. Goran 27 August, 2012 at 03:43 Reply

    Hi Jason,

    Thanx for the excellent tip. Attention bar is added to my site but since I’m using “white template” my navigation bar is at the top of the page under the attention bar. The problem is navigation bar is not visible after I place navigation bar. I guess I have to customize it but do not know what exactly to change.

    Your help will be appreciated.

    Thank you,

    G

  16. Colin 1 September, 2012 at 11:03 Reply

    Hello, I am having trouble with my address bar. I added your code, made some changes to it for personalization, but the code disables or hides my navigation bar on my homepage.

    Could you please advise me on how to correct this?

    Thanks!
    -cc

  17. mand 17 January, 2013 at 18:26 Reply

    it didnt work for me. I am using cyberduck get an error reading that there is no room when I try to move the home.html back over to cyberduck open connection to transfer and apply.

Leave a Reply to Goran Cancel reply

Facebook
Twitter
YouTube