Foopets | Real Virtual Pets Online

Member Login

Petterz's Guide to Pet Profile Coding (locked)

Medium
Useful 35

Message me if you discover something you want to be put in ~

Notes:

- Will NOT be adding the image positioning as you can find that on a different formatting guide.
- Some effects require flash player, which means (certain)phones will not be able to play effects
- The things in CAPS LOCK are the things you edit. They are in brackets. You can remove the brackets as well
- Test this out on your pet’s profile. Not here.
- Do not comment on “how cool this is” on here. I prefer it not to get locked.
- Some of these effects require you to know how to convert things etc. We cannot share outside links on foo, which means you have to look into it.
- Things done in the other formatting guides will not be shown here.
- To find a specific code on this page, use ctrl and the letter f key and type what you are looking for in. Code names should be straight-forward.
- To further help you explore the realm of codes, you can test it out by using “inspect element”

Acknowledgments

- Some ideas used from Asteria and HighPriestess (= (when first created)
Thanks, Koda91 for all your help as well

Updates

Updated on:
3/31/16
4/3/16 – fixed scroll box code
4/26/16 – Added youtube option
4/30/16 – Added text color in pet description & removed youtube code due to rules
5/1/16 – added explanation about html tags. Added long code section.
5/2/16 – added stat personality colors & fixed alert box code
5/3/16 – added content background code, text shadow, and more stat personality codes
6/13/16 – added link color change
6/15/16 – fixed scroll box code & added magnify code
7/3/16 – added option to underline text
12/6/16 – added how you could change pet’s name into a picture.
1/14/17 – added to pet’s name change into a picture.
1/18/17 – added how to move image side to side.
8/1/17 – added one forum code

Code Notes:

<head> is a code used to store your data for your pet’s profile to work and function. (store “metadata” – data of data)
<body> will code for the whole profile of your pet’s profile
<div> will code for a certain specified section of your pet’s profile
- Most codes that are posted here that have the "<div>" tag can be changed to <body> or <head> as well.
- NOTE IMPORTANT: Quite similarly, you can change the “p {…” to “body” or any of those semantic elements (header, body, #content, etc…)
- By color number I mean the Hex code. Be sure to put a “#” before the hex code
- Text Align has the option to center text!! Many people keep thinking it is not there when it definitely is.
- YOU CAN CENTER THE NAME by using the code for the “Pet’s name in a new font & color” – just add text-align: center; in “{” “}”

Forum Effects

Go Here

How to center forum text

 &nbsp;

Use a bunch of these to get it centered to your preference

Text effects

To get Fonts

p={ font-family: [INSERT FONT HERE] }. [TEXT HERE]

Font Options

MV Boli
Times New Roman
Segoe Script
Mistral
Comic Sans MS (Thanks Aphotiic!)
Impact
Georgia
(if you have any, please let me know).
Additionally, you can go to google fonts and they have HTML codes to install different fonts that work on pet profiles (=

To Get colors

<font color="[INSERT COLOR NUMBER HERE]"> [TEXT HERE] </font>

To get centered text

<center> insert images and text here </center>

To specify the size of text

p={ font-size:[INSERT PIXEL NUMBER]px }. [TEXT HERE]

You can combine font and size by:

p={ font-size:[PIXEL NUMBER]px; font-family:[FONT HERE]}. [TEXT HERE]

Align Text – THIS IS HOW YOU CAN GET CENTERED TEXT FOR THE TOP

<style> p {text-align: [TYPE OF ALIGNMENT HERE] } </style>

You can do these three types of alignment: left, right, center, or justify

To Get a Text Shadow

<style> p {text-shadow: [NUMBER HERE]px [NUMBER HERE]px [NUMBER HERE]px #000000;} </style> 

The first “px” moves it left or right. The second “px” moves it up or down and the third “px” determines the blur radius

To Get text that moves/scrolls to side

<font color="[YOUR COLOR HERE]"><marquee direction="[SPECIFY DIRECTION]" style="border:[BORDER COLOR # HERE] [PIXEL NUMBER HERE]px solid;"><small>[YOUR TEXT HERE]</marquee></font>

To get text color for foopet description (“Pet is born on…”)

<style> p { color: ENTER COLOR HERE}. </style> 

Thanks, Koda!

To get the top text in a new font

Example

<style> p { font-family: [FONT HERE]}. </style>

To get links in a new color

<style> #content a { color: [COLOR HERE]}.</style>

Thanks, Vulpixx!

To get Pet’s Name in a new font & color

 <style> div#pet_profile h1 { color: [COLOR HERE]; font-family: [FONT HERE]}.</style>

To get Pet’s name underlined

<style> h1 { text-decoration: underline; }. </style>

Thanks, AmazingAmy-!

To get copy right info (the footer) into a different font and color

<style> #copyright { font-family: [FONT HERE]; color: [COLOR NUMBER HERE]}.</style>

Other effects

To Get a Background (body)

Example

<style>body {background-image: url([IMG URL HERE]); background-size: [NUMBER HERE]px [NUMBER HERE]px; background-repeat:repeat; background-attachment: fixed;}</style>

NOTE: Do NOT use a tumblr one in which the background will lead offsite.

To Get a Background (content)

<style> #content {background-image: url([IMG URL HERE]); background-size: [SIZE NUMBER HERE]px [SIZE NUMBER HERE]px}</style>

Thanks, Koda!

To Get Pet’s Name as a Picture

find a picture of your liking (set the width to 540px though) and then adjust your text to fit the image

<style> div#pet_profile h1 {color: transparent; background-image:url(IMAGE URL HERE); font-size: [FONT SIZE HERE]px; background-repeat: no-repeat;}.</style>

Alert Boxes

<script language="javascript" type="text/javascript">
alert("[INSERT ALERT HERE]")
</script>

Music

<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=[CHOOSE "true" OR "false"]&f0=[MP3 URL]&t0=[TITLE HERE]&total=1" quality="high" wmode="transparent" width="[NUMBER HERE]" height="[NUMBER HERE]" name="billy" align="middle" type="application/x-shockwave-flash" /> 

Note about music: Foopets requires foo appropriate music, which means not explicit music (music that has a bad/inappropriate theme to it) and no curse words. Please do not abuse this power, or it may be forbidden.

To further explain, it’s definitely easier to get a code from something offsite by searching music html coding or something along those lines. I will toggle with the music code more to get a certain code for it.

Additional note: (Thanks, Gottheart!) You can upload your mp3 file to dropbox and use cloudlinker in order to get a direct link. This has worked successfully.

Alternative music option

see explanation here <— This one I do not like as much since it seems to stay on your page even if you want it to go away.

To Get a Cursor;

<div style="cursor:url('[INSERT CURSOR HERE - WILL EITHER END IN GIF OR SOMETHING ELSE]'), auto;">[PUT TEXT, IMAGES AND WHAT NOT HERE WHERE THE CURSORS WILL BE SEEN]</div>

Scroll box for text

 <div style="background:url([IMAGE URL HERE]); width: [NUMBER HERE] px; height: [NUMBER HERE]px;"><div style="width: [TEXT BOX # HERE]px; height: [TEXTBOX # (SIZE) HERE]px; overflow-x: auto; overflow-y: auto; float: left; font-family: [FONT NAME HERE]; font-size: [NUMBER HERE]px; margin-left: [NUMBER HERE]px; margin-top: [NUMBER HERE]px; ">[TEXT HERE]</div></div>

Magnify an image

<html><body><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="[PICTURE HERE]" alt="file" width="[NUMBER HERE]" height="[NUMBER HERE]">
<script>function bigImg(x) {x.style.height = "[NUMBER HERE]px"; x.style.width = "[NUMBER HERE]px";} function normalImg(x) {x.style.height = "[NUMBER HERE]px"; x.style.width = "[NUMBER HERE]px";}
</script></body></html>

Adjust image size (thanks, Sirens-!)

<img src="[IMAGE URL HERE]" width="[WIDTH THAT YOU DESIRE HERE]">

Captions to images

<figure>
  <img src="[INSERT IMAGE URL]" alt="[INSERT TITLE]" width="[INSERT # YOU WANT YOUR WIDTH TO BE]" height="[INSERT # FOR HEIGHT]">
  <figcaption>[INSERT CAPTION/TEXT]</figcaption>
</figure>

Falling images

See here
May try to simplify it ^^
- You can change the image URL in order to have different falling images.

Get a colored divider

<hr width="[NUMBER HERE]%" size="[NUMBER HERE]" color="#[COLOR NUMBER HERE]">

How to make an image move side to side

<marquee behavior="alternate">
<img src="[IMAGE URL HERE]" alt=""> <p></p><p></p>
</marquee>

Stats

Images/text above stats

[Text and or images here will be below stats] <tr> [Text and or images here will be above stats]

Changing Stats Colors

From Remsie: I apologize for taking so long to get back to you. It will be okay as long as it does not change graphics and/or wording/stats etc. all together.

Thanks, Koda!

Above Average Stat Background

<style> table.personalities td.val span.above_avg { background-color: [INSERT COLOR NUMBER HERE]}.</style>

Note for backgrounds: You can also insert a background image by replacing the “background-color:” with “background-image:” and then after the word, “Background-image:” put “url([IMG URL HERE)”

Average Stat Background

<style> table.personalities td.val span { background-color: [INSERT COLOR NUMBER HERE]}.</style>

Background of area behind the stats

<style>table.personalities td.val {background-image: url([IMG URL HERE])};</style>
<style>table.personalities td.val {background-color: [COLOR NUMBER HERE];}</style>

Text Color – for stats

<style> table.personalities td.val span { color: [INSERT COLOR NUMBER HERE]}.</style>

Text color – Max and Min numbers

 <style> table.personalities td { color: [COLOR HERE]}.</style>

Text color – Words next to stats

 <style> table.personalities th { color: [COLOR HERE]}.</style>

You can also add a semicolon after the color number you entered and then add another attribute such as “font-family: Times new roman”. i.e:

<style> table.personalities th { color: [COLOR HERE]; font-family: [FONT HERE]}.</style>

* Long Codes

Sparkly Cursor Trail

<script type="text/javascript">
// <![CDATA[
var colour="#[ENTER COLOR NUMBER HERE]";
var sparkles=120;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}
function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}
function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}
function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}
// ]]>
</script>

Bubbly Cursor Trail

<script type="text/javascript">
// <![CDATA[
var colours=new Array("#[BUBBLE COLOR NUMBER]", "[BUBBLE COLOR NUMBER]", "#[BUBBLE COLOR NUMBER]", "#[BUBBLE COLOR NUMBER]", "#[BUBBLE BACKGROUND COLOR NUMBER HERE]"); 
var bubbles=66; 
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
  var rats, div;
  for (var i=0; i<bubbles; i++) {
    rats=createDiv("3px", "3px");
	rats.style.visibility="hidden";
	div=createDiv("auto", "auto");
    rats.appendChild(div);
	div=div.style;
    div.top="1px";
    div.left="0px";
	div.bottom="1px";
	div.right="0px";
	div.borderLeft="1px solid "+colours[3];
	div.borderRight="1px solid "+colours[1];
    div=createDiv("auto", "auto");
	rats.appendChild(div);
	div=div.style;
    div.top="0px";
    div.left="1px";
	div.right="1px";
	div.bottom="0px"
	div.borderTop="1px solid "+colours[0];
	div.borderBottom="1px solid "+colours[2];
	div=createDiv("auto", "auto");
	rats.appendChild(div);
	div=div.style;
	div.left="1px";
	div.right="1px";
    div.bottom="1px";
	div.top="1px";
	div.backgroundColor=colours[4];
	div.opacity=0.5;
	if (document.all) div.filter="alpha(opacity=50)";
    document.body.appendChild(rats);
	bubb[i]=rats.style;
  }
  set_scroll();
  set_width();
  bubble();
}}
function bubble() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<bubbles; c++) if (!bubby[c]) {
      bubb[c].left=(bubbx[c]=x)+"px";
      bubb[c].top=(bubby[c]=y)+"px";
      bubb[c].width="3px";
	  bubb[c].height="3px"
	  bubb[c].visibility="visible";
	  bubbs[c]=3;
      break;
	}
  }
  for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
}function update_bubb(i) {
  if (bubby[i]) {
    bubby[i]-=bubbs[i]/2+i%2;
    bubbx[i]+=(i%5-2)/5;
    if (bubby[i]>sdown && bubbx[i]>0) {
	  if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
		bubb[i].width=bubbs[i]+"px";
		bubb[i].height=bubbs[i]+"px";
	  }
      bubb[i].top=bubby[i]+"px";
      bubb[i].left=bubbx[i]+"px";
    }
    else {
      bubb[i].visibility="hidden";
      bubby[i]=0;
      return;
    }
  }
}
document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sleft;
  x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  else {
    swide=800;
	shigh=600;
  }
}
window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height;
  div.style.width=width;
  div.style.overflow="hidden";
  return (div);
}
// ]]>
</script>

Slide shows

<head><center><script type="text/javascript">
var photos=new Array()
var photoslink=new Array()
var which=0
photos[0]="[IMAGE URL HERE]"
photos[1]="[IMAGE URL HERE]"
photos[2]="[IMAGE URL HERE"
var linkornot=0
var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}
function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}
function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}
function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}
function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}
function transport(){
window.location=photoslink[which]
}
</script></head><body><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="0" height="2"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td></tr>
  <tr>
    <td width="50%" height="2"><p align="center"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="2"><p align="center"><a href="#" onClick="forward();return false">Next Slide</a></td></tr>
</table>
</body>

Note: You can add more photos by adding another line of photos[[NUMBER OF PHOTO YOU ARE ON HERE]]=“[IMAGE URL HERE]”

Having difficulties? Message me here

Medium
Useful 24

Up

Medium
Useful 13

Please don’t bump in this forum. Since this exceeds the 72 hr rules, I have locked it

Please read the RoC …. Under Rule # 4 …titled Bumping