Foopets | Real Virtual Pets Online

Member Login

Coding: Tips and Tricks

Medium
Useful 55

Coding: Tips and Tricks

Hey y’all! So I know a lot of people have been getting into the coding here on foopets. There are a lot of different kinds of codings you can do on your pet profile and I know some people still aren’t sure how they work. Well, I’m here to help you out a bit (hopefully)! An example of different kinds of codings you can use are on Dany’s profile. On there I have included a mouse coding, background coding, and music coding. Now, these are just a couple of the millions of things you could do! Let’s get started, shall we? Also; all codes you want on your pet profile is to put posted to your profile when you click edit to edit your profile.

Background Codings

For background codings, you can either have “repeated” background or “fitted” background. Both are found below….

Repeated Background ~ insert image url where it says “IMAGE URL HERE” and insert approriate dimesions of original picture where it says “650px 650px.”

<style>body {background-image: url(IMAGE URL HERE?v=1445539393); background-size: 650px 650px; background-repeat:repeat; background-attachment: fixed;} </style>


Fitted Background ~ insert picture url where it says “IMAGE URL HERE” and appropriate dimesions of the original picture where it says “650px 650px”

TIP ~ I found that 1920 × 1080 works best for fitted pictures so it does not have the original background of foopets showing on the sides.

<style>body {background-image: url(IMAGE URL HERE?v=1445539393); background-size: 650px 650px; background-attachment: fixed;} </style>


TIP ~ On google, you can see size dimensions when you click on an image before blowing it up full screen. For example, the one below is “1280 × 720”. They will always be located there on google.

TIP ~ If you click on an image and it takes you to a website before straight to the picture (happens with a lot of wallpaper websites) then the picture will generally not work (as it has not worked for me yet).


Popup/Javascript Codings

These codings are the popups you see on people’s profiles with a “warning” message of some sort or just a “hello welcome to so-and-so’s profile”! Whichever you use, it is a great and fun way to show a message! Insert the text you want where it says “TEXT HERE”.

<html> <head> <script language="javascript" type="text/javascript"> alert("TEXT HERE") </script> </head> </html>


Music Codings

For this coding, you have to go to a website, but since outside links are not allowed on foo, you will have to search them for yourself. If you search on google for “tumblr music player” it should be the first choice. The length of the coding will be different for how many songs you want to play. The fun thing about this is that you can customize it to auto-play, replay after done, and shuffle. The SCM player does stay on another page if you change pages, so you have to refresh to make it go away. Another player is the Billy Player.

TIP: SoundCloud works well for song URLs if using SCM player


Mouse Codings

Again, this coding you have to go to a website to get the codings. There are many out there, and like I said above, you can go to google and search “tumblr mouse cursors” for a bunch of different sites. Many of them work well, but I found one that I really like with lots of choices.


Extra Codings

These codings are just for fun for your profile! Some may be ones that others have already discovered, but just for fun, here is a couple of the ones I’ve been shown!

Pile of Snow

<div style="position: fixed; bottom: -50px; left: 0px"> <img src="http://static.tumblr.com/oct6d4x/Xxbmebzz1/snow2.png" /></div>


Falling Hearts

<!--Hearts below, made by dazieh, tutorial at easy-html-tutorials--> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://www.picgifs.com/mini-graphics/mini-graphics/hearts/mini-graphics-hearts-655853.gif";image_urls['rain2']="http://www.picgifs.com/mini-graphics/mini-graphics/hearts/mini-graphics-hearts-655853.gif";image_urls['rain3']="http://www.picgifs.com/mini-graphics/mini-graphics/hearts/mini-graphics-hearts-655853.gif";image_urls['rain4']="http://www.picgifs.com/mini-graphics/mini-graphics/hearts/mini-graphics-hearts-655853.gif";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script> <!--Hearts above, made by dazieh, tutorial at easy-html-tutorials-->


Falling Bubbles

<!--Bubbles below, tutorial at easy-html-tutorials--> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://i40.tinypic.com/2m34m6u.png";image_urls['rain2']="http://i40.tinypic.com/2m34m6u.png";image_urls['rain3']="http://i40.tinypic.com/2m34m6u.png";image_urls['rain4']="http://i40.tinypic.com/2m34m6u.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv') .css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)]) .css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script> <script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script> <!--Bubbles above, tutorial at easy-html-tutorials-->


Colors and Fonts on Pet Profile

I love this and thanks to QueenKate- we can all enjoy it! So check out her thread here for some fun, colorful, and beautiful codings for your profile! Quick coding below.. Color Only one is below, Script/Font and Color is under the Color Only coding.

*{color:COLORNAME}<small>TEXT HERE*

p={color:COLORNAME;font-size:FONTSIZEpx;font-family:FONTNAME;}. <small>TEXT HERE


Happy Coding!

Medium

Thanks for making this! I came back after a break and when I came back and looked at one of my friend’s pet’s profiles I was like: what?

Medium

No problem :)

Medium

This is great! I couldn’t seem to figure out the other guides, but this was perfect.

Medium

Great job Ace!

We were doing the same kinda thing at the same exact time, lol.

(Though we both offer tons of different kinds of info which is awesome!)

I posted mine in our User Supported Support Forum.

Hope you don’t mind if I add link here as well. =)

FYI – Additional info about such things and more here

And, I added link to this thread of yours at my 1st FooHome for all to enjoy!

Medium

Butterflylit Thank you! ;D
Elisabet I’m glad it helped you!
DLionHearts Of course, feel free! :)

Medium

this is really helpful! thank you!

Medium

Bookmarking!

Medium

Moo Of course!
Thanatopsis Awesome! :)

Medium

Thanks for the reponse! <3

Medium
Useful 4

If you’re using the Billy music player, you need a direct MP3 link, which can be a bit tricky to get. I use Drop Box and then change the URL to a direct download which works fine. If you want some help Fire let me know :) I’ve done a few for people haha.

Medium

I use the SCM player and for me, you just had to copy and paste the code after you pick out your music and such and.copy it onto a pet profile under the edit portion.

Medium

The falling heats code didn’t work for me

Medium

And SoundCloud works well for song URLs (if you’re using SCM player) and I have some ‘mouse codes’ if you’re interested in adding them?

Medium

A problem with the SCM Music Player that I’ve been getting is if you click on a profile with it on and then go to a different page it stays. I don’t know if this is the same for other players.

Good thread, by the way :" )

Medium

Yeah I don’t like the players some people use where it just stays when you leave the page and you have to close the entire page/tab to get rid of it. That’s why I prefer the Billy Player.