Join for FREE | Take the Tour Lost Password?
Shop deviantART for the
holidays and save BIG!
Click here! :holly:
[x]

deviantART

 




Site Align:
Left - #site { margin-left: auto; margin-right: auto; width: 765px; }

Center - #site { margin-right: auto; margin-left: auto; width: 765px; }

Right - #site { margin-center left: auto; margin-left: auto; width: 765px; }

Background Body & Content:
body { background: #000 url( image url goes here ) fixed right bottom repeat; color: #fff; }

#content { background: #000 url( image url goes here ) fixed right bottom repeat;

Section Background:
Note:You can use this if you want all sections of the layout to like alike or you can do each separately ( This is easier! )
With color: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: #fff; }
With image: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: #000 url( image url goes here ) fixed right bottom repeat;  }
No background: #profile, #details, #wishlist, #about, #friends, #journal, #multimedia, #comments, #signature { background: none; }

Cursor Changer:
Note:You can also use other cursors like...help, pointer,ect.
body
{
cursor: cursor name;
}

Border:
Note:Some other borders are...solid, double, dash, outset, inset. An px size can go to almost any size.
.section { border: 2px dotted #000; }

Section Postioning:
Note:Only postions that can be used are absolute and relative (Use absolute!). Where it say left you can also put in right, and you can put any number in front of px.
#section name { position: relative; left: 0px; top: 550px; width: 230px; }

Make Your Sections Scrollers:
Note:You can put any number in front of height and width.
#section name {overflow:scroll;overflow-x:hidden;overflow-y:auto; height:200px;width:400px;font-size:9pt;color:#fff;}

Caption Changer:
#comments { background: #fff; }
.caption { background: #000 url( image url goes here );
border: 2px solid #000; color: #000; }
.caption:before { content: url( image url goes here );
background: url() top right no-repeat;
}
.caption:after { content: url( image url goes here );
background: url( image url goes here ) bottom right no-repeat; }
.caption .message { background: url( image url goes here ) top left no-repeat; }

.caption2 { background: #000 url( image url goes here );
border: 2px solid #fff; color: #fff; }
.caption2:before { content: url( image url goes here );
background: url( image url goes here ) top right no-repeat; }
.caption2:after { content: url( image url goes here );
background: url( image url goes here ) bottom right no-repeat; }
.caption2 .message { background: url( image url goes here ) top right no-repeat; }

Profile Bar:
Note:Best images to use are small .gif file images but if you want to use a bigger image for something just change the width and height px size.
#bar {background: transparent; position: absolute;}

#bar #addButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 70px; width:15px; height:10px;}
#bar #addButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #tradeButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 100px; width:15px; height:10px;}
#bar #tradeButton a {background: transparent url( image url goes here ) -22px -90px no-repeat; width:15px; height:10px; border: 0px;}


#bar #msgButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 130px; width:15px; height:10px;}
#bar #msgButton a {background: transparent url( image url goes here ) -22px -90px no-repeat; width:15px; height:10px; border: 0px;}

#bar #ignoreButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #ignoreButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #onlineButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #onlineButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

#bar #offlineButton {background: transparent url( image url goes here ) no-repeat; text-indent: -4000px; position: absolute; top: -10px; left: 40px; width:15px; height:10px;}
#bar #offlineButton a {background: transparent url( image url goes here ) -22px -90px no-repeat;width:15px; height:10px; border: 0px;}

Text:
Note:You can use any text font name.
body
{
font-family: Font name;
color : #000;
text-align:left;
}

Don't Display:
Note:This lets you take ANYTHING that you don't want to be shown on your profile. Also you can put any number of sections in the list.
#section name,  {display:none}
©2008-2009 ~CutePokemonTrianer
:iconcutepokemontrianer:

Author's Comments

This is for people who want to make there own gaiaonline profile layout.
There are some basic codes here, but there are others that are not.
But here is another place on gaia that gives you ALL basic codes you need:
[link]

You can take these codes an add them on.
Hope you use them!
Also sorry if I put this under the wrong category I didn't know what to put it under
An ONLY FOR GAIAONLINE!

Comments


love 0 0 joy 0 0 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:icontotoyamado:
wha?

--
SHUT UP! IM TRYING TO USE MY HEADSET, I MEAN UM, TAP INTO THE UNKNOWN COSMIC FORCES AROUND US!
NO! IF JINZO HITS MY REFLECT BOUNDER IT IS ALL OVER FOR ME! NO! JINZO HAS HIT MY REFLECT BOUNDER AND IT IS ALL OVER FOR ME!
the words of ~ESPA ROBA
:icontotoyamado:
twooooo, mannnny, worrrrrrrrrrds, and by the way, you know you spelled trainer wrong riiiiiiiiiiiight?

--
SHUT UP! IM TRYING TO USE MY HEADSET, I MEAN UM, TAP INTO THE UNKNOWN COSMIC FORCES AROUND US!
NO! IF JINZO HITS MY REFLECT BOUNDER IT IS ALL OVER FOR ME! NO! JINZO HAS HIT MY REFLECT BOUNDER AND IT IS ALL OVER FOR ME!
the words of ~ESPA ROBA
:iconcutepokemontrianer:
Yeah it's confusing and yeah I figured that out about a month after I joined :blush:
:iconsakurabanaharuno:
where do u put the center text code?

--
Fav Mangas Ever~Ruka&Boy Princess
FavAnmies~Inuyasha,Naruto& 1# Zoids Chaotic Century Fan Ever!!!
My Youtube~Youtube.com/xSakuraBanax
:iconklzi:
Relative IS BETTER than absolute, because it works in ALL WEB BROWSERS.
You put all the codes in your theme section.

--
As this rain drops you can probably never see,
how this main blop of water is a clever key.
:iconbleed-justtoknow:
Yeah, where do you enter these codes? :O

--
PhotoGraphic Psycho
:noes:
:iconma-junior:
Head spinning, getting dizzy. *Falles over clutching head while eyes spin* This is the type of thing I've been looking for but man am I confused. Is this classic, or a current thing?
:iconbitofruit:
thanks you helped me :D

Details

March 15, 2008
5.4 KB
17.5 KB
194×191

Statistics

10
28 [who?]
11,332 (30 today)
32 (0 today)

Share

Link
Thumb

Site Map