Beyond the Coding [Designing Your Profile] [Personal Help] | First Page | Forum

Gaia Forums » GAIA Online » Site Questions & Assistance » Gaia Guides and Resources

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

Report ad

Chocolate Mousse

(?)Community Member

Offline

Post: 13861565_1 created on Thu, 25 May 2006 01:48:02 +0000
Posted: Thu, 25 May 2006 01:48:02 +0000

User Image - Blocked by "Display Image" Settings. Click to show.

Welcome to Beyond the Coding, my thread giving information about Gaia profiles. This is not a thread for just codes. This thread will explain about what CSS is, designing for multi-browsers and users, designing realisticly, dissecting the profile, and much more. I will have codes and a base theme code to run off of, but it is not the main purpose of this thread.

I'm currently working on expanding the guide and adding more content. Feel free to post or PM me if you need help.

Table of Contents
I. Introduction
II. What is CSS?
III. Browser Functionality
IV. Designing Realisticly
V. Things to Avoid
VI. Dissecting the Profile
VII. Base Theme Coding
VIII. Special Codes
IX-XIII. Reserved
XIV. Link Me
XV. Theads & Links

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_2 created on Thu, 25 May 2006 01:49:38 +0000
Posted: Thu, 25 May 2006 01:49:38 +0000

CSS stands for Cascading Style Sheets. What it simply does is tell the HTML (think of that as the content of a webpage) how to look. You can define background colour, font type and colour, position of content, just about anything that doesn't require something extra, like Javascript.

Terms To Know

Px: Short for Pixel
Left: Term used to define how far from the left of the screen the image/content should be placed.
Top: Term used to define how far from the top of the screen the image/content should be placed.
Width: Term used to define how wide the image is or how much room is allowed horizontally for content.
Height: Term used to define the maximum height vertically for an image or content.

So, what exactly can I do with CSS in my Profile?

Below are codes and descriptions are various css elements, or options. I'll have them seperated by what they do.

Background

