Coding Tutorial for your PowerPets Profile

 In order to make the details section of your profile beautiful, you will need to use a mixture of CSS coding and php. The following is a short tutorial that will help you to get started. For those of you who are nervous about using coding, I have set this out so that you can copy/paste the code. You will need to replace the colors, text, and such that I have placed in the coding.

 *Explanation of Tags*

 Each piece of coding has an opening and a closing tag. The opening tag declares what code is to be used and the closing tag stops the coding. Every opening tag must have a closing tag unless otherwise stated.

 php and CSS tags are normally surrounded by certain symbols that declare the statement as code so that the browser recognizes it as code and not just text. In this tutorial you will find the following symbols: <> (these are normally used in php), {} (these are normally used in CSS). Those symbols are what declare the code. These symbols – (), ‘’, “”, ;, : – will help define the code.

 *Changing Your Font*

 There are several ways that you can make your font stand out on your page. You can change the color, style, type, and size. All of the following code is to be used in the second box of the profile.

 To change your font color you will need to put the following code before the text:

 <font color=“fontcolorhere”>Your text should be put here. </font>

 You can use either HEX codes to declare your font color, or for basic colors you can simply type in that color. By basic colors I mean red, blue, Black, white, etc. In order to get special colors or different shades of basic colors you can use a search engine to find HEX codes. A hex code is a # followed by six numbers. For example the HEX code for Black is #000000.

 In order to change the type of font you have, you need to enter the following code:

 <font type=“arial”>All of your text will go here. </font>

Beware that Powerpets does not support all types of font. If the font is not supported by Powerpets, the code will not work. I currently do not have a list of those fonts supported by Powerpets, however I shall do what I can to find one.

To make your text bold:

 <b>All of your text will go here.</b>

To make your text italicized:

 <I> All of your text will go here. </I>

To underline your text:

 <u>All of your text will go here.</u>

To change the size of your text:

 <font size=“Numberhere”> All of your text will go here. </font>

Powerpets only allows you to use the numbers 1-10 to change the size of your font. 1 is the smallest and 10 is the largest.

You can use all of these codes together in order to change a large block of text. For example if you wanted all of the text in your profile to be red, Arial, size 9, and bold, all you would need to do is this:

 <font type=“Arial”><font size=“9”><font color=“red”><b> Then you would just put in all the things you want on your profile. At the end of your profile you would put in the closing tags. </font></font></font></b>

In order to start a new line of text, or just to put some space between sections on your profile you can’t just press the enter button. You need to enter a code that tells the browser you want to enter there. The code for this is:

<br>

 This code does not require a closing tag.

 To center your text, use the following code:

 <center>All the text goes here.</center>

*Using a Background Color or Image*

 This is where you’ll use that top box in the editing profiles section and where you will use CSS coding.

 To enter a background color, use the following code:

Body

{

Background-color: Color or HEX code goes here

}

To use an image as a background, you will first need to find an image that you’d like to use. Then upload the image to a free hosting site that will provide a url for the picture.

 For a tiled picture (meaning a small picture that repeats to form one large picture such as the stars on my background) use the following code:

Body

{

Background-image: (‘enter the url provided by the hosting site here’)

}

If you want the background to be stationary while the rest of your profile scrolls (useful for when you have untiled pictures) use the following code:

Body

{

Background-image: (‘enter the url provided by the hosting site here’);

Background-attachment: fixed;

}

*How To Make Lists*

 Making lists can be a little tedious due to the fact that each line will require entering code, however the effort is worth it in the end. J

To make a list use the following code:

<ul>

<li>This is the first line of the list.</li>

<li>This is the second line of the list.</li>

<li>You can have as many lines as you want, just add the li codes at the beginning and end of each line.</li>

</ul>

To make a list with bullets use the following code:

<ul class=“circle“> (you can also use the word square if you want square bullets)

<li>Line one</li>

<li>Line two</li>

<li>etc, etc…</li>

</ul>

To make numbered lists, use the following codes:

 <ol>

<li>There’s no need to put in numbers.</li>

<li>This code will put them in for you automatically.</li>

<li>Just use as many as you want.</li>

</ol>

*How To Insert Pictures*

 Remember that you will need to upload any pictures you’d like to insert on a free hosting site that provides each picture with a url.

 Wherever you want your picture to be, simply use the following code:

 <img src=“url of the picture here”>

There is no closing tag for this. Note that if your picture is too large for your liking, you will need to edit the picture in an editing program, then reupload it.

*How To Make A Horizontal Line*

 If you would like a break between sections in your profile, you can accomplish this with a horizontal line.

 Just type in <hr> where you would like the line to appear. You do not need a closing tag for this.

 If you want your line to be a specific color, use the following code:

<hr color=“HEX code here”>

 This needs no closing tag.

*How To Make a Table*

 Making a table can be a tad difficult if you are not familiar with coding. However I will try to make it as simple as possible.

Each column of the table is defined with the code <td>. Each row is defined with the code <tr>. This is important to know because this will allow you to add as many columns and rows in your table that you want.

 For an example on how to use the code, I will make a table that has three columns and four rows.

<table border=“1” width=“100%” border color=“Black”>

<tr>

<td>Column A</td>

<td>Column B</td>

<td>Column C</td>

</tr>

<tr>

<td>Red</td>

<td>Blue</td>

<td>White</td>

</tr>

<tr>

<td>Circle</td>

<td>Square</td>

<td>Diamond</td>

</tr>

<tr>

<td>Shoe</td>

<td>Skate</td>

<td>Pants</td>

</tr>

