Another Profile Coding Guide V1/Classic

Visitors?

+1	100.0%	[ 177 ]
Total Votes:			[ 177 ]

[Chezarae 1]

HEADERS

There are some headers in your profile. The biggest header is the Profile Body header. (the Gaia Homes picture at the top of the preview site I gave you.) And the smaller headers (the parts that tell you what section you're looking at -About Me, Friends, Comments, etc.)

#extendedProfileBody #header h1
This is the label for the Profile Body header.

#[section] h2
This is the header for all the other sections.

Profile Body Header


#extendedProfileBody #header h1 {background:url([URL here]);
border:[style] [color tag or HEX code] [width]px;}

Try this:

#extendedProfileBody #header h1 {background:url(http://i280.photobucket.com/albums/kk176/chezarey15/design-chezarae-profilecodingcopy.jpg);
border:double white 4px;}

For a solid color:

#extendedProfileBody #header h1 {background:[color or HEX code];
border:[style] [color tag or HEX code] [width]px;}

Section Headers


Here, you can add a border, change the text and background of some of the headers.
You can change all those attributes in the Profile section, but I can only change the background color and size of the other headers.
If you know how to change the text or add borders to the other sections, please let me know.

#[section] h2 {background:[color tag or HEX code];
height:[number]px;
width:[number]px;}

Try this:

#about h2 {background:blue;
height:10px;
width:400px;}

[Chezarae 1]

MARGINS

Margins create some space between each of your sections.
There is several ways to code margins, I'll start with the easiest to understand.

#[section] {margin-[top/bottom/left/right]: [number]px;}

Try this:

#about {margin-bottom:10px;}

Now there is a bit of space between your about me section and friends, or whatever you have placed below your about me.
You can stack like this, if it is easier:

#about {margin-bottom:10px;
margin-left:10px;
margin-top:10px;}

Here is another way to code for margins:

#[section] {margin: [number]px [number]px [number]px [number]px;}

The first number is the top margin, the second is the right, then bottom, then left. Simply, it goes around the box clockwise.

#[section] {margin: [number]px [number]px [number]px;}

Top, bottom, and the last number represents the left and right sides, to they are the same.

#[section] {margin: [number]px [number]px;}

The first number represents the top and bottom, while the second number stands for the left and right sides.

#[section] {margin: [number]px;}

All of the margins around your section are exactly the same.

[Chezarae 1]

OVERFLOW

Sometimes things in a section are a little too big, and can sometimes stretch your page/box farther then you want. Overflow helps control this.

There is a few things that can happen to the overflowing stuff:

Options:
Hidden
Visible
Scroll
Auto

#[section] {height: [number]px;
width: [number]px;
overflow: [option]

That shell code specifies what happens for the sides and the top/bottom.

Try this:

#comments {height: 400px;
width: 200px;
overflow: scroll;}


You can have only the stuff that spills out the sides be controlled too:

#[section] {height: [number]px;
overflow-y: [number]px}

Overflow-y represents what happens to the stuff that overflows vertically.

Try this:

#comments {height: 400px;
overflow-y: auto;}


#[section] {width: [number]px;
overflow-x: [number]px}

Overflow-x represents what happens to the stuff that overflows horizontally.

Try this:

#comments {width: 200px;
overflow-x: auto;}


Here's a quick code with the x and y overflow options different:

#comments {height: 400px;
width: 200px;
overflow-y: scroll;
overflow-x: hidden;}

[Chezarae 1]

NAVIGATION BAR

Here is a nice thread with just about anything you need to know about how to edit that bar at the top that says my gaia, shops, forums, etc.
Forum Link

[Chezarae 1]

CONTACT BAR

Send me a PM if you know how to make them links instead of icons please!

I finally figured out how to edit the contact bar completely!

First, I would create some icons for each button. When you're done with that use the approptiate section names and add in the URL like so:

#bar #addButton {background:[transparent/color] url([url here] no-repeat;}

Then you can add other details like the location and stuff.

#bar #addButton a {background: transparent url() -22px -90px no-repeat;
width: 20px;
height: 40px;}

This is a completely separate code used for the link of the button. The width and height you see in the code specifies the size of the area you can click to activate the button.
By adding a link ( where is says "url" ) in this section it changes what the icon will look like when you hover over it.
*There is no need to try to position this. This click-able area automaticly lines up with your button image, you just need to figure out the width and height.*

Here's an example to change the entire contact bar:

#bar #addButton {background: transparent url(http://i280.photobucket.com/albums/kk176/chezarey15/addbutton2.jpg) no-repeat;
text-indent: -4000px;
position: absolute;
top: 36px;
left: 140px;
width: 50px;
height: 50px;}

