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.

With both examples (post in HTML Snippet and in HTML Code after publishing) you have to download the snowstorm.js file below and place it somewhere on your server (whether it be mobileme or your server account with someone like GoDaddy, iPower, BlueHost, etc.).  So for both of these you can do so by clicking the download button below:

Download Snowstorm.js file »

Snow on the entire site:

This one is quite simple, but it does require you to add a single line of code to the html after you publish it, but here are the steps to accomplish it.

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become http://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become http://yoursite.com/snow/snowstorm.js

3) Create your iWeb site, make it look nice ;-) and publish your site to a folder.

4) Open up the html page that you want the snow to appear on in an HTML editor.  (I recommend using Coda from Panic Software, but as I’ve mentioned before you can just use TextEdit if you’d like, but be sure before opening it in TextEdit that you go into the TextEdit prefs and check the check box in the Open and Save tab that says “Ignore Rich Text Commands in HTML files”.  Then you can open it in TextEdit.

5) Add this line of code right before the closing </head> tag.

<script src=”http://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Save and test.  If you open your html file now in Safari (or any other browser) you will see that your site is now snowing. Yay!  Upload it to your server and let your viewers enjoy the lovely snow on your website.

View Demo »

Snow in HTML Snippet

This use of the code makes it so you don’t have to go into the html after publishing the site and add any code, you just add this code to an html snippet, hit apply, and it will snow in the html snippet.  The nice thing is, is that you can size the snippet to be whatever size you want, so can it be handy if you  (for example) only want it to snow over the top of a photo or something similar.  But keep in mind that wherever you put the snippet any links or button that are under it will not be “clickable”.  So only put it over the top of items that you don’t really need to be “clickable” underneath the snow.  This method does not put snow across the entire page, only in the html snippet.  If you want it to snow across the entire page, then use the tutorial above.

So here’s how to get it in an HTML Snippet:

1) Download the snowstorm.js file above and put in on your server.  Whether that be on your mobileme server or your hosted server with GoDaddy, iPower, etc.  If you’re hosting with MobileMe then I’d recommend creating a folder called “snow” in this location iDisk/Web/Sites/snow (this is the folder you’ll create).  If you are hosting this on your own server like GoDaddy or something similar I’d make this folder on the root level of the server (by root level I mean to immediate one to the live files.  It’s sometime listed as public_html, sometime’s it just the first level that comes up, etc.).

2) Then drop the snowstorm.js file in that “snow” folder we created in step 1.  If your using MobileMe your link to this file will become http://web.username.com/snow/snowstorm.js (of course replace “username” with your own mobileme account name).    If your using your own host (like GoDaddy, iPower, etc) then your link then become http://yoursite.com/snow/snowstorm.js

3) Add this line of code inside of an HTML Snippet.

<script src=”http://yoursite.com/snow/snowstorm.js“></script>

Of course replace the URL to link to where you put the .js file on your server.

6) Click apply on the snippet and you’ll find that it will now be snowing in your html snippet.  Feel free to resize the snippet to whatever size you need and the script will automatically size the snow to your snippet. Yay!  publish your site and let your viewers enjoy the lovely snow on your website.

View HTML Snippet Demo »

Notes:

You’ll find in the .zip file you downloaded there was two .js files.  If you find that the original snowstorm.js file is loading slow on your site, then try using the snowstorm-min.js file instead.

Customization:

Once you have Snowstorm running in your page, you can customize its properties either by editing the snowstorm.js file directly, or assigning new values to the snowStorm object after snowstorm.js has loaded.

For example:

<!-- required snowstorm JS, default behaviour -->
<script src="http://yoursite.com/snow/snowstorm.js"></script>

<!-- now, we'll customize the snowStorm object -->
<script>
snowStorm.snowColor = '#99ccff'; // blue-ish snow!?
snowStorm.flakesMaxActive = 96;  // show more snow on screen at once
snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
</script>

Thanks everyone.  Hope you like this tip and have fun with it.

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.

It’s finally here!  An easy way to get Google search on your iWeb site! Woo hoo!

So there are a few ways to get a Google Search into your iWebsite, an easy “paste code into an html snippet” way and a “more complex but sweet integrated google results” way.  So let’s start with the easy one first, then we’ll move to the more complex one.  Here we go!

See Demo »

Simple Google Search Code:

Google Search Box 1:

This code will put a simple Google Search box on your site that gives visitors a choice to search your website or google.  When a visitor enters a search term the search will take them to a new page with search results.  To add this to your website simply paste this code in an HTML snippet:

Then simply change the code in red to modify to fit your site.  You can adjust the font, size, and color, then (most importantly) add your site’s name and URL.  Hit apply on your snippet, publish, and your set!

Google Search Box 2:

This box is the same as Google Search Box 1, but it only searches your site.  Simply paste this code in an HTML snippet:

Then just replace the text in red with your site, hit apply, and your set.

Google Search Box 3:

This box is the same as #3, but it has no Google branding.  Just add this code:

Google Search Box 4:

This one is just a simple “search the web” Google search.  For those that simple want the convenience of search the web through their own website.  Just paste this code below:

And that’s it, have fun!

Advanced Google Search in iWeb:

Alright, let’s now dig a bit deeper.  This tip here will give you a google search box that when a user searches, they remain on your site and your results will show up on your site as well. WooHoo!  It gives users a much better user experience.  So here we go:

1) The first thing you need to do is to log in or create a Google Adsense account.  Do so by going to https://www.google.com/adsense/

