Welcome to Gaia! ::

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources
<3 </3
Reply
1 2 3 4 >

Dapper Sex Symbol

Offline
DO NO PM EVADINE. ALL PMs ASKING FOR HELP WILL BE DELETED. POST HERE

So you want to make a profile?
Yea! That would be great! I would love to make all those neat little things, such as photos and what not! Learn to move them around.

Well you came to the right place. I can teach you how to make a CSS profile without much difficulty. This is where you can learn.

What your going to need is a background picture that first YOUR background the way you want it. To understand this go into my profile and click view background picture. You will see what it looks like. Your resoulutions depends on if this picture fits the screen.

I usually use 1000 width x something else for height, but this can vary.

Photofiltre is the best thing to use. It's free, and easy to learn about.

Updates

Table of Contents

  • Introduction
  • Structure
  • Font
  • Color & Background
  • Text
  • Box
  • Classification
  • Units
  • Positioning
  • Extra's
  • Links
  • Reserved
  • Reserved
  • Reserved

Dapper Sex Symbol

Offline
Structure

ID Selectors

    These look like this:
    #ID
    { Code: 777px; }

    These are used for mostly the main things. You will need them.

    Gaian ID Selectors:
    site
    header
    content
    profile
    bar
    details
    wishlist
    main
    about
    friends
    journal
    multimedia
    comments
    signature

    All of the above must be typed exactly as it is or you cannot use it. Any questions about which does what please POST here.

Class Selectors:

    Classes are parts that can either go alone or go with the ID. For example:
    #ID .links

    &

    .links

    both do different things. ID .links will only work with the actual link that the ID states. But .links works with ALL classes labeled .links .

    The Class Selectors looks like this:
    .class

    The period comes directly before it.

    All Class Selectors with this coorisponding ID:
    profile section
    profile avatar
    profile items
    details stats
    profile caption
    wishlist section
    about section
    about links
    details clear
    about clear
    friends section
    friends links
    friends clear
    journal section
    journal links
    multimedia section
    comments section
    comments link
    comments avatar
    comments caption
    comments message
    comments date
    comments clear
    comments avatar2
    comments caption2
    signature section

ID ID Selectors


    This is when you have a double ID. They look like this:

    #ID1 #ID2

    There is only four of such ID ID's in gaia profiles:
    friends friendsGroup
    journal entries
    details stats
    details info

Contextual Selectors

    These are used in alot of places, but they are basically just tags such as List items, Headers, and what not. Here is the Contextual Selectors list with corresponding ID's. Anything with three things the first two are ID's and the last in contextual:
    bar onlineButton
    bar offlineButton
    bar hiddenButton
    bar msg Button
    bar tradeButton
    bar ignoreButton
    bar addButton
    profile H2
    details H2
    details stats DT
    details stats DD
    details info DT
    details info DD
    wishlist H2
    about H2
    friends H2
    journal H2
    multimedia H2
    comments H2
    signature H2

    or you could simply put:
    .section H2 to take care of all the H2's for the id's

Also!

    To make comments in your profile for later use and not have it displayed in the future use this following:
    /*Comment*/

Dapper Sex Symbol

Offline
Font

The code in this section is displayed within the {} that comes after a Selector:

Selector
{ Code: edits; }

Always have : then ; when you have finished that section. If doing something that modifies everything such as Background: color: url() no-repeat; put the ; at the end.

Font Family

    Code: font-family:
    Values: A specific Family or Font.

    Types of Families: (Examples in () )
    Serif (times)
    sans-serif (arial, helvetica)
    cursive (black chancery)
    fantasy (western)
    monospace (courier)

    Otherwise you can have which ever font you want such as this:

    #comments { font-family: "arial", helvetica, sans-serif; }

    That way if the person doesn't have arial, then they get helvetica, if they don't have either then a sans-serif font they have will show up.

Font Style

    code: font-style:
    values: normal, italic, oblique

    Italic and oblique are basically the same things. They are slanted.

    #about { font-style: normal; }

Font Variant


    Code: font-variant:
    Values: normal, small-caps

    #comments .date { font-variant: small-caps }


Font Weight


    Code: font-weight:
    values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

    #about {font-weight:bold;}

Font Size


    Code: font-size:
    values: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length (explained in UNIT), Percent(explained in UNITS)

    #friends {font-size: xx-large}

Dapper Sex Symbol

Offline
Color & Background
The code in this section is displayed within the {} that comes after a Selector:

Selector
{ Code: edits; }

Always have : then ; when you have finished that section. If doing something that modifies everything such as Background: color: url() no-repeat; put the ; at the end.

