Welcome to Gaia! ::

Reply How-To Guides Guild
Gaia Online Profile Guide [Multimedia as well] Goto Page: [] [<] 1 2 3 [>] [»|]

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Tutsumi

PostPosted: Sun Feb 05, 2006 5:53 pm


CSS Coding Page - Coming VERY Soon

-I'm currently working on this so the codes listed below aren't fully tweaked and corrected.- 1/7/06
PostPosted: Sun Feb 05, 2006 6:12 pm


Body Codings

These place a background over the entire page.

To view this background through the top layer of the page (the stuff where all the info is) you must have the code to remove the content background.


Quote:
body
{background: url('http://your image url here')}

Changes background color for ENTIRE page.

Quote:
body
{background: #000000}

Changes background image for ENTIRE page.

Quote:
body
{background: #000000 url('http://your image url here') no-repeat fixed left;}

Adds background to the ENTIRE page (including that little grey space to the right.)

Quote:
body
{font-family: place three fonts here a coma seperating each;font-size: 12pt;color: #000099}

"font-family" changes the font type on the page to the fonts you specify. In this coding you can also change around the font type, size, and color for the entire page. You will need to use three fonts, these fonts should be separated by comas, the first being your prefered one. You should use three incase the user viewing your profile doesn't have the first font on their computer. I suggest using "Site Safe" fonts.the first being your prefered one.
"color" changes the color of the text, once again I suggest using "Site Safe" colors.

Quote:
body
{background: #000000 url('XXX') no-repeat fixed left;font-family: Comic Sans MS, Arial Black, Times New Roman;color : #000000;text-align:justify;}

"text-align" tells where to align your text. Justify makes it regular, but you can use Center, Right, or Left.

User Image

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:15 pm


Header

Quote:
#extendedProfileBody #header h1
{ background: #000 url( image URL goes here ) top center no-repeat; border: 0px; }

This lets you change the main header image.

Quote:
.section #profile,#details,#journal,#friends,#comments,#multimedia,#wishlist,#signature,#about h2
{background: url(your image url here) top left no-repeat;text-align: left; text-indent: 5px; color: #000; height: 30px;}

This sets properties for ALL of the block headers - profile, details, wishlist, about, etc. So if you want them all to use the same font colour, background colour, be the same height, etc. you can just put those here instead of repeating them in every header. Saves characters, and since there is a limited number of characters you have to do this, that's a plus.
PostPosted: Sun Feb 05, 2006 6:17 pm


Content

This will put in a background color or image up to the right border. (before the grey space)

Quote:
#content
{background: #000000;}

This code changes the background color.

Quote:
#content
{background: url('http://place image url here');}

This code changes the background image.

Quote:
#content
{background: #000000; url('http://your image url here') no-repeat fixed left;}

This code changes the background image and color in the back of where you would have your sections.

Quote:
#content
{ border-left: 2px dotted #000; border-right:
2px dotted #000; border-bottom: 2px dotted #000; }
#extendedProfileBody #header
{ border-right: 2px dotted #000;
border-left: 2px dotted #000; border-top: 2px dotted #000; }

This puts a border around the most commonly modified major profile section.

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:21 pm


Sections

The sections are basically just that - sections of the extended profile. They contain the data for basically all the items displayed individually. Bacause everything is linked to this class, all sections become uniform based on the section here untill additional customization,.

Quote:
.section h2
{color: #0044cc;}

Changes the font color in ALL headers.

Quote:
.section #profile,#details,#journal,#friends,#comments,#multimedia,#wishlist,#signature,#about h2
{background: url(your image url here) top left no-repeat;}

Changes the header image for all sections
Quote:
.section
{font: 8px verdana;color: #8DA9D4;background-color: #B6CAD5;background: url('myimage');border: 1px dashed #8DA9D4;}
.section h2
{color: #8DA9D4;font-size: 14px;}

font: This follows the format "(size)px (font type)". Replace (size) with the font size and (font type) with your font of choice.
color: The font color of everything in your sections.
background-color: Changes the background color of the sections.
background: Change the "myimage" in the parenthesis to an image URL to get a background image in your sections. Remove this line if you don't plan to use it. NOT RECOMMENDED.
border: Follows the format "(size)px (border style) #(color)" - replace (size) with the border width, (border style) with either "solid", "double", "dashed", or "dotted", and replace (color) with the border color.

[ .section h2 | The H2 tag is used with each tag in the sections (Wish List, About, Friends, etc.). ]
color : Changes the color of the section tags.
font-size : Changes the size of the section tags

Quote:
.section { border: 2px dotted #000; }

This puts a border around each of the sections.
PostPosted: Sun Feb 05, 2006 6:23 pm


[ Message temporarily off-line ]

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:24 pm


Reserved for future use.

Details
PostPosted: Sun Feb 05, 2006 6:36 pm


Reserved for future use.

Wislist

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:37 pm


Reserved for future use.

Fonts & Links
PostPosted: Sun Feb 05, 2006 6:39 pm


Reserved for future use.

Friends

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:41 pm


Reserved for future use.

Journal
PostPosted: Sun Feb 05, 2006 6:42 pm


Reserved for future use.

Multimedia

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:43 pm


Reserved for future use.

Comments
PostPosted: Sun Feb 05, 2006 6:45 pm


Reserved for future use.

Signature

Tutsumi


Tutsumi

PostPosted: Sun Feb 05, 2006 6:46 pm


Reserved for future use.

Other Codes
Reply
How-To Guides Guild

Goto Page: [] [<] 1 2 3 [>] [»|]
 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum