ChaCha’s IMVU 3 Box DIV Layout & Tutorial

This code is made to go into your URL panel & will hide the url & header of the url panel

This code automatically hides all of your other panels except for your
stickers panel along with hiding the side & bottom ads, right column & avatar name.

If you want one of your panels to show, you’ll need to edit this part of the code:

#aboutme_panel, #messages_panel, #music_panel, #blog_panel, #rss_panel, #contact_panel, #video_panel, #special_panel, #updates_panel, #groups_panel, #tagcloud_panel, #streetteam_panel, #outfits_panel, #room_panel, #collect_panel, #friends_panel, #visitors_panel, #cool_panel, #rankings_panel, #gallery_panel, #wishlist_panel {display: none!important;}

So if you wanted the friends panel to show underneath your 3 boxes/divisions,
you would delete this >> #friends_panel, << from the code above & then move
the panel right below your url panel so that it will show below your 3 boxes/divisions.

We’ll be working with this part of the code:

body {
background-color: #000000;
text-align: center;
color: #FFFFFF!important;
font-size: 12px;
font-family: tahoma, verdana;
font-weight: bold;

}

This is where you control the formatting for the body of the layout.
Right now, I have it set to have a background color of black.
You can easily change the color of the background by replacing
>> #000000 << with another color code.
Looking for color codes? Click here.

If you would like to add a background image, you’ll need to add this to the code.

background-image: url(image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;

So, your body code would now look like this:

body {

background-color: #000000;
background-image: url(image.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
color: #FFFFFF!important;
font-size: 12px;
font-family: tahoma, verdana;

font-weight: bold;
}

It’s a good idea to leave the >> background-color: #000000; <<
in the code changing >> #000000 << to a color that matches the actual image background.

This is important because if someone with a large/wide screen views your page your background image will more than likely not fill their whole screen!
That’s where a well blended in background color comes into play & smooths it out.

Your background image goes here >> background-image: url(image.jpg); <<
Just replace >> image.jpg << with your actual image code from Photobucket, Tinypic, or wherever you host your images.

>> background-attachment: fixed; << controls whether you want your image to stay fixed to the page & not move or move/scroll up & down when people are navigating your page.
A lot of people prefer to have it fixed, so I already set it to fixed.
For a scrolling background, use this instead >> background-attachment: scroll; <<

>> background-repeat: no-repeat; << controls whether you want the image to repeat or not.
The code is already set not to repeat but, if you do want it to repeat, you’d need to use this instead >> background-repeat: repeat; <<

>> background-position: center center; << controls the position of your background image.

The code is set to have the image centered both horizontally & vertically on your page.
Note: The first value is the horizontal position and the second value is the vertical.

These are all the values that you can change the background position to:
top left
top center
top right
center left

center center
center right
bottom left
bottom center
bottom right

A lot of places in the code contain this:

color: #FFFFFF!important;
font-size: 12px;
font-family: tahoma, verdana;
font-weight: bold;

This controls your text/font colors, size, type & boldness.

>> color: #FFFFFF!important; << controls the color of your text/font.
To change it, just change >> #FFFFFF << to another color code.
Looking for color codes? Click here.

>> font-size: 12px; << controls the size of your text/font.

To change it, just change >> 12 << to a higher or lower number.

>> font-family: tahoma, verdana; << controls the text/font type.
To change it, just change >> tahoma, verdana << to 2 other text/font types.

There are 2 text/font types because if someone doesn’t have one text/font installed on their computer, they will see your page in the other text/font listed.
You can really add up to as many as you want, but the first one will always take precedence.
Looking for a list of fonts? Click here.

>> font-weight: bold; << controls the boldness of your text/font.
These are the values that you can change the font weight to:

normal
bold
bolder
lighter

Note: This part of the code controls you link colors:

a:link, a:active {
color: #FF0000!important;

font-size: 12px;
font-family: tahoma, verdana;
text-decoration: none!important;
}

a:visited {
color: #FF0000!important;
font-size: 12px;
font-family: tahoma, verdana;

text-decoration: none!important;
}

a:hover {
color: #FFFFFF!important;
font-size: 12px;
font-family: tahoma, verdana;
text-decoration: line-through!important;
}

>> a:link << defines the style for normal unvisited links.

>> a:active << defines the style for active links.
A link becomes active once you click on it.

>> a:visited << defines the style for visited links.

>> a:hover << defines the style for hovered links.
A link is hovered when the mouse moves over it.

>> text-decoration: none!important; << controls whether you want your links to be underlined, overlined, striked-through, or nothing.

You would do this by changing >> none << to one of the values below.

These are the values that you can change the text decoration to:
underline
overline
line-through
blink (does not work in Internet Explorer)

This layout has three boxes/divisions.
You can add a background color, background image, or transparency to each individual box/div.
I named the divisions “left, center, right” to make it easier to know which one is which on your page.

Just like adding a background color or background image to your whole page, it’s the same for the boxes/divisions.

In addition to that, you can also control the transparency/opacity of each box/div.

You’ll see this in the code under each div/box.

filter: alpha(opacity=80);
opacity: .80;

You will only need this part of the code if you are using a background color or background image.
If you are not using a background color or background image & want your boxes/divisions to be totally transparent,

You would delete those 2 lines of code & also change
>> background-color: #000000; << to this >> background-color: transparent; <<

If you are using a background color or background image & want your boxes/divisions to have some transparency to them,

You would change the >> 80 << in both parts of this code to a higher or lower number:

filter: alpha(opacity=80);
opacity: .80;

The higher the number, the less transparency each div/box will have.
The lower the number, the more transparency each div/box will have.
If you don’t want the panels to have any transparency, just delete those 2 lines of code.

Note: You can also change & format the borders for your boxes/divisions.
>> border: #FFFFFF 2px solid; << controls the borders for your panels, you can change >> #FFFFFF << to another color.
You can change the >> 2 << in >> 2px << to another number, this controls the width/thickness of the borders.

You can change the border type where it says >> solid << to one of the values listed below.

If you don’t want a border just change that line of code to >> border: 0; << & it will remove the border.

These are the values that you can change the border style to:

none
hidden
dotted
dashed
solid
double
groove
ridge
inset

outset

Now we’ll be working with this part of the code:

<div id=”left”>
YOUR TEXT AND/OR CODES GO HERE

</div>

<br />

<div id=”center”>
YOUR TEXT AND/OR CODES GO HERE
</div>

<div id=”right”>
YOUR TEXT AND/OR CODES GO HERE

</div>

This is where your text, images, widgets, music players, etc go.
Just delete >> YOUR TEXT AND/OR CODES GO HERE << & add your own text, flash and/or HTML there.

If you have other tweaks & codes that you’re using for your homepage, you would add them after this whole div layout code.

It’s important that you keep them separate from the div layout code so that you don’t mess up the code in any way.