Color


    Code: color:
    Values: (#000000), color name

    This makes a certain element colored. A background, text, a certain header. All of these are effected by color depending on which code you put it in.

    #profile { color: #76F209; }
    Will changed the text color.

    body { background: color: #76F209; }
    Will change the background color.

Backgrounds Color


    Code: background-color:
    Values: (#000000}, color name

    This is another way to change background color without a large grouping.

Background Image


    Code: background-image:
    Values: URL, None

    body { background-image: url(); }

Background Repeat

    Code: background-repeat:
    Values: repeat, repeat-x, repeat-y, no-repeat

    This tells if the background image will repeat or not.

Background Attachment

    Code: background-attachment:
    Values: fixed, scroll

    The default is fixed, but scroll means the same image stays all the way down the page.

Background Position


    Code: background-position:
    Values: Percent, length, (0,0), Top, Center, bottom, left, center, right

    You can also combine the values such as top-center or bottom-right.

Background

    code: background:
    Values: All Background Elements

    You can also combine the background elements in one thing such as:

    body { background: #000078 url() top-right no-repeat fixed; }

Dapper Sex Symbol

Offline
Text

The code in this section is displayed within the {} that comes after a Selector:

Selector
{ Code: edits; }

Always have : then ; when you have finished that section. If doing something that modifies everything such as Background: color: url() no-repeat; put the ; at the end.

Word Spacing


    code: word-spacing:
    Values: normal, length

    Spaces between words with one space...

Letter Spacing


    Code: letter-spacing:
    Values: normal, length

    Well, the space between letters ^.^

Text Decoration


    Code: text-decoration:
    Values: Normal, underline, overline, line through, blink

Vertical Alignment


    Code: vertical-alignment"
    Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage

    This is where on the line you text is...and your teach always told you not to have floating letters!

Text Transformation


    Code: text-transformation:
    Values: none, Capitalize, UPPERCASE, lowercase

    Capitalize capitalizes ALL words, and the others do exactly as they say.

Text Alignment


    Code: text-alignment:
    Values: left, center, right, justify

    Like you didn't see that one coming! O.O

Text Indentation


    Code: text-indent:
    Value: length, percent

    >.> IT INDENTS!!!

Line Height


    Code: line-height:
    Values: none, number, length, percent

    Well, how high it is from the line you write the text on...

Dapper Sex Symbol

Offline
Box
The code in this section is displayed within the {} that comes after a Selector:

Selector
{ Code: edits; }

Always have : then ; when you have finished that section. If doing something that modifies everything such as Background: color: url() no-repeat; put the ; at the end.



Well....Every Selector is a BOX. It has margin, border, padding, and the actual location. Now let's see if I can explain this.

PRECODES EXPLAINED IN MARGIN
Also note, you do not have to use precode, and it will effect ALL borders.

Margin


    Precodes: top, left, right, bottom
    Code: precode-margin:
    Values: length, percent, auto

    Precode? What is that?

    That means that Top, Left, Right, Bottom look like this:

    top-margin:
    left-margin:
    right-margin:
    bottom-margin:

    otherwise, margin effects all of it!

Padding


    Precode: top, left, right, bottom
    code: precode-padding:
    Values: length, percent

    So what is padding? It's the length between the actual object to the border.

Border Width


    Precode: top, left, right, bottom
    Code: border-precode-width:
    Values: Thin, Meduim, Think, Length

    How thick the border is.

Border Color


    Code: border-color:
    Values: (#000000), name color.

Border Style

    Code: border-style:
    Values: none, dotted, dashed, solid, double, groove, ridge, inset, outset

    What the border looks like....

Border

    Precode: top, left, right, bottom
    Code: precode-border:
    Values: All Border Elements


Width

    code: width:
    Values: Length, auto.

    Defines how big or small the object is horizontally.

Height

    Code: height:
    Values: length, auto

    Difines the height of an object.

Dapper Sex Symbol

Offline
Classification

The code in this section is displayed within the {} that comes after a Selector:

Selector
{ Code: edits; }

Always have : then ; when you have finished that section. If doing something that modifies everything such as Background: color: url() no-repeat; put the ; at the end.

Display


    Code: display:
    Values: block, inline, list-item, none

    Block: There is a break before and after each element
    inline: no break
    List-item: Same as block, but a list marker is added.

White Spaces

    code: white-space:
    Values: pre, normal, nowrap

    Normal: Changes all multiple space strokes into one.
    Pre: leaves multiple spaces as they are.
    nowrap: Does not allow line wrapping without <br> tags in place.

Dapper Sex Symbol

Offline
Units

Length


    Pixels: px
    Inches: in
    Centimeters: cm
    Millimeters: mm
    Point: pt

Percent

    Just like math class.

    Can be negititve, positive, ad has to have a % after it.

    NO SPACES!!! ^.^

Color Units


    There are 16 color words: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

    Otherwise you can use Hex words which are either:

    #000000

    or

    #000

URLS

    They look like this: url()
    putting the url in the ( )

    url(http://gaiaonline.com)

Dapper Sex Symbol

Offline
Extra's

This is where code that other people want to add will go!

Dapper Sex Symbol

Offline
Positioning

    Code: position:
    Values: absolute, relative, float.

    Example:
    #profile
    {position: abosolute; top: 67px; left: 45px;}

Dapper Sex Symbol

Offline
LINKS


User Image

Dapper Sex Symbol

Offline
RESERVED

Dapper Sex Symbol

Offline
RESERVED

Dapper Sex Symbol

Offline
RESERVED

Dapper Sex Symbol

Offline
Okay....all done!
Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
Play with GCash
Play with Platinum
More
//
//

Join Now

// //

Have an account? Login Now!

//
//