MySpace Tutorial (basic coding)

 

 

 

Want to use part of a layout or build up your own, but not sure how?

 

Using these pages, you will be able to build up your own code set to get the layout you want, without having to have multiple ads in your page from all the different sites you get code from.

 

This page will always be a work in progress as I write more into it now and again and find out more about the general codes used for layouts. I know my little ad banner is in there, but as you progress, you'll learn how to remove this if you don't like it. Although, it would be nice for you to advertise this site if you've found these pages useful, as this site is my own personal site run by just me.

 

As you progress and learn more about the way to paste codes, you could enter all your layout information into the same set of <style> tags, rather than having lots of pieces of code with their own set of tags. The reason I've done this is to make each tip it's own self-contained piece of code, but you'll work out how to compile them all as one code in time. One tip would be to leave a couple of line spaces in your MySpace code in between each code snippet, so you can easily find the separate pieces to either edit or remove them.

 

All you need is to have the any image files you may use in your layout hosted somewhere online first, for you to paste in the location URL of the file into the relevant codes shown here. If your image files are hosted with someone like Photobucket or FileDen, the file locations are easily found to copy. Just add those locations into your code and you're set. There's also a colour chart to help you with the hex codes for the web safe colours.

 

These code snippets have been gathered from round the net, so if any of them don't work how you want, let me know, and I'll try and find a version that works better. Some of these I've tried, and I am enlisting the help of people with testing, but some I haven't, so it's a case of 'caveat emptor' for now.

 

 

 

Page Backgrounds

 

These two examples show how to alter the background colour of your main page to either a colour, or to link it to an image hosted online. These examples have my little banner included in the code. If you use more than one code, you can remove duplicate code for my little ad banner easily (but please leave it in if you've found this page useful, thanks).

 

This example shows the code to alter the page background to a colour.

 

DO NOT ALTER THE FIRST INSTANCE OF 'BACKGROUND-COLOR'!

 

<style type="text/css"> table, tr, td{ background-color:transparent; } body { background-color:#COLOUR CODE; } </style> <a href="http://www.angrypixel.co.uk" target="_blank"><img src="http://www.angrypixel.co.uk/images/layouts/icon.gif" alt="myspace" style="position:absolute; z-index:100; left:0px; top: 0px;" border="0" /></a><br /><br /><p> I went and got some MySpace code from <a href="http://www.angrypixel.co.uk" target="_blank">www.angrypixel.co.uk</a>, and so should you!</p>

 

Copy and paste the above code into your 'ABOUT ME' section (bands paste into 'BIO' section), replacing the words 'COLOUR CODE' with a code of your choice from my colour chart, using the format of #123456 (leave the # in and just replace the capital letters with a six digit code).

 

 

 

This second example shows the code to alter the page background to an image hosted online.

 

DO NOT ALTER THE INSTANCE OF 'BACKGROUND-COLOR' IN THIS CODE!

 

<style type="text/css"> table, tr, td{ background-color:transparent; } body { background-image:url("URL HERE"); background-position:top left; background-repeat:repeat; background-attachment:fixed; } </style> <a href="http://www.angrypixel.co.uk" target="_blank"><img src="http://www.angrypixel.co.uk/images/pagegraphics/icon.gif" alt="myspace" style="position:absolute; z-index:100; left:0px; top: 0px;" border="0" /></a><br /><br /><p> I went and got some MySpace code from <a href="http://www.angrypixel.co.uk" target="_blank">www.angrypixel.co.uk</a>, and so should you!</p>

 

Copy and paste the above code into your 'ABOUT ME' section (bands paste into 'BIO' section), replacing the words 'URL HERE' with the web address of the image you would like to use (e.g. http://www.yourdomain.com/picture.jpg).

 

 

 

The code above places the image in the top left of your page, repeats the image across and down the page, and will not scroll with you as you move down a long page.

 

For more information about these variables, please refer to the list below. Change the 'background-position' value to one of the following to alter your images position on your page:-

 

• top left (positions the image in the top left corner)
• top center (positions the image at the top of the page in the centre)
• top right (positions the image in the top right corner)
• center left (positions the image in the middle of the page on the left hand side)
• center center (positions the image in the absolute centre)
• center right (positions the image in the middle of the page on the right hand side)
• bottom left (positions the image in the bottom left corner)
• bottom center (positions the image at the bottom of the page in the centre)
• bottom right (positions the image at the bottom of the page on the right hand side)

 

 

The two options for the 'BACKGROUND-ATTACHMENT' are 'FIXED' and 'SCROLL', although 'SCROLL' would normally only be used if you were using a tiled background that you wanted to move with the tables on your page, and not a centred image that was only shown once, as this would then scroll out of the top of the screen if not set to repeat.

 

 

If you use an image that is the same or larger than your monitor size, you may want to use the 'center center' value, although, if you use an image that tiles, or is a lot smaller than your monitor size, you can alter the repeat options as detailed below.

 

• no-repeat (no tiling at all, image is placed in position denoted above)
• repeat-x (image is tiled horizontally across the page only)
• repeat-y (image is tiled vertically down the page only)
• repeat (image is tiled both across and down the page)

 

The main two options generally used are 'no-repeat' for when a larger image is used, or 'repeat' for when a smaller image is used as a tiled background. I have found that it's rarer that the other two are used, but they could be used to show a smaller image along the top or down the left or right sides, once the initial image placement has been made accordingly (top left / top center / top right etc).

 

The down side to this repeating method is that if an image is used and repeated in a line down the side or along the top, that the rest of the page remains without a set colour. The way round this is to use a third method, so that a background image can be used, but also a background colour is used to fill the rest of the page. An example of this could be that your image is centred, and the colouring of the image fades to black all the way around. Black is then used as the background colour so that the image looks to be part of the page.

 

Using this code, and using the two lists of positioning and repeat options above, you can use a background colour, an image that you can place in whichever position, and have the image tile in whichever direction needed to make your page look just how you want.

 

DO NOT ALTER THE FIRST INSTANCE OF 'BACKGROUND-COLOR' IN THIS CODE!

 

<style type="text/css"> table, tr, td{ background-color:transparent; } body, body.bodycontent{ background-color:#BACKGROUND COLOR; background-image:url("BACKGROUND IMAGE URL"); background-position:BACKGROUND POSITION; background-repeat:BACKGROUND REPEAT; background-attachment:fixed; } </style> <a href="http://www.angrypixel.co.uk" target="_blank"><img src="http://www.angrypixel.co.uk/images/pagegraphics/icon.gif" alt="myspace" style="position:absolute; z-index:100; left:0px; top: 0px;" border="0" /></a><br /><br /><p> I went and got some MySpace code from <a href="http://www.angrypixel.co.uk" target="_blank">www.angrypixel.co.uk</a>, and so should you!</p>

 

Simply change the words 'BACKGROUND COLOR' for a six-digit colour code from the web safe colour chart, 'BACKGROUND IMAGE URL' for your image address (e.g. http://www.yourdomain.com/picture.jpg), 'BACKGROUND POSITION' for one of the positioning options, and 'BACKGROUND REPEAT' to one of the four choices. This should give you everything you need to put any image anywhere on your page, and have any colour background if your image is not as big as the monitor screen (if using a single centred image).

 

 

 

Table Backgrounds

 

[coming asap]