advanced techniques

custom/transparent background

you can make your pet transparent so that the background of your web page shows through! this requires the "myspace" version of the code (note that the "myspace" version also works with many other websites, like blogger or xanga).

add wmode="transparent" to the embed tag. here's an example:

<BUNNYHERO PET START />
<div style="width: 250px; padding: 0; margin: 0; text-align: center">
<embed wmode="transparent" src="http://petswf.bunnyherolabs.com/adopt/swf/bunny" width="250" height="300" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="cn=sparx&an=bunnyhero&clr=0xe8e8e8" type="application/x-shockwave-flash">
</embed><br />
<small><a href="http://bunnyherolabs.com/adopt/">adopt your own virtual pet!</a></small>
</div>
<BUNNYHERO PET END /> see what it looks like

here's an example of combining the transparent background with a BACKGROUND IMAGE! simply insert ;background-image: url(URL to background image) into the style attribute of the div tag in the code. make sure it is inside the quotes, and don't forget the ";": <BUNNYHERO PET START />
<div style="width: 250px; padding: 0; margin: 0; text-align: center ;background-image: url(http://petimage.bunnyherolabs.com/adopt/bg/tree.jpg)">
<embed wmode="transparent" src="http://petswf.bunnyherolabs.com/adopt/swf/bunny" width="250" height="300" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="cn=sparx&an=bunnyhero&clr=0xe8e8e8" type="application/x-shockwave-flash">
</embed><br />
<small><a href="http://bunnyherolabs.com/adopt/">adopt your own virtual pet!</a></small>
</div>
<BUNNYHERO PET END /> see the live example, with background image

change the text colour

if you want to change the colour of the text (like the pet's name, and "adopted by"), then you need to add some code to the flashvars tag.

find the flashvars bit. it will look something like this: flashvars="cn=hoppy&an=bunnyhero&clr=0xffffff" then add &tc=0xhhhhhh inside the quotes, where hhhhhh is the 6-digit hex code for the colour you want.

for example, if you want green text (hex code 00ff00), the modified code would look like this: <BUNNYHERO PET START />
<div style="width: 250px; padding: 0; margin: 0; text-align: center">
<embed src="http://petswf.bunnyherolabs.com/adopt/swf/bunny" width="250" height="300" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="cn=sparx&an=bunnyhero&clr=0xe8e8e8&tc=0x00ff00" type="application/x-shockwave-flash">
</embed><br />
<small><a href="http://bunnyherolabs.com/adopt/">adopt your own virtual pet!</a></small>
</div>
<BUNNYHERO PET END /> see the example in action.

additional notes

you can (and probably will want to) combine the two techniques. here's an example that has a custom background image as well as a custom text colour: <BUNNYHERO PET START />
<div style="width: 250px; padding: 0; margin: 0; text-align: center ;background-image: url(http://petimage.bunnyherolabs.com/adopt/bg/tree.jpg)">
<embed wmode="transparent" src="http://petswf.bunnyherolabs.com/adopt/swf/bunny" width="250" height="300" quality="high" bgcolor="ffffff" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="cn=sparx&an=bunnyhero&clr=0xe8e8e8&tc=0x00ff00" type="application/x-shockwave-flash">
</embed><br />
<small><a href="http://bunnyherolabs.com/adopt/">adopt your own virtual pet!</a></small>
</div>
<BUNNYHERO PET END /> see how it looks

have fun with these advanced techniques!