Advanced MySpace Editor

Making a MySpace Layout

• Example 1
• Example 2
• Example 3

• About This Editor
• Basics
• Background
• Tables
• Text
• Tweaks
• Opacity filter issues

Alright folks... Let's make this quick and painless...

First of all, to toggle this window on and off, click on the Help button.

Next, let's run through a couple of quick examples to get you up to speed...

OR

(Click here to jump to a detailed run-down on how this MySpace editor works.)

QUICK EXAMPLES

EXAMPLE 1
(Full Background / No Tables)

Let's make a layout that uses a full page background that doesn't get obscured by any table styles (no table colors or borders). For this example, we'll do it the 'easy' way.

Before beginning, you should wipe the slate clean by clicking on the Reset button and then clicking on the UPDATE link beside QUICK PREVIEW.

The section currently loaded in the editor should now be Background.

Background

1. Click on Select Background
2. Leave the box Insert background using suggested preset? CHECKED.
3. Scroll down and click on the 'These Are Not Dark Days 2' background thumbnail. The background image will be automatically inserted (for dialup users, it may take 10-15 seconds for the selected background to appear in the QUICK PREVIEW box).

That's it for this section. Now we'll skip over the Tables section and move on to...

Text

1. Click on the Text tab to load the Text section
2. Click on the Color PICKER beside the Table link color option
3. Click on the wheat color swatch (5th row, 5th from the left)

And that's it!

Click on the Preview Layout and Get Code button to check out the results!

^ Back to menu ^

EXAMPLE 2
(Full Background / No Tables)

Okay now let's make another layout using a full page background but this time we'll go a different route so that you can get better acquainted with the editor options.

Once again before beginning, you should wipe the slate clean by clicking on the Reset button and then clicking on the UPDATE link beside QUICK PREVIEW.

The section currently loaded in the editor should now be Background.

1. Click on Select Background
2. Click to clear the box beside Insert background using suggested preset?
3. In the MORE BACKGROUNDS!!! menu, click on the MUSIC option to load the Music background page.
4. Scroll down and click on the 'Bass - Strings n pickups' background thumbnail. The background image will be automatically inserted (for dialup users, it may take 10-15 seconds for the selected background to appear in the QUICK PREVIEW box).
5. Back in the Backgrounds section beside Quick Presets, click on Transparent tables - LIGHT TEXT.

That's it for this section, now we'll skip over the Tables section and move on to...

Text

1. Click on the Text tab to load the Text section
2. Click on the Color PICKER beside the Header link color option
3. Click on the darkgray color swatch (1st row, 4th from the left)
4. Click on the Color SLIDER beside the Text color option
5. Move the Hue slider to 30 and the Saturation slider to 45 (leave the Brightness slider at 100)
6. Click on USE THIS COLOR
7. Now click to open the dropdown menu beside Font family
8. Click to select Franklin Gothic Med.
9. Click to open the dropdown menu beside Font size
10. Click to select 14px

That's it!

Click on the Preview Layout and Get Code button to check out the results!

^ Back to menu ^

EXAMPLE 3
(Tiled Background / Show Tables)

Okay wanna take this editor to the max?

This time we're going to make a layout that uses a tiled background and we're going to accentuate the tables by applying a table color and a table border. Then we'll apply a filter to make the tables semi-transparent and a few other special tweaks. Cool enough?

Let's do it to it.

Before beginning, you should wipe the slate clean by clicking on the Reset button and then clicking on the UPDATE link beside QUICK PREVIEW.

The section currently loaded in the editor should now be Background.

Background

1. Click on Select Background
2. In the MORE BACKGROUNDS!!! menu, scroll down to the Tiled Backgrounds section and click on the Pretty option to load the 'Pretty' backgrounds page (Sorry dudes but dudettes need help too, y'know... You're gonna have to bite yer lip thru this one... *chuckle*)...
3. Scroll down on the Pretty backgrounds page and click on the 'Color-swap Hosta' background. The background image will be automatically inserted (for dialup users, it may take a few seconds for the selected background to appear in the QUICK PREVIEW box).

That's it for that section. Now let's move on to...

Tables

1. Click on the Tables tab to load the Tables section
2. Click on the Color SLIDER beside the Table color option
3. Move the Hue slider to 330, the Saturation slider to 30 and the Brightness slider to 100
4. Click on USE THIS COLOR
5. Click on the Color SLIDER beside the Border color option
6. Move the Saturation slider to 70 (leave the Hue and Brightness sliders where they are)
7. Click on USE THIS COLOR
8. Click to open the dropdown menu beside Border width
9. Click to select 5px
10. Click to open the dropdown menu beside Border style
11. Click to select 'ridge'

Okay, all done here. Now let's move on to...

