An understanding of HTML coding and how to Edit. (locked)
HTML is an abreviation for “HyperText Markup Language”. It is written in a way for your computer to understand and is used to display all web pages. You can view the coding of any web page by “Viewing the Page Source”. For Firefox users you can do this by right click on a web page and selecting “View Page Source” or selecting this from the “View” drop down menu at the top of the page.
HTML coding can be very useful, and you can use it here on foopets but with limitations. The HTML coding is not placed in the “Textile Markup” on editing your profile, but in there are some basic ways of designing your profile page.
HTML has a structure, editing this stucture can gain you many benefits when you go to edit your profile page. Including the removal of outside links from sites such as Tinypic or Photobucket while using the HTML code they have given you to post an image.
Here is an example of a standard Image HTML Code;
As you can see this code only has one sequence. However here is an example of a code which has two sequences;
As you can see this code has a beginning sequence at the start of your text and an ending sequence when you have finished your text. This is the code to make bold text and if you do not close the sequence at the end then the rest of what you type will be in bold even if that was not your intention.
For example for bold the symbol is the letter “b”
Each command has a different symbol and you can use these symbols to identify what is in the code.
You now know that a code has an opening tag , < , and a closing tag , > , and may have two seperate sequences, an opening sequence and an ending sequence. Also that each command has a different symbol. You now have all of the information to begin altering codes.
The most common code on foopets is the HTML code supplied by sites such as Photobucket and Glitter-Graphics which have three parts to the code
The only section you will need out of any code to display an image on your profile is the Image source, which looks like this;
Any excess in the Image source, such as the border or the alternate you do not need, and you can delete these sections from the code and replace them with a closing tag, > . Please remember that if you are starting a command with familiarities such as src=“image URL here” you should have both quotation marks in place or the code will not work.
The site reference has two sequences to it and this is how it looks;
This is the part of any code which makes the image or text clickable, and if the URL is back to Photobucket or the site which supplied the code then when you click the image you will be redirected to that site, you do not need this section and you can delete the beginning sequence and the ending sequence.
Altering Codes to gain different effects
Before altering any code you must first have the basic code.
The class is what you can add into the code to give it a different effect, for example;
As you can see by adding the class as “pink” we have changed the colour of the bold text to pink instead of the default black. The only colours which the foopets text reader will respond too and show are the colours; “pink”, “blue” and “red”. Any other colours do not work in this code because Foopets has limited it and the green can only be used in headers, however the other colours can be applied to the headers in the same manner.
This is how you can use the class of the code to change the colour, you can also change the position of an image or position of text on the page (right or left).
Here are some codes that you can use on your foopets or your profile.
Pink Text Bold
Blue Text Bold
Red Text Bold
Text Pink itallics
Text Itallics Blue
Type in another Font:
I have left out some codes because they are already posted in the User Support forum many times.
Don’t be afraid to experiment
You shouldn’t be afraid to try and combine two codes together. Such as this code here;
This code combines a Link back to your own profile, a Title for the image, the image locaton to the right of your profile page and the image source for the image to display on your profile. There are many ways to alter and experiment with different codes, you can combine many ext effects toether in one long code such as this one;
This code combines the itallics pink font with the bold font. One Rule while combining two or more codes together is that you must order it. In the example above I have used the itallics code first in the sequence, this means I must use it last in the sequence so as they are aligned or your computer will not display the text correctly, If I put them in the wrong order, like this;
Then your computer would not be able to understand the command for it would read it like this;
There is a glitch in the pet profile which does not correctly turn a space using the enter key into the correct code (listed a bove). Which causes the code to repeat with each view of a foopet profile, including from you. Upon 15 views tere would be 15 additional spaces added, which leaves a huge gap between your writing. While writing in your foopet profile you should not space out any information into paragraphcs and use the code
For a more in depth evaluation of this glitch, please view this board; Quick Fix for a Pesky Glitch
When posting from forums the text reader cannot acknowledge the “&” in any forums links, this causes the text reader to revert the & into it’s normal code “amp;”, which in time you can find the Link filled with many of these “amp;”’s and a very long URL. To avoid this please look at this URL and I will teach you how to edit it;
As you can see there is a lot of information in this Link, such as the forum Id and the post count or Page number, you don’t need this unless linking a specific page, and so you can delete these sections until it looks like this;
This cleans up the URL and leaves no room for glitches to occur.
“Click to go to the top”
You can place a button, image or text which when clicked will take you straight back to the top of the page without reloading the page or scrolling up manually.
You can do it by adding a hash number key, # , to the end of your Profile URL.
For an image this is what I would put;
Or for text;
It is a very useful, easy and quick add-on for your profile!
Thank you for viewing my forum post, I’ve seen many members ask for certain codes and instead of repeating myself I decided to make this board so as I can reference it for them to look into.
However please do not bump this “guide” for that is not allowed, please however if you think this would be useful in the present or for future reference bookmark or share this board with someone needing help.
Note: Please remember that you are not allowed to post outside links to any other site. Only from Foopets.com or Fooradio.com. Thank you.
I am leaving this for awhile. This is very useful and alot of members have been asking about this so this is why I have made this into a sticky. IF members practice any of this on here, it will be locked. Please practice on your profile
Okay! Thanks for this guide! This will be very useful to members! COngrats on the Sticky, btw!
Thank you! The text colour guide will come in very handy! C8
Some of that I didn’t even know. O.O Very useful! :)
I barley understand the title! LOL
But the color guide is very useful! :)
This has been really helpful, thankyou for this
Here is an add-on to my first post
This is the HTML coding for doing this text;
Small gray font
You can alter this font accordingly with all other HTML codes such as Header three or changing the text colour.
Thanks much Skeltoness:) This is wonderful information and I’m glad they’ve made it a sticky:)
This. Is. So. Useful. This is going to help a lot when I start web designing. :D
The is reallly cool[/sub]