2) After your logged in go to the “Adsense Setup” tab and click the “Adsense for Search”

3) You’ll be guided through a series of questions to setup your search for your site of which are:

• Search Type: Choose “Only Sites I Select”
• Selected Sites: Enter your website (the full site, http://yoursite.com, or http://web.me.com/mobilemeusername
• Optional Keywords: Enter keywords that have to do with your site.  Here’s a link with examples.
• More Options: Site Language: Of course choose your language.
• Your site encoding: I recommend leaving it at it’s default.
• Country of Territory: Choose your country.
• Custom Channel: If you’ve made previous ad channels you can set this up in relation to one of those, but if not no worries, just keep the checkbox that says “Automatically create new channel”
• Safe Search: I recommend leaving it on.  Keeps inappropriate items out of your visitors search.

Then hit continue.

4) You then can choose the style of the search box you wish to have on your site.  So just click the radio button that looks most like it would fit in with your site.  You can also choose how many characters you want your search box to be.  Feel free to modify to best fit your site.

Then hit continue.

5) The next page asks where the search results will be.  Choose the option that says “Open results within my own site”, then specify the URL that the results will be at (this will be a page that we will create later.  I suggest putting in http://yoursite.com/results.html or http://web.me.com/mobilemeusername/sitename/results.html, we can always change this later if you need to as well).  It also asks you to put in the size of the results in width.  The smallest it can be is 795, so we’ll have to be sure we’ll make room for this on our site later on.  I recommend just keeping it the default 800px wide.

You then will choose where you would like the ads placed (Don’t worry you’ll get cash for people clicking on the ads that are on your site).  I suggest choosing “right only”, unless you want to persuade people to click the ads, in that case choose “top and right”.

The last option on this page is the modification of the colors.  It’s a pretty neat feature here where you can change the colors of the search results so it will match your website.  So do that here.  They have some presets if you’d like to play with those, or you can just change the colors individually.

Then hit continue.

6) The next page simply has you name your new search engine we’ve just setup.  Give a name (doesn’t really matter what you name it) , read the additional terms (if you want), click the checkbox that you agree, and hit the “Submit and Get Code” Button.

7) Alright we have arrived! WooHoo! You now have two boxes with code.  Copy and paste those bits of code somewhere where you can access it.  I personally like to use Evernote (it’s free and syncs with everything), but you could save it in a document (pages, word, google docs, text edit), Apple Mail Notes, etc.  Doesn’t matter where you save it, just save it so you can access it later.

So the first box is the search box and second box is the results code.  So the first thing we are going to do is copy and paste the search box code into an HTML Snippet in iWeb.  This can be anywhere and on as many pages as we’d like.  If you want to have a search box on everypage, go for it.  Just get that search box on your iWebsite somewhere.

8) Alright now that we have a search box on our website, we now need to make the results page.  Sooooo, to do this we are going to create a new page on our site.  So go ahead and hit the “Add Page” button in iWeb in the bottom left or click file > New Page, or you can duplicate an existing page by selecting it and pressing “command + d”.  Name this page “results” in the sidebar.  This will end up being the http://yoursite.com/results.html page the we specified back in step #5.  Now design the page how you would like it to look leaving the main content area empty using your imagination that our results will be in the middle.

9) Now that you’ve created and designed the page add a text box onto the page and type in the text box this “%%GOOGLE SEARCH RESULTS%%” (without the quotes).  Then stretch the text box to be the size that you would like your results to be.  It has to be at least 800px wide (remember when we specified that in step #5) and you’ll want to make it about 875 pixel’s in height too. So adjust your design layout accordingly to this textbox size.

10) OK now, publish your website, either to a folder, your server, or mobileme.

11) Now before this can work, we need to go in and replace that crazy text I had you enter %%GOOGLE SEARCH RESULTS%% with our code.  So to do that we need to open up that results.html page we created with an html editor.  Again I like to use Coda or Espresso, but you can use TextEdit (if you go into the prefs and turn on the “Ignore Rich Text Commands in HTML” check box).  Do a find and replace option by pressing “command + f” search for our crazy text “%%GOOGLE SEARCH RESULTS%% and replace it with our results code.

Then hit save and put your files live online to test.

12) TaDah! Your finished.  Go visit your site and test it out to make sure it is working properly.

Troubleshooting:

Your page has to be online for it to work (you can’t test it locally because when you type something in the search box the results will only show up at http://yoursite.com/results.html, if your search is not working for any reason it could be that your results.html file is not in the right spot.  Also if your site is brand new to the web it might take some time for your results to show up because google hasn’t cached your site yet.  You can try to speed up this caching process by submitting your site into Google by going to http://www.google.com/addurl/?continue=/addurl

If you need to change where the results page is you change that URL in the google search box code.

I already know I’m going to get this question: Do I have to do this everytime I publish. The answer to that is yes and no.  Anything that we have to modify outside of iWeb (i.e. the results code), then yes we have to do each time.  So what I recommend for this tip is to have your results page in another site (file > new site), get your code setup, and published, then the main site you can update all you want and it won’t effect the results code page cause you won’t be needing to really update that page…really ever.  So just get that page online, then you can put the search box on as many pages as you want.

Any other questions feel free to leave in the comments below.

I’ve had a lot of requests for this in the forum, so hopefully this takes care of all your iWeb site searching needs.  I’ll probably make a video tutorial on how to do this in the near future for those that want to do the advanced search tip, but are a little overwhelmed or stuck.  So stay tuned for that.

If this tip helped you, consider donating to the iWebUnlimited cause by clicking below;

—iJason

View Demo of Shadowbox in iWeb »

Step 1) Make a page in iWeb and add links to your media in one of the following ways:

Images: Drop an image on your page and enable as a hyperlink from the hyperlink inspector and link to “a file” and choose the same image (preferably a higher res version of the photo, at least 800 x 600).

SWF’s (Flash Files): Drop an image to represent the swf (could be an image, a shape, text, you could even launch your swf and do a screen capture (command + shift + 4) and drag over it to get an image to add in.)  Basically just get something that will be clickable that we can link to the swf.  After adding that image or whatever enable it as a hyperlink and link to the swf file itself.

HTML: Simply enable as a hyperlink your image, shape, text to an external page.

FLVs (Flash Video): Same as the swf, get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .flv file.

QuickTime: Same as the FLV and SWF.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .mov file.

WMV (Windows Media Video): Same as the FLV,SWF, and MOV.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .wmv file.

YouTube: Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to an external page.  Copy the you tube URL from you tube and paste it in URL field in iWeb hyper link inspector.  Then here your going to do one more step.  You need to alter the URL just slightly.  Your YouTube video code will look like something like this: http://www.youtube.com/watch?v=qKiIm5EcQ7A you need to alter it so it looks like this: http://www.youtube.com/v/qKiIm5EcQ7A, basically you delete the “watch?”, put a slash after the v, and get rid of the “=” sign. If you don’t do this your YouTube video for this effect won’t work.  So this is an important step for you YouTube users.

This effect works with many other video services like Vimeo, Google Video, Yahoo Video, etc.  For those sites you don’t need to alter the code like the YouTube, simply make a graphical representation for them and link them to an external page with the URL of the video in it.

Step 2) Publish your iWeb file to a folder, MobileMe, or FTP

Step 3) Download the Shadowbox .zip file by clicking the download link at the top of this page or click here ».

Step 4) Unzip the shadowbox.zip file (if your mac didn’t unzip it for you), and drop the folder called “shadowbox” into your site folder.  Not your page folder, your site folder.  You want the shadowbox folder to be right next to your html page.

Step 5) Open your html page (the one with your hyperlinks of course) with an HTML editor.  I prefer to use Coda, but again you could use an array of other ones out there (Espresso, TextWrangler, Even TextEdit)(if you use text edit be sure to check the checkbox in the textedit prefs that says ignore rich text commands in html files).

Step 6) Add this code before the </head> tag of your HTML page:

OR you could also just do a find and replace by finding:

</head>

and replace with

Where it says players, go ahead and delete any/all the players that you don’t need.  So for example if your not linking to an swf flash file, delete the ‘swf’, code.

Step 7) Find your hyperlinks that we created in iWeb in the html code here and add a

rel="shadowbox"

to your image links so it looks like this

<a href="myimage.jpg" rel="shadowbox" title=“Whatup”>My Image</a>

An easy way to find your links is to do a search for “title”, then you can spot the link code and put the rel=”shadowbox” right before the title tag.

For your video links you need to add a width and height dimension to it, so for all flv, swf, mov, wmv, html, and youtube like links you’ll need to add this code instead:

rel="shadowbox;width=640;height=480"

Just adjust the dimension to match your swf, webpage, or video. Here’s an example for a quicktime video.

<a href="mymovie.mov" rel="shadowbox;width=480;height=640" title=”My Movie”>My Movie</a>

You can also group items to together in a slideshow like way by adding a grouping text to all the shadowbox code you add to the links.  Here’s what it would look like:

rel="shadowbox[Group]"

Just be sure to add that [Group] to all the links you want to be connected.  You can have 2 or more seperate groupings by just making a different text group like [Group2], and add it to the other ones you want to group.

For YouTube videos you have to use this code:

rel="shadowbox;width=425;height=344;player=swf"

Same princible goes with adjusting the width and height for your YouTube video.  So your YouTube link would look something like this:

<a href="http://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"><img src="my_webpage_files/flash_in_iweb-youtube.jpg"

Step 8 ) While your in adjusting your links adding rel=”shadowbox” code, you should probably change your “title” code to say something more relevant than just the path to your file.  So where you see the title=”big_long_link_files/this_is_not_a_good_title.html”, change it to say something else like title=”Check out my cool photo” or whatever.

Step 9) Hit Save and your done! Yay!  Make sure all your files are online, test it out to make sure it’s working properly and your set.

There are many other options that you can add for advanced users that I won’t go into here, but you can check them out by going to http://www.shadowbox-js.com/options.html.

Note: Shadowbox can be used for free for non-commercial websites.  If you are going to use it for commerical purposes you must purchase a license.  You can do that by visiting their website at www.shadowbox-js.com.  Also included with the iWeb version of shadowbox that I have made is a JW FLV Player.  It also can be used for free for non-commercial websites.  If you use the JW FLV Player to play flv files for commercial purposes you must purchase a license.  You can do that by visiting https://www.longtailvideo.com/players/order2.

**Also note that this effect cannot be used with links using a shape or text box. Link only a true graphic (jpg, png, gif, etc) or link the text itself.

I know it can get a bit complex getting into the code, especially if you’ve never really dealt with html code much before.  But just take it slow and go step by step and you’ll get it.  If you mess up, just go back to iWeb and republish and you can start over.   I think this is the best of the popup effects cause it deals with all media formats so easily.  So I hope you enjoyed the tip and if you feel like this helped you in some way consider donating to the iWeb cause.  The more donations I get the more time I’ll put into making more tips like this.