Text

1. Click on the Text tab to load the Text section
2. Click on the Color SLIDER beside the Text color option
3. Move the Hue slider to 315, the Saturation slider to 100 and the Brightness slider to 20
4. Click on USE THIS COLOR
5. Click on the Color PICKER beside the Table link color option
6. Click on the purple color swatch (2nd row from the bottom, 2nd from the left)
7. Click to open the dropdown menu beside Font family
8. Click to select 'Tahoma'.
9. Click to open the dropdown menu beside Font size
10. Click to select 14px

Alright, almost done... Now we just have to apply a few special...

Tweaks

1. Click on the Tweaks tab to load the Tweaks section
2. Click to check Reverse layout?
3. Click to check Resize Comments images?
4. Click to check Use opacity filter? (click OK on the popup warning)
5. Click to open the dropdown menu beside Set opacity level
6. Click to select 80%

That's it!

Click on the Preview Layout and Get Code button to check out the results!

^ Back to menu ^

ABOUT THIS EDITOR

The Iron Spider MySpace Editor Advanced version 1.1 is split up into 4 different sections each offering you a number of options to customize your MySpace page according to your liking.

First off, let's run through a few...

BASICS

Hover over any section tab
(Background, Tables, Text, Tweaks)

...to see a popup tooltip giving you a quick description what you can do in that section. (NOTE: This feature is disabled in Opera and Internet Explorer 7.)

Click on any section tab
(Background, Tables, Text, Tweaks)

...to load that section and begin working with the options it contains (e.g., the Background section contains Background color, Background image, etc.)

Color PICKER

Click on any of these links in the editor to open a color swatch box containing 140 predefined web colors to choose from. Click on the color you like and it will automatically be applied to the associated option.

Color SLIDER

Click on any of these links in the editor to open an HSB color slider box in order to create your own colors with easy-to-use slider handles.

In the Color SLIDER box:

• USE THIS COLOR ~ Click on this to automatically apply the current color to the associated option.
• Cancel ~ Click on this to close the Color SLIDER box without setting a color.
• Help Me ~ Click on this to open a dropdown help section containing instructions on how to make colors using the HSB sliders.
• Turn Help OFF ~ Click on this to close the dropdown help section.

QUICK PREVIEW

The Quick Preview box will save you the trouble of having to generate a full preview every time you apply a setting. Whenever you select colors, apply border styles or customize the fonts, this box will automatically update to provide you with a sneak peek at what your layout will look like. (NOTE: With the exception of Hide header and footer links, all options in the Tweaks section can only be previewed by generating a full preview.)

Preview Layout and Get Code

Click on this button to generate a full preview of your MySpace layout and to get the layout code. The full preview page will open in a new browser window (or tab) displaying an example MySpace page with all the options you have currently applied using the editor. Your auto-generated layout code is embedded on the full preview page about halfway down.

^ Back to menu ^


Alright... Now that yer up to speed, let's make a layout. We'll start with the...

BACKGROUND

Click on the Background tab