I understand how confusing that looks and how much goes into coding such a small table. The first <tr> begins the first row. The first <td> begins the first column, when you are done with that column, finish it with a </td>. The second <td> begins the second column. The third <td> begins the third column. If you wanted more columns in your table, you would simply need to add in more <td>‘s. When you are done with the first row, you close it off with a </tr>. To begin the next row, type in a new <tr>. Then you fill in the columns much like you did in the first row. If you want a column to remain blank in a certain row, all you need to do is add the <td> followed immediately by the closing tag </td>. You can change the color of the table by replacing the color that I’ve entered. And you can thicken the border by increasing the number. If you do not want a border on your table, simply delete border=“1” from the code.

Coding Tutorial for your PowerPets Profile In order to make the details section of your profile beautiful, you will need to use a mixture of CSS coding and php. The following is a short tutorial that will help you to get started. For those of you who are nervous about using coding, I have set this out so that you can copy/paste the code. You will need to replace the colors, text, and such that I have placed in the coding. *Explanation of Tags* Each piece of coding has an opening and a closing tag. The opening tag declares what code is to be used and the closing tag stops the coding. Every opening tag must have a closing tag unless otherwise stated. php and CSS tags are normally surrounded by certain symbols that declare the statement as code so that the browser recognizes it as code and not just text. In this tutorial you will find the following symbols: <> (these are normally used in php), {} (these are normally used in CSS). Those symbols are what declare the code. These symbols – (), ‘’, “”, ;, : – will help define the code. *Changing Your Font* There are several ways that you can make your font stand out on your page. You can change the color, style, type, and size. All of the following code is to be used in the second box of the profile. To change your font color you will need to put the following code before the text: Your text should be put here. You can use either HEX codes to declare your font color, or for basic colors you can simply type in that color. By basic colors I mean red, blue, Black, white, etc. In order to get special colors or different shades of basic colors you can use a search engine to find HEX codes. A hex code is a # followed by six numbers. For example the HEX code for Black is #000000. In order to change the type of font you have, you need to enter the following code: All of your text will go here. Beware that Powerpets does not support all types of font. If the font is not supported by Powerpets, the code will not work. I currently do not have a list of those fonts supported by Powerpets, however I shall do what I can to find one. To make your text bold: All of your text will go here. To make your text italicized: All of your text will go here. To underline your text: All of your text will go here. To change the size of your text: All of your text will go here. Powerpets only allows you to use the numbers 1-10 to change the size of your font. 1 is the smallest and 10 is the largest. You can use all of these codes together in order to change a large block of text. For example if you wanted all of the text in your profile to be red, Arial, size 9, and bold, all you would need to do is this: Then you would just put in all the things you want on your profile. At the end of your profile you would put in the closing tags. In order to start a new line of text, or just to put some space between sections on your profile you can’t just press the enter button. You need to enter a code that tells the browser you want to enter there. The code for this is:

This code does not require a closing tag. To center your text, use the following code:

All the text goes here.

*Using a Background Color or Image* This is where you’ll use that top box in the editing profiles section and where you will use CSS coding. To enter a background color, use the following code: Body { Background-color: Color or HEX code goes here } To use an image as a background, you will first need to find an image that you’d like to use. Then upload the image to a free hosting site that will provide a url for the picture. For a tiled picture (meaning a small picture that repeats to form one large picture such as the stars on my background) use the following code: Body { Background-image: (‘enter the url provided by the hosting site here’) } If you want the background to be stationary while the rest of your profile scrolls (useful for when you have untiled pictures) use the following code: Body { Background-image: (‘enter the url provided by the hosting site here’); Background-attachment: fixed; } *How To Make Lists* Making lists can be a little tedious due to the fact that each line will require entering code, however the effort is worth it in the end. J To make a list use the following code:

This is the first line of the list.

This is the second line of the list.

You can have as many lines as you want, just add the li codes at the beginning and end of each line.

To make a list with bullets use the following code:

(you can also use the word square if you want square bullets)

Line one

Line two

etc, etc…

To make numbered lists, use the following codes:

There’s no need to put in numbers.

This code will put them in for you automatically.

Just use as many as you want.

*How To Insert Pictures* Remember that you will need to upload any pictures you’d like to insert on a free hosting site that provides each picture with a url. Wherever you want your picture to be, simply use the following code:  There is no closing tag for this. Note that if your picture is too large for your liking, you will need to edit the picture in an editing program, then reupload it. *How To Make A Horizontal Line* If you would like a break between sections in your profile, you can accomplish this with a horizontal line. Just type in

where you would like the line to appear. You do not need a closing tag for this. If you want your line to be a specific color, use the following code:

This needs no closing tag. *How To Make a Table* Making a table can be a tad difficult if you are not familiar with coding. However I will try to make it as simple as possible. Each column of the table is defined with the code . Each row is defined with the code . This is important to know because this will allow you to add as many columns and rows in your table that you want. For an example on how to use the code, I will make a table that has three columns and four rows.

Column A

Column B

Column C

Red

Blue

White

Circle

Square

Diamond

Shoe

Skate

Pants

I understand how confusing that looks and how much goes into coding such a small table. The first

begins the first row. The first

begins the first column, when you are done with that column, finish it with a

. The second

begins the second column. The third

begins the third column. If you wanted more columns in your table, you would simply need to add in more

‘s. When you are done with the first row, you close it off with a

. To begin the next row, type in a new

. Then you fill in the columns much like you did in the first row. If you want a column to remain blank in a certain row, all you need to do is add the

followed immediately by the closing tag

. You can change the color of the table by replacing the color that I’ve entered. And you can thicken the border by increasing the number. If you do not want a border on your table, simply delete border=“1” from the code.

 

(Visited 109 times, 1 visits today)