Thanks for visiting iWebUnlimited.com

—iJason

View Demo »

The built in iWeb Navigation:

First as you probably have noticed iWeb gives you a navigation menu at the top of the page automatically and with each added page it adds a new text button at the top that is the same name as whatever you named your page in the sidebar.  It’s pretty convenient sure, but lacks any constumization at all to out site.  So if you want to keep it simple than just keep the built in navigation

Your own Text Navigation:

If you want to have a similar look as the built in navigation, but want to customize it.  The first thing to do is to go into the page inspector > Page Tab, and uncheck “Display navigation menu”.  That will take the auto-navigation off.  But now you have no links or ways to get to the other pages of your site.  So what you do is, simply make a text box type the name of your pages as you want them to appear, style it (i.e. fonts, sizes, etc, but don’t worry about color yet), then go to the hyperlink inspector and highlight the text word button one at a time and enable them as a hyperlink going to your pages.  Then go into the Hyperlink Inspector > Format tab to style the colors of the “Normal” state, the “Rollover” state, “Visited” state, and “disabled” state.  Then your done.  Copy and paste the text box onto all the other pages now and you have yourself a cutom text navigation.

note: I recommend creating all of your pages first, then make your Text Navigation so that you can link them to the pages and proceed to copy them to the other pages as well.  Also remember that any font that is not websafe could cause problems.  So if you font is a special font you can guarantee that the font will show up by making it an image.  To do that go to the Graphic Inspector and give the text box a shadow then bring the shadow opacity down to 5%.  You won’t be able to see the shadow, but now your text will be turned into an image.

Graphic Menu:

Another great way to stylize your navigation is to use graphics in iWeb.  You can use the shapes to create some pretty good looking menus.  Here’s an example simply using two rounded cornered square shapes and a text box.

Here’s my quick workflow for this menu: 1) Create shape 2) Size shape according to site size desires 3) Add gradient color with darker on bottom and lighter on top 4) Add 2pt white stroke 5) add shadow 6) Duplicate shape (Option + Drag shape, now you have to of the same shape) 7) On 2nd shape, remove shadow and stroke, and change top gradient color to white with 26% opacity and bottom gradient color to white with 11% opacity. 8 ) size the 2nd shape so it’s half the size height-wize as the 1st shape.  (this effect gives you the shine look) 9) Add stylized text box over the top of shapes.

Photoshopped Rollover Menu:

If you really want to spice up the graphic menu and own photoshop, then here’s a cool way to do it.  Take the same graphic menu that we created earlier and copy and paste it into photoshop. To do that you hightlight the 1st shape and press command + c to copy, then jump over to photoshop and press command + n or File>New and photoshop will see that you have something copied to the clipboard and will default to that size.  But you need to change the color mode from “Greyscale” to “RGB Color”.  Then press comman + V in photoshop or press Edit>paste and your shape you made in iWeb will be in photoshop.  You’ll need to add a shadow to your shape here (if wanted/needed) cause the shadows don’t copy over.  You can then copy and paste your highlight shape (the 2nd shape) in there too.  You can even copy and paste the text box if you want also, but you can just as well type the text in photoshop too.  Once it looks pretty good in photoshop, hold your mouse down on the crop tool until you see the slice tool.  Use that to draw boxes over the different buttons of your menu.  For example our graphic menu above has 5 buttons on it, so you would draw 5 squares with the slice tool.  Then choose file > save for web & devices, and be sure that it says to save as a PNG 24, choose your location to save and file name (I recommend naming them “up”) and hit save.  You will then see the result is a folder called images with your 5 sliced boxes as individual graphics.  These are your “Up” graphics.  Meaning this is what the buttons look like when they are just sitting there…when their up.  Then you go back in and find the main shape layer and use some photoshop trickery to change the color slightly.  You could change the hue so it’s a different color, the brightness, etc.  Whatever you do, we just want something that looks different.  So that when they rollover they see something change.  It could even be the text.  Once you have that looking different, choose file>save for web and devices again, save as PNG 24, choose save location (should be the same place as before), name (I recommend “over”), and hit save.  You will then have another images folder with your “over” images.  These are the images that will swap out when the user rolls their mouse button over the graphic.  We now need to put these graphics on our server (meaning MobileMe iDisk or your own server from say RAGE iWeb Web Hosting). At this point go to my rollover tip and follow those instruction on how to get the rollover effect now that you have the graphics, and the result is something like this:

You can see the working version in the demo.  If you’d like here is the photoshop file you can download to get you started.

Drop Down Menus in iWeb:

This is a big one.  I’ve had a lot of request for this.  The problem with drop down menus is that they get a bit complicated.  I wish they were as easy as a simple html snippet to paste in, but it’s not.  So I’ve tried to make this as simple as possible.  To do this you must understand (and I’ll try to explain this the best I can) that the first and foremost problem with putting dropdown menus into an html snippet is that drop down menus require a lot of room to drop down over the top of your content and every object in iWeb (shapes, text boxes, snippets, etc) is layered, meaning one is above another.  So what happens is that the html snippet needs to always be on the top layer above all your text boxes and shapes, etc, but if you have any links under your snippet they will not be clickable because you snippet needs to be as big as your longest and widest drop down link and everything else on your page will be underneath it, again making any links under the snippet unable to be clicked.  So I’m going to show you first how to get around this with out using html snippets where we modify the code after publish to get the desired effect.  Then I’ll show you how to do this using HTML Snippets (as long as you understand that everthing under your snippet will not be clickable ;-).

