I have created a test site with a BannerZest banner in the header here:
www.isawhow.com/_tests/bannerzest-food/
There is a wiki howto explaining the method, created by Aquafadas here:
www.aquafadas.eu/wiki/BannerZest:Sandvox:Header
Update: After many experiments I found an easier way to add the BannerZest header which doesn't involve editing the bz.js file on the server.
My Notes:
- The width of the Sandvox Design I used is 771px. I made the BannerZest banner this same width of 771px.
- I published the BannerZest banner to its own folder. This allows me to have multiple different banners on the same site.
- Disadvantage: Using the method described below which is based on the Aquafadas wiki, the banner covers the Navigation menu. I used a Collection Index pagelet for navigation as a work-around.
- Using this method the banner comes below the Header text and is not centred. This is why I set the BannerZest banner to 771px.
- I have discovered that the banner comes *above* the text and *is* centred if you are *not* editing the bz.js file on the server. This makes adding the banner even less fuss AND the slideshow works on the iPhone without any edits.
Update for iPhone:
- Version 2 of BannerZest Pro has a slideshow output option as an alternative for devices without Flash e.g. the iPhone. 'Alternate' needs to be checked on the Publish tab of BannerZest. If this is checked, to make this work for your Sandvox site, replace all exact references to the text that starts "SWBZ..." with "sitemenu-container" in the bz.js file. This only needs to be done if the "sitemenu-container" change has been done.
I used the cPanel File Manager on my web host server to edit the file mentioned below. The howto of what I did is called cPanel File Manager to edit file.
Sandvox - BannerZest in Header
The steps to add a bannerzest created banner to the header area of a Sandvox Pro site.
In BannerZest:
Publish the banner to your website site
Click Show HTML
Click 'Copy this code' button for the 'on your website' code
In Sandvox Pro:
To see the BannerZest header within Sandvox, Check Show live data feeds
Click Sandvox > Preferences... to open the dialog window.
Close the Preferences window
Right-click the Header box. Left Click Edit Raw HTML...
Paste the Bannerzest code copied earlier
Delete all the pasted code after and including <noscript> . That includes all of both <div> tags, as shown above.
Note: The text in this screenshot: I typed in the text "BannerZest Header" after pasting the code and it appears above the BannerZest banner in the published site in my experiment.
Copy the name of the title div id.
This is "sitemenu-container" by default
To find what this is click:
View > Web View > HTML Source
Look at the name in quote for the <div id= after the red tag and copy the text
Click:
View > Web View > Standard Web View
to return the view to normal
On the Website server:
Open the published BannerZest file bz.js
Select all occurrences of text starting "SWBZ..."
The easiest one to find is towards the bottom of the document as shown. By replacing all occurrences, the Flash animation is replaced by a slideshow of the iPhone and non-Flash enabled devices. Alternate needs to be checked on the Publish tab of BannerZest Pro.
Replace selected text with "sitemenu-container"
and Save changes
Or the title div id name if it is different.