Background-color
This is one of the most popular CSS elements. What this does is simply change the background colour. If you'd like to look up a certain color, December.com has an extensive list of colors codes that can be used. To create a transparent background, simply replace the colour code with 'trasparent'.
Exs: {background-color: #00ff00}, {background-color: transparent}

The rest of these background commands deal with an image in the background.

Background-image
This command simply places an image in the background. You put the image URL of the background you want inbetween the () marks.
Ex: {background-image: url(diamond.gif);}

Background-attachment
This command tells whether the background image should scroll or if it should be fixed on the page.
Ex: {background-image: url(diamond.gif); background-attachment: scroll; background-color: #00ff00}

Background-position
This command tells where to start placing the background.
Possible commands are top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos.
Exs: {background-image: url(diamond.gif); background-attachment: scroll; background position: top left; background-color: #00ff00}, {background-image: url(diamond.gif); background-attachment: scroll; background-position: 5px 10px; background-color: #00ff00}

Background-repeat
This command tells the background if at all it should repeat, and which direction it should. Repeat repeates vertically and horizontally, repeat-x repeates horizontally, repeat-y repeats vertically, and no-repeat does not repeat the background.
Ex: {background-image: url(diamond.gif); background-attachment: scroll; background position: top left; background repeat: repeat; background-color: #00ff00}

Border
For borders, you can use color, style, and width for certain portions (left, right, bottom, top).

Border-width
Defines the width of the border using thin, medium, thick, or a defined pixel amount.
Exs: {border-width:thin}, {border-width:1px}

Border-style
Defines the style look of the border using none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. This image can show how each style looks.
Exs:{border-width:thin; border-style:double}, {border-width:1px; border-style:solid}

Border-color
Defines the color of the border.
Exs:{border-width:thin; border-style:double; border-color:#000000}, {border-width:1px; border-style:solid; border-color:blue}

Font

Font-family
Defines the type of font used. Common fonts are Arial, Times, Times New Roman, Georgia, Tahoma, Verdana.
Ex: {font-family:tahoma}

Font-size
Defines the size of the font used. Can be set using xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger or a defined pixel size.

Exs: {font-family:tahoma; font-size:10px}, {font-family:tahoma; font-size:small}

Font-style
Defines if the font is italic, oblique or normal. Oblique is slanted.
Exs: {font-family:tahoma; font-size:10px; font-style:normal}, {font-family:tahoma; font-size:small; font-style:italic}

Font-variant
Defines if the font is normal or small caps.
Ex: {font-family:tahoma; font-size:10px; font-style:normal; font-variant:small-caps}

Font-weight
Defines the weight (boldness) of the font. Can use bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900.
Exs: {font-family:tahoma; font-size:10px; font-style:normal; font-weight:bold}, {font-family:tahoma; font-size:small; font-style:italic; font-weight:300}

Text

Color
Changes the color of the text. Can use name or hex code.
Ex: {color: #000000;}

Direction
Sets the text to be left to right or right to left. Can use ltr for left to right and rtl for right to left.
Ex: {direction:rtl}

Letter-spacing
Increases or decreases the spacing between letters.
Ex: {letter-spacing:3px}

Text-align
Sets the position of the text using left, right, center, or justify.
Ex: {text-align:center}

Text-decoration
Sets decoration to the text using overline, underline, and line-through.
Ex: {text-decoration:underline}

Text-transform
Defines capitalization of the text. Capitalize makes each word start with a capital letter, uppercase makes every letter a capital letter, and lowercase makes no letter capital.
Ex: {Text-transform:lowercase}

Word-spacing
Increases or decreases the spacing between words.
Ex: {word-spacing: 3px}

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_3 created on Thu, 25 May 2006 01:51:28 +0000
Posted: Thu, 25 May 2006 01:51:28 +0000

When coding in CSS, there are many different elements you can use to add a unique feeling to your profile. There are also various ways of aligning your profiles to look good. What many people forget or do not know is that not all CSS codes work in all browsers. Designing for the three most common browsers, Internet Explorer, Firefox, and Netscape, is crucial to get an overall positive response from your profile. Not only is the choice of code needed, but also the overall size of your layout is equally important.

Compatibility Charts
The following links provide charts that provide information on what codes work in what browser. Using these as a reference sheet on what works and what doesn't to provide maximum compatibility is a great thing.

Quirks Mode CSS2 Compatibility
Abridged CSS2 Compatibility

Avoiding Overly Small/Large Layouts

You've designed a lovely profile. It works almost to the tee in the three most common profiles. But you designed a profile for just your resolution, 1600 x 1200. This is often a problem when designing profiles, a person may design simply for their own computer resolution, and not for those who will be viewing them.

The two most common resolutions are 800 x 600 and 1024 x 768. When you start dabbling into custom aligning of your profile, keeping those two resolutions in mind are crucial, espically if you are using a resolution that varies for those. You may think that designing for yourself is the most important, but who wants to view a profile that is too big or too small for their resolution? What I have found that works best is to keep the maximum width for a profile at 800 pixels. This almost gurantees compatibility in any resolution. Keep in mind though that you will have to side scroll on Gaia Online if your resolution is 800 x 600.

Known Codes to Avoid Using
-- The glow command. Though it may look as a nice feature in Internet Explorer, only people in Internet Explorer can see it. There are other elements to give spunk to your profile that can be used.

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_4 created on Thu, 25 May 2006 01:52:30 +0000
Posted: Thu, 25 May 2006 01:52:30 +0000

This section mainly involves those who want to do a more custom profile, but can be applied to those simply moving things around.

Don't Create Something That You Cannot Code

Sure, it would be nice to have a profile that has a sun, clouds, trees, and content on tulip petals, but when you think about all you have to say on your profile and trying to make it look nice to all, it really does not work. There are a few key things to ask yourself when designing a profile.

1) Will I Have Enough Room for The Content?
Making compact profiles are pretty nifty, but there are many limitations of coding on for your Gaia Online profile. If you are going to talk a lot, or want an overall smaller layout, remember to include a scrolling option, or to simply expand the layout

2) Is the Design I Want Workable and Easy to View?
Like my example in the opening paragraph of this section, some things just are not completely possible. You can design a beautiful layout in your graphic program but it is not possible, or extremely difficult, to code the way you see it in your head. Remember, when you design something, you have to see the finished product and be able to imagine it realistically.

3) Will My Content Be Too Crowded?
Nobody likes to see a layout that is cluttered with too many pictures, sections, or text. It feels as if you are walking into a room filled from the floor to ceiling with things that could easily be put away. If you know your profile is going to be too crowded, try cutting back a few sections or establishing a new design.

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_5 created on Thu, 25 May 2006 01:53:41 +0000
Posted: Thu, 25 May 2006 01:53:41 +0000

When creating or adding content to your profile, there are some things that just arn't vistor friendly. These here are general pet peeves, but are things to keep in mind when establishing a profile.

Background Music/Autoplay Multimedia

This has to be one of the most annoy things. It isn't cool, and it's really aggrivating when trying to listen to your own music and you can't turn off the music on the profile you are on.

Unreadable Font Colours

This, too is rather aggrivating. No one wants to highlight what you typed about yourself, or what commentors said.

Neon Colours

Not only are they hard to read, they are overall blinding on the eyes. Again, it doesn't make you cool.

Overload of Picture in Background/About Section

Most of the time, this either makes things hard to read or makes the page extremely cluttered and hard to navigate through.

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_6 created on Thu, 25 May 2006 01:54:39 +0000
Posted: Thu, 25 May 2006 01:54:39 +0000

Coming soon.

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_7 created on Thu, 25 May 2006 01:55:50 +0000
Posted: Thu, 25 May 2006 01:55:50 +0000

Feel free to use the base below to start working on a profile. There are no codes in the base, simply a way to keep the sections organized.

/*GENERAL*/
body {}
html {}
#header {}
#extendedProfileBody #header h1 {}
#content {}
#site {}
#site a:link {}
#site a:visited {}
#site a:active {}
#site a:hover {}

/*PROFILE*/
#profile {}
#profile .avatar {}
#profile .caption {}
#profile .items {}
#bar {}
#profile h2 {}

/*DETAILS*/
#details {}
#details #commonFriends {}
#details h2 {}

/*WISHLIST*/
#wishlist {}
#wishlist h2 {}

/*ABOUT*/
#about {}
#about .links {}
#about h2 {}

/*FRIENDS*/
#friends {}
#friends h2{}

/*JOURNAL*/
#journal {}
#journal h2 {}

/*MULTIMEDIA*/
#multimedia {}
#multimedia h2{}

/*COMMENTS*/
#comments {}
#comments dl dt.avatar img {}
#comments dl dt.avatar2 img {}
#comments h2{}
#comments dl dd {}
#comments .links {}
#comments .caption {}
#comments .caption2 {}
#comments .message {}

/*SIGNATURE*/
#signature {}
#signature h2 {}

/*FOOTER*/
#footer {}
#corp {}

Chocolate Mousse

(?)Community Member

Offline

Report Post
Post: 13861565_8 created on Thu, 25 May 2006 01:57:24 +0000
Posted: Thu, 25 May 2006 01:57:24 +0000

Scrolling Sections

Scrolling sections are a nice things to have if you are limited on space or just want to try something different. They are also rather simple to use.

There's two key codes in scrolling sections: height and overflow. Overflow will allow the section to scroll and height defines how tall the section will be until it 'overflows'.

The code is below. Add it to any section you want to scroll. Be sure to define your own height and change the scrollbar colours to match!

height:200px; overflow:auto; overflow-x: hidden;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color:#000000;

Custom Sections

Custom sections are a rather pain in the rear to get done right. There's a good chance you have seen a profile with a 'Quilt' or 'Links' section of some sort. What that is is actually a custom section that you can add any sort of content to.

There's a few things to keep in mind with custom sections. They run best off of the About section, though you can use it for journal, but I won't describe that. Also, if you want your about section to scroll, you have to actually put what you want as your About section in a custom section. Rather confusing. @.@; You can have as many sections as you want though.

The first thing you have to do is put in the coding in your Theme area. For one custom section, you will use #about ol {Place and font coding here}. If you want to add another you use #about ol ol {Place and font coding here}. You keep adding another ol to the code whenever you want to add another section. Remember though, if you have placement for your about section, you might have to use negetive numbers to get the placement to be different than the about section.

Now, to place the actual content in. You need to go to your About section. Now for every custom section you have you need to have the content in a certain bracket:

[list=a]Custom content here[/list]

Now, say you have 2 custom sections, and your about section does not scroll. Your about coding would look like this.

[list=a][list=a]About section 2.[/list]About section 1[/list]Regular about section.

This is really confusing, so don't hesitate to asking.