1) Drop Down Menu without HTML Snippet:

First simply make your links from a text box.  Similar to our text navigation above.  Then simply publish your iWeb page.  Find your publish html page and open it with an HTML editor (coda, espresso, textedit, etc) and add the below code right before the </head> tag:

You then change the code to customize it to your site and style.  The items your going to want to change are the items outlined in the comment code.  You’ll see to change font size, color, and most importantly your links which are outlined by “Menu1″ and “Menu2″

Then you find in the code the text that you linked and add the line of code in blue, making sure the code looks like this:

<a href="My_Page_in_iWeb.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()" title="My_Page_in_iWeb.html">The Linked text that people see</a>

You’ll notice that in the head tag code there is text called menu1 and the link code that matches also has a menu1 in it.  That how you put them together, and you can add as many sublinks as you’d like in the head code where the menu1 is.  Just copy the line and keep adding another menu1[3], etc etc.  That is only for one button.  If you have more buttons that need it, just copy the whole menu1 part in the head code, paste it below the 1st menu1 part and change it to menu2, then in your links do the same and change it to say menu2 and so on (Hopefully that makes sense).  Once your done, just save it and your in business.  Be sure to test it out, once it is working successfully put online and your set.  I’ll have a video tutorial on this as well as I tend to do with the more complicated tutorials.

2) Drop Down Menu Using IzzyMenu:

Another way to create drop downs is to go to IzzyMenu.com.  It’s totally free (just dodge the ads), then you can build a drop down menu in a nice little drop down menu creator, then they let you download your complete menu.  Once downloaded you’ll see some ads on it, you can get rid of these by opening up the IzzyMenu.html in an editor and delete this last line of code:

<div style="clear:both; text-align:center; padding:10px;"><a href="http://www.templateo.com"><img style="border:1px solid black;margin-bottom:5px;" src="templateo600x100.jpg" /></a><br /><a href="http://www.izzywebsite.com/go?izzymenudownload"><img src="download.jpg" border="0" /></a></div>

You can also delete the ad images usually called “download.jpg” and “templateo600×100.jpg”.  Alright, we’re almost ready.  You need to do one more thing to make it work properly in iWeb.  Because it’s going to be in an HTML Snippet we can’t have the links be “_self” links, we need them to be “_parent” or “_top”, so we need to go through our links in the IzzyMenu.html and make sure all the links open with the “_parent” code. So add this code target=”_parent” after each link so it looks like this:

<li class=”item_active“><a href=”http://www.iwebunlimited.com” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_101′)”><span>iWeb Tips</span></a></li><li><a href=”http://www.iwebunlimited.com/videotutorials/videotutorials.html” target=”_parent”><span>Video Tutorials</span></a></li>

<li><a href=”http://www.iwebunlimited.com/links.html” target=”_parent“onMouseover=”cssdropdown.dropit(this,event,’dropmenu_104′)”><span>Links</span></a></li>

<li><a href=”http://www.iwebunlimited.com/qanda/qanda.html” target=”_parent“><span>QandA</span></a></li>

<li><a href=”http://www.iwebunlimited.com/html_snippets.html ”target=”_parent“><span>HTML Snippets</span></a></li>

Now that your links are working, you might notice the code in red.  That is what button you would like to have active on the page.  So if you wanted, you could make a duplicate of this menu for each button on your menu and just move the red code around to go on the page you want active.  If you don’t want it, just delte the code.

And boom we are done.  Post the Izzy Menu including all the folders that came with it on your server, perhaps in a folder called “izzymenu” and test it out by going to your url. i.e. http://www.mysite.com/izzymenu/IzzyMenu.html or http://web.me.com/myusername/izzymenu/IzzyMenu.html (mobileme users put the izzymenu folder in the idisk>Web>Sites>here).  Once you see your menu is working, we use the iFrame code to get it into iWeb.  Yay! We’re set.  Again remember that because it’s in a snippet any links under the drop down won’t be clickable.

3) Other Drop Down Menu’s to iFrame in:

• You can get similar drop down menu effects like the IzzyMenu at some of these links
• http://www.cssplay.co.uk/menus/pro_horizontal.html (Free)
• http://www.lwis.net/free-css-drop-down-menu/ (Free)
• http://greengeckodesign.com/projects/menumatic.aspx (Free)
• http://www.opencube.com/index.asp (Not Free)

CSS Play Download »

Free CSS Download »

Menu Matic Download »

Flash Menus:

Flash navigation can sometimes add a neat look and feel to your site and over 90% of all computers have flash installed on their machines.  But as we most know, that the iPhone does not have flash, as well as many other mobile devices.  So that’s why if you go this route you add some text links at the bottom of the page.  That way people can still navigate if they don’t have flash.

Simply go to FlashComponents.net and browse through their emence library of flash menus and purchase it, modify it (usually using the xml code), post it, and iFrame it in.  Don’t forget to make sure your links are _parent or _top.

Hope this helps you get some great navigation menus in iWeb.

View Demo »

Step 1) Download Lytebox by clicking here »

Step 2) Add images to your iWeb page and make them a hyperlink (as a file) to itself (the same image).

Step 3) Publish your iWebsite to a folder, iDisk, or server.