...to load the Background section in the editor (if it's not loaded already).

Now decide if you would like to have a background image or not. If you do want a background image, click on the Select Background link to open a popup window containing a selection of ready-made background images you can use.

Click on any background image

...to automatically insert it into your layout. The image you selected will display in the QUICK PREVIEW box (for dialup users, it may take 10-15 seconds for the selected background to appear in the QUICK PREVIEW).

On the other hand, perhaps you'd like to...

Use your own background image

To do this you'll need to upload your image to an image hosting service like ImageShack. Then —assuming you used ImageShack— get the web address, a.k.a., image URL, to the image you uploaded. Make sure you copy the 'direct link to image' web address (the others are no good for this purpose). Then paste that web address into the 'Enter URL' text box and click on the Submit URL button to automatically insert your background image into the layout.

Other options will become available after you select a background image.

These options are...

Tile background?

This option refers to whether you want the background image tiled (repeated) horizontally and vertically to fill the entire web page or if you just want it displayed once. Click to select No if you're using one big image or photo. Click to select Yes if you're using a small image such as a patterned background.

Scroll background?

Click to select Yes if you would like the background image to move along with the text when you use the scrollbars to scroll through your web page. Click to select No if you would like the background image to remain fixed in place when you scroll through your web page.

If you don't want to use a background image then you can select a...

Background color

Simply use the Color PICKER or the Color SLIDER beside this option to select a background color for your MySpace page. Your selected background color will appear in the QUICK PREVIEW box.

^ Back to menu ^


Now let's move on to...

TABLES

All the various components in your MySpace profile, such as Contacting, Interests, Details, etcetera, are rendered in boxes which are drawn using HTML tables. This is why these boxes are commonly referred to as 'tables' in MySpace layout parlance. This section will allow you to customize all the Table properties on your MySpace page.

Now that you know what 'tables' are...

Click on the Tables tab

...to load the Tables section in the editor.

Table Color

Use the Color PICKER or the Color SLIDER beside this option to select a background color for all the tables on your MySpace page. Your selected table color will appear in the QUICK PREVIEW box. To use no table color at all, click inside the text box and type in "transparent" (without the double quotation marks) and then click on the UPDATE link beside QUICK PREVIEW.

Border Color

Use the Color PICKER or the Color SLIDER beside this option to select a border color for all the tables on your MySpace page. Your selected border color will appear in the QUICK PREVIEW box.

Border width

Use the dropdown menu beside this option to set the width of the borders drawn around your MySpace tables. To use no border at all, select Opx

Border style

Use the dropdown menu beside this option to set the style of the borders drawn around your MySpace tables. (NOTE: Certain border styles, such as double, outset and inset, will require that the border width be set at a minimum of 3px to render the full effect.)

Use customized contact table?

This is a special table tweak you can apply to your layout. Click on the What's this? link beside this option for more information.

Use evenly sized tables?

Here's another special table tweak you can apply to your layout. Click on the What's this? link beside this option for more information.

^ Back to menu ^


Alrighty then... Now let's move on to...

TEXT

This section contains all the options you can work with to customize the text on your MySpace page (including hyperlinks).

To start with..

Click on the Text tab

...to load the Text section in the editor.

Now here's the lowdown on what's going on here...

Header link color

'Header link' refers to all the default menu links that run across the top of your MySpace profile, e.g., Home | Mail | Profile, etc as well as those at the bottom of your profile, e.g., About | FAQ | Terms, etc. Use the Color PICKER or the Color SLIDER beside this option to set this color.

Text color

Use the Color PICKER or the Color SLIDER beside this option to set the color of all text in your tables (except hyperlinks).

Table link color

Use the Color PICKER or the Color SLIDER beside this option to set the color of all hyperlinks in your tables (use the Color PICKER for this option if you wish to have a special color-coordinated contact table).

Font-family

Use the dropdown menu beside this option to set the type of font that will be used for all text on your MySpace page.

Font-size

Use the dropdown menu beside this option to set the font size of all text (except header and footer links) on your MySpace page.

(NOTE: Here you should be advised that using large font sizes has the effect of shouting and can make you look childish. Font size options in the editor go up to 30px just for posterity but, realistically speaking, you should hang around the 12 - 20px font size.)

^ Back to menu ^


Alrighty then... Let's go all out and apply some extra special customizations to your MySpace page. Options that apply these customizations are located in the section called...

TWEAKS

This MySpace editor is equipped with the ability to automatically apply a number of special tweaks that MySpacers most commonly look for. Each tweak is applied by clicking to check the box beside the option.

So to begin with...

Click on the Tweaks tab

...to load the Tweaks section in the editor.

Here I'll just do an ultra quick rundown because all these options have thier own little popup info boxes (just click on the What's this? link beside each option):

Reverse Layout?

Click to check this box to switch the left and right columns on your MySpace page.

Resize Comments images?

When your friends post large images in the Comments section, it may spread your layout and create those ugly horizontal scroll bars at the bottom of your browser window. Click to check this box to prevent this from happening. [NOTE: This feature is disabled in Opera. Also, if you set this tweak in the editor using another web browser, Opera web browser users (approx. 1.6% of user base) will not see it fully in effect.]

Use opacity filter?

This popular tweak will allow you to make the Table color you selected semi-transparent to varying degrees in order to allow the background image to show through.


^ Back to menu ^

OPACITY FILTER ISSUES

Okay fair warning everyone...

Using the opacity filter in MySpace layouts is somewhat buggy to say the least. After some extensive testing here is a list of the known issues I've come across:

INTERNET EXPLORER ~

Page scrolling is fairly normal but the display of my special customized contact tables is disrupted creating transparencies where none should be. I was able to correct this by disabling the mouseover effect on the customized contact table. (NOTE: The editor will automatically disable this effect for you if you decide to use the opacity filter.)


GECKO-BASED BROWSERS
(Firefox, Mozilla, Netscape)

Page scrolling is a little slow.


OPERA

Page scrolling is reeeeaally slow and choppy (Opera 9.00). If this is your favourite web browser and you enjoy frequently viewing or previewing your MySpace page (which may be especially true if you're editing the content a lot) then I don't recommend enabling the opacity filter tweak.


^ Back to menu ^


So that's the complete rundown on this MySpace editor. I hope this helps some.

Enjoy!



Regards,
Rob Darrell
September 2006



COMING SOON:

Custom Extended Network backgrounds and Online Now icons!