How to use these graphics on your website

After you've generated a new smashup and your happy with the way it looks, download the smashup as a zip file by clicking the link labeled "Click here to download a zip archive of all the files". You will then be prompted to either save or open the file.

Choose "save" to store the zip file to a memorable location on your computer.

The zip file contains all the files needed to use the smashup on your website. Extract the files from the zip using your favorite compression software. I prefer to use 7-zip because it's open source and works on variety of operating systems. WinZip will work as well.

After the files are extracted, you can preview the smashup on your computer by double clicking on "index.html". This will open a new browser window and display the smashup just like it looked on this site.

For simple text and logo smashups, all you will probably need is the image file. For more complicated smashups like the example below, you'll may need to edit some of the html, css and javscript to integrate into your existing web pages.

Finally, upload the files to your site using your favorite ftp client software. I like the open source ftp client named Filezilla.

Note: Smashups will only be available for download for a limited time. This is necessary to save space for other smashups to be generated. When a smashup expires, the page will display "This smashup has been removed to clear space. Please regenerate and then download."

Here's an example of how to use a Rounded Corner Outline with Titlebar smashup on your own website.

First, generate the smashup. My site has a white background, and I want blue title bars, so I used the following values:
Height: 25
Top Corner Radius: 2 (I want my top corners to be square)
Bottom Corner Radius: 4 (I want my bottom corners to be square, I had to play around with this value to get it how I liked)
Background Color:#ffffff
Titlebar Color:#245397
Border Thickness: 2
Border Color:#245397

Here's a screen shot of the preview:

Next, download the zip file by clicking the link labeled "Click Here to download a zip". Remember to choose "save" when prompted:

Next, extract the files from the zip. In this example, this will create an "index.html" file, a "smashup.css" file (which is referenced inside index.html) and a few image files. Different smashups will create different files. For example, most text smashups create just 2 files: index.html, and one image file.

The final step is to copy the html from index.html into your existing html web pages and Edit the text as needed. For example, to create the menu below, I copied everything inside the body tag of index.html and pasted it in this page. I changed the "smashup-header" div to display "My Menu" and I added a unordered list of links inside the "smashup-body" div with two links: Welcome and Contact. Then I copied the css out of smashup.css and added it as an inline css stylesheet so that the divs are styled and the background images work.