Step 4) Add the “lytebox” folder you downloaded in step one to the site folder (not the page folder)

Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor.  I like to use Coda (by Panic Software), but you could use TextEdit (if you check on ignore rich text commands in HTML files checkbox in the preferences of TextEdit), or Espresso, TextWrangler, etc, etc, there are a bunch.  Just something that you can edit HTML in.

Step 6) Right above the </head> tag in the HTML, paste these lines of code.

<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />

Step 7) Then find where your image links are and add a rel=”lytebox” in between the link and the tittle tag. For example, here is what your looking for in the HTML:

<a href="mypage_files/my_image.jpg"  title="Image Description">

Put the rel=”lytebox” inbetween the image link and the title tag so it looks like this:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">

Step 8 ) Save and that’s it your done.  You’ll have a cool image popup effect, similar to highslide or fancyzoom, but slightly different.

Options: (If you dare :-))

Grouped Images:

If you want to have the images scroll through with a cool next and previous button to the lytebox, then instead of adding rel=”lytebox” in between the image link and title tag, add rel=”lytebox[group1]“to each image link and there will be a neat navigation to cycle through the images.  Here’s an example of what the code would look like:

<a href=”images/image-1.jpg” rel=”lytebox[group1]“ title=”Image Description”>

You could have multiple sets on one page too if you change the group1 to something like group2 for all the ones you want in a seperate group and so forth.  Click the example button above for reference.

Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page.  So be sure to add images to the page in the order you want them to show up in the lytebox effect.

Lytebox Slideshow:

You can also have a little slideshow effect in the lytebox popup by using rel=”lyteshow[group1]“ instead of the rel=”lytebox” (single images) or rel=”lytebox[group1]” (multiple images).  So your link code would look like this:

<a href="images/image-1.jpg" rel="lyteshow[group1]" title="Image Description">

iFrame Content in Lytebox:

If instead you want a webpage in the lytebox effect instead of an image, then simply add a link to an external page (it could be one of your own pages).  Find the code in the html where your link is and add rel=”lyteframe” instead of the others above.

Note: When using this effect it only works with highlighted text links (not textbox links) and image links.  It does not work very well with iWeb shapes for links.  For those, use the Highslide effect.

When applying the Lytebox effect it will take a default width and height of 400px and scrolling is set to auto.  If you want to control how big the frame is for your iFrame then add this code in your title tag

rev="width: 400px; height: 300px; scrolling: no;"

Replace the items in the brighter red to the size you want and your set.  Here is an example of the full link code as an example:

<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

You could even group pages together like we did with the images above by using this “rel” tag instead: rel=”lyteframe[group1]

Another note on doing this if your using iFrames on your iWebpage: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.  They are both found in the lytebox folder.

Browser Compatability:

This effect was built with browser compatability in mind, so it’s safe to say it works on most all browsers.  The following browsers have been tested with this script:

IE 5.01 SP2 – The fade effect does not work, but the background is darkened (completely).

IE 5.5 SP2 – No known issues.

IE 7.0 – No known issues.

Opera 9.23 – No known issues.

Firefox 1.5+ – No known issues, of course.

Safari 2.0+ – No known issues, of course.

End Notes:

Well that’s it folks.  Hopefully it’s not to crazy for you.  Like I’ve said in other posts.  I usually don’t like having to get into the HTML code after publish if possible, but sometimes to get a cool effect you just gotta.  So don’t work yourself up to much if you don’t get it the first time.  A simple republish in iWeb will let you start over and try again (though I recommend publishing from the File menu with the publish entire site option to get a clean full publish).

View Demo »

Highslide with Images |   Highslide with Flash Files |   Highslide with iFrames

To get started I will separate the tip into Images, Flash, and iFrames (which would include any other html page (websites, videos, youtube, etc)).  Here we go:

Highslide with Images:

Step 1) Add an any image(s) or graphic(s) to your page in iWeb.

Step 2) Open up the inspector and make it a hyperlink in the hyperlink inspector.  Choose to Link To: “A File” and choose the same image (so it basically it is linked to its self).

Step 3) Publish site to Folder, Server, or MobileMe iDisk – Whatever your method is.

Step 4) Download files. I’ve made a special iWeb version of Highslide to simplify things.

Step 5) Unzip the downloaded file called “highslide_iweb.zip” and you will see a folder simply called “highslide”.  Drop that folder into your published site folder (not your webpage folder).  When publishing iWeb makes a index.html file and your site folder (named whatever you named it in iWeb), this is the folder you want to drop this highslide folder into.)

Step 6) Open your favorite HTML Editor (Coda, Espresso, TextEdit) and you are going to find and replace the code below:

Find:

</head>

Replace with:

Step 7) Now we’re going to find and replace one more item:

Find:

title="pagename_files/imagename_1.jpg">

Replace with:

title="Click to Enlarge" onclick="return hs.expand(this)">

When it says “pagename” that means whatever the title of your webpage you are doing this one in the sidebar of iWeb and imagename is the name of the photo you put on the page.  If your not sure what these names are, you can go back into iWeb and take a peek.  Here’s where you will look.

So for example if I was wanting this effect on my page called “iweb09” in my sidebar and my image was named “myimage.jpg”, then my replace code would be:

title=”iweb09_files/myimage_1.jpg”>

Important Note: If you are linking to a shape made in iWeb take off the “>” tag at the end of the search and replace. If you are linking an image to text get rid of the “_1” at the end of the find code.

Basically your are replacing the “title=…” tag of your items.  So if your having a tough time finding the right items to replace just do a search for “title” and copy that whole line “title=”mypage_files/myimage_1.jpg”>” and paste it to replace with the other code.