#bar #msgButton {background: transparent url(http://i280.photobucket.com/albums/kk176/chezarey15/messagebutton2.jpg) no-repeat;
text-indent: -4000px;
position: absolute;
top: 36px;
left: 165px;
width: 50px;
height: 50px;}

#bar #tradeButton {background: transparent url(http://i280.photobucket.com/albums/kk176/chezarey15/tradebutton2.jpg) no-repeat;
text-indent: -4000px;
position: absolute;
top: 36px;
left: 190px;
width: 50px;
height:50px;}

#bar #addButton a {background: transparent url() -22px -90px no-repeat;
width: 20px;
height: 40px;}

#bar #msgButton a {background: transparent url() -22px -90px no-repeat;
width: 20px;
height: 40px;}

#bar #tradeButton a {background: transparent url() -22px -90px no-repeat;
width:20px;
height: 35px;}

#bar {background:transparent;}
#bar #ignoreButton {display:none;}
#bar #onlineButton {display:none;}
#bar #offlineButton {display:none;}
#bar{background:transparent}
#profile .caption {display: none}

[Chezarae 1]

CUSTOM SECTIONS

Custom sections are basically just extra sections you can code into your profile if you'd like some extra boxes, or more space.
There's two parts and two codes you need to use for them to work.

I'll give you the code, then explain how it works.
First, go to your About Me section by going to Account Settings > About Me
I have to put this code in a box to display the codes, because the "list" tags will be translated, so anything in side the dashes is to be edited, instead of anything in bold brackets like previous sections.

[list=1]
--Section one: Content you want in your custom sections--

[list=1]
--Section two: Content includes things such as--

[list=1]
--Section three: Text, Links, Pictures, and other things..--

[/list]
[/list]
[/list]

Each list tag represents a new custom section. These sections are kind of put inside each other:
the fist "list=1" tag corresponds with the last "/list" tag, if that explains it better for you.

Now that you know how to insert the content for your custom sections, I'll show you how to place the sections onto your profile
For this code, anything bold with brackets around it needs to be edited.

#about ol {position: absolute;
top: [number]px;
left: [number]px;}

#about ol ol {position: absolute;
top: [number]px;
left: [number]px;}

#about ol ol ol {position: absolute;
top: [number]px;
left: [number]px;}

This first code is the positioning code for the custom section one;
the second code is for the second custom section;
and the third is the positing code for the custom section three.

In those codes you can also change the size, background, borders, and everything on each of the sections. You can make them look all alike, to completely different.

[Chezarae 1]

Misc. Codes

#content #main {border:none;}
Removes the light gray line through the middle of your profile.

#content {border-right:none;}
Removes the black border to the right of your profile.

#site {margin-left:auto;margin-right:auto;}
Centers your profile.

#details h3,#details hr {display:none;}
Removes the "interests" section of you details box.

#find_friends_banner {display:none;}
Removes the little "find friends" thing on the top right corner of your friends list.
* Only seen by profile owner.

#alerts_banner {display:none;}
Removes the "alert me of comments" thing in your comment box.
* Only seen by profile owner.

#comments .message {background-image:none;}
Seems to remove the triange-looking part of the comments speech bubble

[Chezarae 1]

Profiles Coded by me

If you ask, I just might make you one!

In addition to my own profile (and images), I designed:




Profiles using all my images:

Emidge199
Colorful techno-themed profile *one of my first*

Chezarey
Colorful dreamy outer space theme

Edward_Cullen0
Simple, two color cigarette smoke theme

Chezaray
Halloween theme

Sarah Hopes
Purple clouds and lights


Profiles using none of mine {fan based;}

KRussell <3 (my first profile)
- Disturbed fan profile.

[Chezarae 1]

EXTRA SPACE

[Chezarae 1]

EXTRA SPACE

[IMANOOT]

Um... Your CSS properties definitely need improvement. Should just link my guide for CSS properties cool

[Chezarae 1]

Knight Yoshi

Um... Your CSS properties definitely need improvement. Should just link my guide for CSS properties cool

This is just for beginners, but thanks for not following the rules and PMing your suggestions to me.

[IMANOOT]

Chezarae 1

Knight Yoshi

Um... Your CSS properties definitely need improvement. Should just link my guide for CSS properties cool

This is just for beginners, but thanks for not following the rules and PMing your suggestions to me.

Suggestions should be posted publicly so that all can know what's going on. Also if you're teaching beginners you should teach them properly. neutral

[acesuv]

what is this the.... 5th guide that rips off like 99% of its stuff from my guide?

[Chezarae 1]

acesuv

what is this the.... 5th guide that rips off like 99% of its stuff from my guide?

Sorry, but I havn't even seen your guide.