Step 8 ) Save your modified html file online and your good.

Highslide with Flash Files:

I’m going to go through the flash one a bit faster assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Make flash file (Adobe Flash, Keynote, Bannersnack, etc) be ready to link to it on your hard drive.
2. Make or get an image or button to represent that file (this will be your button.  It could be anything really, text, shape, image, etc) and put it on your iWeb page.
3. Link image/button to .swf file from the hyperlink inspector as a “A File”
4. Publish site
5. Add “highslide” folder to published site folder
6. Open your html page with HTML editor and find and replace the following code:

Find:

</head>

Replace with:

7) Now find and replace these:

Find:

title="pagename_files/flashfile.swf">

Replace with:

title="Click to See Flash" onclick="return hs.htmlExpand(this, { objectType: 'swf', width:300, objectWidth: 300, objectHeight: 250, maincontentText: 'You need to upgrade your Flash player'  } )">

8 ) Replace the items in red with your page name, flash file name, file width (twice), and height.
9) Save your page make sure it’s online and your set.  It looks pretty cool.

Highslide with iFrames:

Again I’m going to go through this one fast assuming you’ve gone through the image one already. So I’m just going to give you the quick steps:

1. Create or Find your webpage that you’ll be iFraming in the highslide zoomer and put it online.
2. Make or create an image or button or text that will pull up this iFrame when user clicks on it and make it a hyperlink in the inspector to “An External Page” and type in the full address of the page (example http:www.iwebunlimited.com/iwebtips/iwebtips.html)
3. Publish site
4. Drop “highslide” folder (downloaded from above) in published site folder
5. Open html file with html editor and find and replace the following code:

Find:

</head>

Replace with:

6) Then find the following code and replace it:

Find:

title="http://www.yourlinkyouadded.com">

Replace with:

title="Click to Enlarge" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">

7) Replace what’s in red with the size your want the highslide to be and the page you linked to. Save online and your set.

Note: If you have a page that has all of these items images, flash, and iFrames.  Use this code to replace in the <head> tags as the first thing you replace

Find:

</head>

Replace with:

Then replace the second one’s with the ones above in their sections with their links.

It makes for a pretty neat effect.  Hope you find it helpful and if your not very comfortable using external editors, just take it slow, be very careful of your code and if you mess up, no big deal, just republish from iWeb and it’ll be brand new again to try again.

Back to Top

Favicons in iWeb

Edit: There is now a much easier way to add a favicon to an iWeb website. This is done using iWeb SEO Tool. Watch the video tutorial to learn how.

Original Article: How to get favicons in iWeb.  First off, lets answer the question, ‘What is a favicon?  A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon. It is an icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page’s favicon in the browser’s URL bar and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title.

For example when you visit Apple.com this is what you see for the favicon.

notice the Apple logo in the URL bar.  Wouldn’t you like to have a custom one of those on your website?  Well here is how.

If using MobileMe to host your site:

First off, favicons are usually as simple as dropping a file on the server and that’s it.  But mobileme is a bit different and makes it a bit harder, but it can be done.  If your hosting on mobileme I would probably recommend that you just forget about having a favicon, cause everytime you make an update to your site you’ll have to go through all these steps again, and you’ll tire of it.  But if your determined to get a favicon on your mobileme site.  Then here is how.

Step 1) Create Graphic
Create a graphic that is 32 x 32 that you want to be your favicon.  You could use Photoshop, Pixelmator, or even design a small something in iWeb and take a screenshot of it by pressing “command + shift + 4” and then drag the crosshairs over your graphic making it 32 x 32, then modify and enhance using Preview.  How ever you decide to make your favicon just make it a graphic that is 32 x 32 and looking the way you want.

Step 2) Save file as .jpeg
Save it as a .jpeg file (If you used the screenshot method then open it in preview and save as a .jpeg).  Name your file “favicon.jpg”

Step 3) Change Extension to .ico
Now, select your favicon.jpg file and simply change the extension to .ico by selecting the file and pressing return on your keyboard and change the .jpg to .ico.  You will then get a warning dialog that says this

Choose “Use .ico” and your favicon is ready.

Step 4) Add favicon to server
Put new favicon.ico file on your iDisk in the site you want the favicon to be.

Such as iDisk/Web/Sites/yoursitefolder/put favicon.ico file here.

Step 5) Find and Open HTML files
I wish that were it, But we have to add a bit of code on each page that you want the favicon to show up on.  So go to your iDisk/Web/Sites/and choose the site folder and find the .html page you want the favicon to show up on.  You now going to open that .html file in something that you can see the html with.  Power users may use something like Coda or Dreamweaver, if you don’t have those apps, it’s OK you can just use TextEdit that comes on every Mac.  But before you go opening the HTML file with TextEdit be sure you fix one thing in the TextEdit preferences under the Open and Save tab, check on “Ignore rich text commands in HTML files” checkbox.  Looks like this:

So now that you’ve done that choose your .html file on the iDisk and right-click or control click and choose “Edit With” and choose your html editor Coda, Dreamweaver, or TextEdit (there are many others too).

Step 6) Add Code
You will now see a bunch of HTML code your going to put the code below inbetween your <head> tags

<link rel="shortcut icon" href="http://web.me.com/username/sitefolder/favicon.ico" />

A good spot to paste this code might be right after your <title> tage of your site.  Just be sure to adjust the text in red to your own info.

Step 7) Add to other pages
Then go through and add that same code to each page you’d like to have the favicon appear.  Vist your site and you’ll see a new fancy custom favicon on your mobileme site.

Notes:

Favicons don’t work with masked domain sites
Favicons with MobileMe don’t work if your site is uses a masked domain.  Many people purchase a domain from say GoDaddy then foreward the domain to their mobileme site (which works great).  Many also decide to mask the domain so when forewarded it doesn’t show the web.me.com/username/site etc. it only shows the domain name.  But just know that if you do that your favicon will not show up.  So if you really want the favicon with your mobileme site you can’t mask it with a forwarded domain.

3rd Party Software
Another Option to get a favicon without doing this manually by the above steps is to use some 3rd party software.  A few are iTweak, iWebExpander, iWeb Valet and they save you a bit of time to add a favicon.  You still have to do it each time your update/re-publish your site, but it could be helpful.  Check out my Links page to check’em out.

If using your own server (i.e. RAGE iWeb Webhosting, GoDaddy hosting, iPower, etc):
If your using another server other than mobileme it’s much easier and it’s a one time shot and your done.  It’s great.  Just follow all the above steps 1,2, and 3 above, then put the favicon.ico file on the root level of your server.  That’s it!  No code to add to the html or anything.  Most browsers will see the favicon.ico file on the root level of the server and it will load it in.  To get the file to the server I would recommend using Transmit which is a good FTP client that helps you get your favicon and iweb html files onto your server.   If you want to make sure all browsers are compatible with it you could add the same code that we did for the MobileMe setting:

<link rel="shortcut icon" href="http://www.mysite.com/favicon.ico" />

Put that code in the <head> section of your document and it’ll guarentee the favicon look, but again most modern browsers will recognize the favicon if you just put it on the root level of the server

Good luck with the favicons hope that helps.

FancyZoom in iWeb

FancyZoom in iWeb, huh? What’s that. Well there are a many websites these days that have that popular image zoom effect so that when you click on the image it animates the photo larger. Well many have asked, how can I do that with iWeb? Well here it is, this is the tutorial to show you just how to do that. Keep in mind this one is a bit more complex, but it can be done without getting your hands to dirty in code.

VIEW DEMO »

Step 1:
Drag a photo onto your iWeb page that you would like the photo fancy zoom to be on.

Step 2:
Click on your photo, and head to the hyperlink inspector and make the image a hyperlink. Where it says “Link To:” choose “A File” and find your same photo that you dragged onto the iWeb page.

Step 3:
Now your done with the iWeb part. Now publish, either to a folder or to MobileMe.

Step 4:
We now need to do just 2 more things. First download this .zip file.

DOWNLOAD FANZYZOOM .ZIP FILE

Once downloaded, open the zip so you have your folder titled “fancy-zoom”. You will see a bunch of files inside of that folder. You’ll need to drag this folder into your site folder. To move to site folder see options below:

If you published to a folder:
Find the web export folder that you published to and you will see inside a index.html file and a folder which is the name you gave your site. Drag the “fancy-zoom” folder into that site folder.

If you published to MobileMe:
Open up a finder window and go to the iDisk. You are then going to search for the “Web” folder, then go into the “Sites” folder, and in there you should see a folder named the name that you titled you site in iWeb. Drag and drop this fancy-zoom folder into that folder (it may take a while depending on your internet connection).

Step 5:
Almost done. We now just have to alter some code. Now don’t get scared quite yet, it’s not to bad. In that same folder that we dropped the fancy-zoom folder you will find a bunch of other files including that page that you want to have your fancy zoom on. Find that html page that you added the photos to and we need to open it up with something that allows you to edit html code. I personally use “Coda” by Panic Software, they even have some trial version so you can try it out or just use it till you get your fancy zoom going. Anyway, you can also simply use TextEdit on your Mac. So here’s what you going to do. Find that .html file, right click, choose “open with” and choose your html editor, it will say TextEdit or Coda or whatever you choose. You will then see all the great code that iWeb users typically try to stay away from, but we just need to alter 2 lines of code. Both Coda and Text Edit have a Find and Replace feature. So press command + F on your keyboard and you’ll get the find and replace window. Simply find and replace these two things:

1) Find:

</head>

Replace:

<script src="fancy-zoom/FancyZoom.js" type="text/javascript"></script><script src="fancy-zoom/FancyZoomHTML.js" type="text/javascript"></script></head>

2) Find:

onload="onPageLoad();"

Replace:

onload="onPageLoad(); setupZoom();"

Then just save (command + s, or File > Save).

Done!

Now that wasn’t so bad eh?

From there you should have a fancy, shmancy zoom that will look great and it will also work on the iPhone. Pretty cool, eh.

Note: You can only use FancyZoom on none commercial websites, if you would like to use FancyZoom on a commercial site you must purchase a license for $39 on Cabel’s Blog (the creator of FancyZoom)

More Notes:

If you are looking to do other things with FancyZoom here are some tips:

• If you want to replace the Title below the photo then, do a search for href and find the title it’s using and change to what you want. Example title=”Add Your Title Here”

• If you want to get rid of the title entirely just Edit the FancyZoom.js file and on line 431, change the “visible” value to “invisible”

• If you want to add a border on the popup just add something like a 10px border on the image by adding the following at line after 63 in FancyZoomHTML.js: inImage1.style.border = ‘10px solid white’;

• FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

• There is not a way to put anything else but photos into the fancy zoom, so no videos, flash, etc. But I’m working on another tutorial to use another method so you can get video and flash in them, check back.