CSS Profile Codes Tutorial -- A Comprehensive Guide | Page 1 | Forum

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

Excellent!		38.3%	[ 7371 ]
Good!		11.3%	[ 2185 ]
Okay		9.0%	[ 1726 ]
Not so bad :(		3.4%	[ 651 ]
Horrible :( :( :(		6.0%	[ 1158 ]
:ninja: .......GOLD!!!		32.1%	[ 6175 ]
Total Votes:	[ 19266 ]

Report ad

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Post: 15730229_1 created on Tue, 18 Jul 2006 01:11:36 +0000
Posted: Tue, 18 Jul 2006 01:11:36 +0000

Welcome to my new improved CSS profile codes tutorial.
I hope that this one will be easier to navigate and understand.

CTRL+F is your FRIEND!!!
Please use it to find something OR use the T.O.C.
located in the next post ^.^ Thanks!!
LOOK BEFORE YOU POST!

PROFILE CODES:: [.BrokenWings.] has made a list of all the codes as a supplementary guide to this one. Do NOT ask questions in that thread, it is a simply there to list all the codes in case you're too lazy to read/learn or just don't understand.

New Profile/Old Profile???
This guide ONLY covers OLD PROFILES!!!
So go to My Gaia --> Profile --> Account ---> Scroll down to the bottom and make sure it is set to "OLD SCHOOL"!!!!

Remember:: ALL codes (except the custom sections part) go in My Gaia --> Account --> Theme.

NOTE:: New users can now use OLD SCHOOL!!!
Go to My Gaia --> Profile --> Account --> "Choose Profile" --> Old School
and be sure to submit!

CSS stands for cascading style sheets.
It is the markup you can use to re-arrange portions of your profile.

A URL is the web-address which tells your browser where to go.

Image-hosters are places which hold your images online.
You must upload your images online in order for others to view them.

LIST OF FREE IMAGE HOSTERS::
Photobucket.com - Free, teamed up w/ GAIA for new profiles, resizes images over 100mb & certain dimensions (unknown/forger exact number), 1GB space, 10GB monthly bandwidth.
Imageshack.us - Free, login a little confusing, resizes images over 1.5mb, no dimensional resize (as long as under mb limit).
Tinypic.com - Free, no worries about bandwidth or space, images sometimes deleted after certian length of time, images larger than 250k are resized.
Free Image Hosting.net - Free, images resized if larger than 250k.
The Image Hosting.com - Free, images resized if over 1mb.
All You Can Upload - Free, resizing???

Also:: Tinyurl - just a good site that shortens your url's.

Eddafred

Keep in mind people, that our ability to answer questions depend on how desciptive you are.
We're not mind readers after all.

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_2 created on Tue, 18 Jul 2006 01:13:06 +0000
Posted: Tue, 18 Jul 2006 01:13:06 +0000

RULES!!!

A few things first:
~Do NOT PM Kahime! No matter what. Don’t do it.
~If you have a question, ask in the thread. If it’s not answered wait at least 2 days or 3 pages before reposting.
~Do not spam.
~Conversation is fine, but for the most part, try to keep it profile related. A little off-topic is acceptable.
~For the love of Gaia do NOT ask questions in noob/l337/web-speak, they will NOT be answered. Maybe some other kind people will answer your questions, but it’s certainly not my perogative.
~This thread is for OLD-STYLE profiles ONLY! We may update in the future when/if CSS becomes available for new profiles, but please keep in mind we don't curtail to the new profile system just yet. So please don't ask us about it! TY!!!
~Do NOT Reproduce any LARGE/ENTIRE POSTS of this thread!!! If you want to create your own tutorial, that's fine. But do it in YOUR style! Not mine.
~Do NOT quote any WHOLE post. Quoting codes or SMALL sections to ask/answer a question IS OK.

T.O.C.

1.WELCOME
2.RULES/T.O.C.
3.THREAD HELPERS/THREAD KEY
4.SECTIONS --> CLASSES & IDS/EXPLANATIONS - Section Names/Codes for all Sections!
5.LAYERS - Explanation on how your profile works.
6.UNIVERSAL CODES

SECTIONS

Dimensions of Sections, Positions of Sections, Hiding Sections.

BACKGROUNDS

Bg images/colors, Repeating Bg's, Positioning Bg's, Bg Dimensions.

FONTS

Font Colors, Font Size, Font Style, Font Weight, Font Type, Aligning Text, Decorating Text, Indenting Text, Word Spacing, Letter Spacing, Transforming Text.

BORDERS

Border Width, Border Color, Border Style, Removing Borders.

11.ADVANCED CODES

FILTERS & OPACITY

Greying Things, Making things Glow, Transparency.

SCROLLBARS

Scrolling Sections, Scrollbar Colors.

CURSORS

Changing Cursor, Cursor Images.

COMMENTS/QUOTE BOXES

Remove/Replace Corners, Remove/Replace the Arrow.

CUSTOM SECTIONS

Creating Custom Sections.

MISC. ADVANCED CODES

Hover Properties, Status Bar.

18.HELPFUL CODES EVERYONE ASKS FOR - Centering Profile, Remove Border between Friends, Replace Avatar, Flip Profile.
19.F.A.Q.
20.RELATED THREADS

PROFILE CODES RELATED

GENERAL PROFILE RELATED

FREE PROFILE THEMES SITES

COLOR CODES SITES

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_3 created on Tue, 18 Jul 2006 01:16:28 +0000
Posted: Tue, 18 Jul 2006 01:16:28 +0000

Thread Helpers – those who know teh codes

Kahime – thread creator – PM – NO! - Donate? - YES

Eddafred – dedicated thread helper - PM – YES - Donate? - YES
[King_Chaos] - dedicated thread helper - PM - NO! - Donate? - YES
[.BrokenWings.] - dedicated thread helper - PM - YES - Donate? - YES
[Heru] - dedicated thread helper - PM - YES - Donate? - YES
Nocturne of the Winds - dedicated thread helper - PM - YES - Donate? - YES

Georgenhoff – thread helper - PM - YES - Donate? - YES

PLEASE PLEASE PLEASE post in the thread FIRST!!! Do NOT PM anyone unless your question has gone unanswered for a lengthy amount of time.

If you post in the thread it helps us not get our inboxes flooded and helps other people who have the same question!!

By Donate - we mean we DO accept donations but it is NOT neccessary ^.^

A simple THANK YOU is all we need 3nodding

Want to become a thread helper??? There are two ways, A) PM Kahime, YES this is the ONLY time you may PM her. or B) Post & help alot in the thread and we might contact you!!!

Please note if choosing option A we must SEE you posting and helping in the thread alot in order for us to accept. Please do not submit a request more than ONCE and for better chances @ being accepted please submit only after you've helped out alot.

Thread KEY!!!

He who holds the key can unlock the chest which contains the treasure...

The treasure of codes to format your profile!! WOOHOO!!!
Ok....anyways....
Here it is:::

#XXX = a hex code. You can replace the 'XXX' w/ a 6 digit HEX code which relates to a color. OR if it's a simple web-recognized color name such as 'yellow' replace the whole string "#XXX" with the name.

url('xxx') = the link to an image. Replace the 'xxx' w/ a URL. Forget what a url is??? Check the first post!

0px = a measurement. Replace the '0' with a number any number and find out what happens!!!

section_name = a section name!!! Sections are listed and explained below ^.^ ALWAYS replace the 'section_name' with an actual section name!!! Otherwise your codes won't work at all. This is why we've colored them all green! So you can see them better and won't forget to change them!

px = pixels. This is described more in the font section.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_4 created on Tue, 18 Jul 2006 01:18:41 +0000
Posted: Tue, 18 Jul 2006 01:18:41 +0000

THE SECTIONS/THE ID'S/SOME EXPLANATIONS

The codes we are using here alter classes and id's that the gaia team has created. These are the ones that can be changed in your profile.

If you right click and select "view page source" (firefox) or "view source" (IE) you will see the markup used to create your profile page.

Any text that has "class" or "id" in front of it can be altered.

When typing up your codes any class you alter will need a "." period in front of it, and any id you alter will need a "#" number sign in front of it.

First we will go over an overview of the classes and id's (with a few html codes tossed in) that you can alter.

The Body

body - changes the main body area. (The area behind the content.) The body is the largest area on the page, and it spans the entire page.

"body" does NOT use a "#" or "." before it!!!! I see this error a lot. Do NOT put anything in front of it.

I realize this is more of an html code but it is best placed here.

The Site
#site - changes the margins and position of the site area. #site is the second-largest area, and it contains the profile contents, the main bar, the footer, etc.

The Sidebar & Main

#sidebar - changes the area directly behind the left side: profile, details, & wishlist. (As well as fonts in those sections.) #sidebar consists of all the sections on the left side. The sections it applies to are #profile, #details, and #wishlist.

#main - changes the area directly behind the right side: about, friends, journal, comments, multimedia, & signature. (As well as fonts in those sections.) #main is the area to the right of the profile, including the sections #about, #friends, #journal, #comments, #multimedia, and #signature.

The Top Header

#extendedProfileBody #header - changes the top header area.
#extendedProfileBody #header h1 - changes the background of the top header area.

Notice that here we use two id's and one html code "h1." In this case the "h1" only applies to "extendedProfileBody" and isn't used elsewhere in the markup. If we were to simply have h1 and not #extended... our code would apply to the entire page. By attaching it to #extended... we make our changes apply specifically to the top banner.

*Note - you can still change the dimensions using just the second code, so why not save space and just use that one. 3nodding

The Content Area

#content - changes the area behind the main sections such as 'profile,' 'about,' 'details,' etc. #content is both the #sidebar and #main sections combined, and covers all sections those two tags cover.

The "Section" Tag

The section tag is a class that is found next to most segments.
You can use it to combine codes together if you're making parts of your profile similar all around.
For example you can use it to make all sections such as 'profile,' 'about,' 'details,' etc. disappear, or to change the font-style, however it doesn't seem to work with all code types, so mess around with it first.

.section - changes the 'profile,' 'about,' 'details,' etc. sections universally.
.section h2 - changes the headers of the 'profile,' 'about,' 'details,' etc. sections.

*Note - "h2" is another one of those html codes. In this case it is only used for all the interior segments 'profile,' 'about,' 'details,' etc.

The Profile Area

#profile - changes the profile area (the area with your avatar and status bar)
#profile h2 - changes the header of your profile area. (The part that says your avatars name)
#profile .avatar - changes the avatar area of your profile section.
#profile .items - changes the items area of your profile section.
#profile .caption - changes the caption (quote) area of your profile section.
#profile .caption:before - changes the top curved corner area of quote box.
#profile .caption:after - changes the bottom curved corner area of quote box.
#profile .message - changes the message area of your profile section and the speech pointer/arrow.

The Status Bar

I realize the status bar is part of the profile section, but for the sake of sanity I've made it into a new section.

#bar – changes the status bar area.
#bar #onlineButton – changes the online portion of your status bar.
#bar #offlineButton – changes the offline portion of your status bar.
#bar #hiddenButton - changes the hidden portion of your status bar.
#bar #addButton – changes the add portion of your status bar.
#bar #msgButton – changes the PM portion of your status bar.
#bar #tradeButton – changes the trade portion of your status bar.
#bar #ignoreButton – changes the ignore portion of your status bar.

#bar #addButton a - changes the link state, pretty much the same as the above codes. (since they're already links.)

#bar #addButton a:hover - changes the hovered over state of the add button. (In other words, when you move your mouse over the add button in your status bar it will change that part. So if you want a different image when the person hovers, from the image when they're not hovering you'd change it with this code.)

*Note - the 'a' and 'a:hover' codes works on the msg, trade, and ignore portions as well.

The Details Section

#details - changes the details area.
#details h2 - changes the header of your details area.

#commonFriends - changes the common friends area.
#commonFriends li img - changes the avatar image area in common friends. (ie - the bg directly behind it, or the size or opacity of the avatar.)

#details #stats - changes the left half of the details text area.
#details #stats dt - changes the headings of the left half of details text area.
#details #stats dd - changes the input area of the left half of details text area.
#details #info - changes the right half of the details text area.
#details #info dt - changes the headings of the right half of details text area.
#details #info dd - changes the input area of the right half of details text area.

*Note - the stats and info area are the portions that say:: location, last login, posts, etc. Stats is the left side, info the right. Headings are: "location, Birthday, etc." Basically the text that Gaia inputed for you. The input area is the stuff that you typed in, such as your actual birthdate and in interests it would be whatever interest text you typed such as: anime, food, whatever.

The Wishlist Section

#wishlist - changes the wishlist area.
#wishlist h2 - changes the header of your wishlist area.
#wistlist .items - changes the items area of your wishlist.
#wishlist .questing - changes the questing image area of your wishlist.
#wishlist .bought - changes the bought image area of your wishlist.
#wishlist .donated - changes the donated image area of your wishlist.

The About Section

#about - changes the about area.
#about h2 - changes the header of your about area.
#about .links - changes the links area of your about section. (In case you want to changes the background color, size, position, whatever.)

The Friends Section

#friends - changes the friends area.
#friends h2 - changes the header of your friends area.
#friends .links - changes the links area of your friends section.
#friends #friendGroup - changes the friendgroup area - basically the background behind the background of each individual friend avatar as well as the width of the area behind the avatar.
#friends #friendGroup li - changes the border area in between friends.
#friends #friendGroup img - changes the avatar area of your friends section.

*Note - after messing around I can better describe the friend/friendgroup img codes.
The first one can change the dimensions of the area behind each individual friend without stretching the avatar image as well as place an additional background behind the friends. The second changes the properties of the avatar image, making it possible for you to have two backgrounds behind the avatars, the second one will overlap the first.
You can also change the dimensions of the second to stretch the avatar image. Mess around with it and see what you can do.

The Journal Section

#journal - changes the journal area.
#journal h2 - changes the header of your journal area.
#journal .links - changes the links area of your journal section.
#journal h3 – changes the journal title area of journal section.
#journal #entries - changes the entries area of your journal section.

The Comments Section

#comments - changes the comments area.
#comments h2 - changes the header of your comments area.
#comments .links - changes the links area of your comments section.

#comments dl dt.avatar img – changes the bg of avatars on the left side of your comments.
#comments dl dt.avatar2 img – changes the avatar area of avatars on the right side of your comments.

#comments .caption – changes the area of odd # comments.
#comments .caption2 – changes the area of even # comments.
#comments .caption:before - changes the top curved corner area of odd # comments.
#comments .caption:after - changes the bottom curved corner area of odd # comments.
#comments .caption2:before - changes the top curved corner area of even # comments.
#comments .caption2:after - changes the bottom curved corner area of even # comments.
#comments .caption .message - changes the message area of odd # comments and the speech pointer/arrow.
#comments .caption2 .message - changes the message area of even # comments and the speech pointer/arrow.
#comments p.date - changes the 'date' area in the comments message box.

The Multimedia Section

#multimedia - changes the multimedia area.
#multimedia h2 - changes the header of your multimedia area.
#multimedia object, #multimedia embed - changes the player object of your multimedia section.

The Signature Section

#signature - changes the signature area.
#signature h2 - changes the header of your signature area.

The Footer Section

#footer - changes the footer area (the part that says 'copyright Gaia Interactive.') (no longer available)

The Corp Section

#corp - changes the link area beneath the copyright bar.
(no longer available)

Links

Links are both their own section and NOT their own section.
If you write them w/out a section before them they affect the whole page, if you just want them to affect a section you must write the section id before them.

a:link - changes the default/normal link.
a:hover - changes the link status when hovered over.
a:visited - changes the link status when a link has been visited/clicked.
a:active - changes the link status when the link is in the process of a click to going to the url.

(We do not have a section later for links because links can accept ALL the properties that fonts do. So simply look at fonts to figure out what you can use with links.)

Other

If you quote someone or use the 'code' code anywhere in your profile these can control their properties.

td.code - controls things in the 'code' code.
td.quote - controls things that are quoted.

td .genmed - controls the title parts, the text that says "Code:" and "*** Wrote:"

Thanks to Edd for the codes!

You may have noticed that a few of the classes are used in multiple sections. So for these you CAN use them on their own to affect all areas that have them. Such as ".caption" is used in the profile section AND the comments section. Let’s say you want the caption boxes to have the same qualities in both profile and comments, then all you have to do is write: ".caption { attribute here }" and they will all have the same attributes.

However, if you want them to be different you must make sure to put the section id before it. 3nodding

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_5 created on Tue, 18 Jul 2006 01:21:00 +0000
Posted: Tue, 18 Jul 2006 01:21:00 +0000

Layers

Your profile is divided into layers.
If you can understand how they work you will be able to understand what types of codes you need for the things you wish to do.

In essence there are three main layers.
The body, the #content, and the #extendedProfileBody (where the gaia homes pic is)/#profile/#about/#details, etc areas (basically all the sections w/ the text/items/content in them.)

The body is the first layer and is behind the other two. Then the #content layer and what we will refer to as the “sections layer.”

So, if for example you have a Kingdom Hearts background on the body, and you want your content area to be blank, but your sections layer to have gray backgrounds behind each section. (In other words, behind your text/avatar/items/etc there would be the color gray) then you would have to make the #content layer invisible or in this case “see-through.”

If you can understand the layering you can figure out exactly which parts you want backgrounds on and which parts you don’t and which one’s to make transparent.

Note that if you want the area behind your avatar section to be transparent AND you want it to show the body background behind it you must make the #content area transparent because it is in-between the two layers.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_6 created on Tue, 18 Jul 2006 01:22:53 +0000
Posted: Tue, 18 Jul 2006 01:22:53 +0000

Universal Codes

These next sections list the codes that are the same for all sections.
Pretty much all sections can accept all of the same codes, just make sure to be specific if you want a code applied to #profile OR #profile .avatar (etc etc).

Of course not everything has font in it so applying a font tag where there is no font is just silly, but for the sake of conserving space we’ll still consider codes that are used in most sections to be universal.

Before we get into it here is one nifty 'code' to use to remind yourself what stuff does!!! The COMMENT CODE!!! (not to be confused w/ comment section codes)

/* This is a comment. */

Place this befroe any code, either a line above it, or with a space before the beginning of the code and change 'this is a comment' to whatever reminder you want.

So if you want to remind yourself that the code you're using is changing your font color you'd simply type this before the code::

/* Changes font color for this section. */
#section_name { color: #XXX; }

SECTIONS
BACKGROUNDS
FONTS
BORDERS

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_7 created on Tue, 18 Jul 2006 01:24:00 +0000
Posted: Tue, 18 Jul 2006 01:24:00 +0000

SECTIONS

Defining the Dimensions of a Section

#section_name { width: 0px; height: 0px; }

This will determine how large or small the section is.

Defining the Position of a Section

#section_name { position: absolute; left: 0px; top: 0px; }

Replace the zero's with the numbers you wish to use.

The possible 'position' codes are::
Absolute
Relative
Static
Fixed

Absolute:: means you are positioning the image in relation to its exact co-ordinates on the screen. Sometimes this causes errors in some browsers and does not always show correctly across all browsers, but it is the MOST exact form of positioning.

Relative:: means you are positioning the section relative to it’s containing box. So if you are positioning a section within the content section and are positioning it relatively, it would start counting from the top left corner of the content box, NOT the top left corner of the screen. This is a little less exact, but works better across browsers.

Static:: the default position. Only used to override a set position, but you can use the above too just fine instead.

Fixed:: similar to absolute but will not scroll.

Hiding A Section

#section_name { display: none; }

Removes the section.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_8 created on Tue, 18 Jul 2006 01:24:56 +0000
Posted: Tue, 18 Jul 2006 01:24:56 +0000

BACKGROUNDS

Changing The Background Image/Color

1. background pictures

#section_name { background: url('xxx'); }

2. background colors

#section_name { background: #XXX; }
#section_name { background: #XXX url('xxx'); }

The first changes just the background color, the second allows you to have a background color AND image. In order for the color to show around the image the image must be non-repeating.

3. transparent/"no" backgrounds

#section_name { background: transparent; }
#section_name { background: transparent url('xxx'); }
#section_name { background: none; }

The first makes the background invisible, the second allows you to have a partially invisible background AND image. In order for the transparent parts to show around the image the image must be non-repeating. The third code completely removes the background. If you are not using an image at all it's probably safest to use the third.

Repeating/Non-repeating the Background Image

#section_name { background: url('xxx') repeat; }

#section_name { background: url('xxx'); repeat: yes; }

The possible repeat codes are as follows:
repeat (repeats the whole image w/in the area)
no-repeat (does not repeat the image)
repeat-x (repeats the image horizontally only)
repeat-y (repeats the image vertically only)
repeat: yes

Positioning the Background Image

There are a few different ways you can position the image, which we will describe here.

#section_name { background: url('xxx') top; }

The possible positioning codes are::
top
bottom
left
right
center

The background will always start at the left top, so if you want it top and right you would put:

#section_name { background: url('xxx') top right; }

Similarly you can combine any two that make sense together. (since you obviously can’t have it be top AND bottom.)

#section_name { background: url('xxx'); position: 'see next section'; left: 0px; top: 0px; }

This is for a slightly more exact positioning of the image.
Replace the '0' with whatever integer you wish to use.
The first one is how far it is from the left, the second how far down it is from the top.

Background Positioning: Absolute/Relative

As you see in the previous code there is a tag which says "position: ----;"
here you will place which type of positioning you want to use.

The possible 'position' codes are::
Absolute
Relative

Absolute:: means you are positioning the image in relation to its exact co-ordinates on the screen. Sometimes this causes errors in some browsers and does not always show correctly across all browsers, but it is the MOST exact for of positioning.

Relative:: means you are positioning the image relative to its containing box. So if you are placing a image in the #profile section and are positioning it relatively, it would start counting from the top left corner of the profile box, NOT the top left corner of the screen. This is a little less exact, but works better across browsers.

Static:: the default position. Only used to override a set position, but you can use the above too just fine instead.

Fixed:: similar to absolute but will not scroll.

Modifying Or Specifying the Dimensions of the Image

#section_name { background: url('xxx') 0px 0px; }

Similar to positioning just replace the '0' with the number you want. The first one is width, the second height. You can either put the actual dimensions of the image in, which helps keep consistency over browsers and also won't reduce the size if the image is larger than the section, OR you can modify the image size!

NOTE::
When using the repeat, no-repeat, top, bottom, left, right, center codes after a background image the semi-color goes AFTER THE CODES NOT after the last parenthesis.

Like SO::

GOOD:: #section_name { background: url('xxx') no-repeat center; }

BAD:: #section_name { background: url('xxx'); no-repeat; center; }

HOWEVER when using "position" codes or "repeat: yes;" (which I rarely use and rarely see anyone use "repeat: yes;" wink these codes DO go after the semi-colon after the closing parenthesis.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_9 created on Tue, 18 Jul 2006 01:25:55 +0000
Posted: Tue, 18 Jul 2006 01:25:55 +0000

FONTS

Changing Font Color

#section_name { color: #XXX; }

Changing Font Size

#section_name { font-size: 0px; }

Types of Font Measurement::
px = pixels
pt = points
in = inches
% = percent

(You can also use these systems in anything that has a size or measurement. The two most common are px and % and I will always use ps in this tutorial.)

Changing Font Style

#section_name { font-style: italic; }

Types of Font Styles::
normal (normal text, no changes)
italic (slants the text)
small caps (unsure)
oblique (unsure)

Changing Font Weight

#section_name { font-weight: bold; }

Types of Font Weights::
extra-light
light
demi-light
medium
bold
demi-bold
extra-bold

Changing Font Type

#section_name { font-family: arial, helvetica; }

Please note that most tutorials suggest you list at least TWO different font types. This is so in the case that a browser cannot read your first choice, it will go to the second. Always make sure your last choice is one that all browers can identify.

Aligning The Text

#section_name { text-align: left; }

Possible Alignments::
left
center
right

Decorating the Text

#section_name { text-decoration: underline; }

Possible decorations::
italic
blink
underline
line-through
overline
none

Indenting the Text

Similar to text align except you have more control over the text placement. As always indent starts from the left side.

#section_name { text-indent: 0px; }

Alot of people use text-indent to "remove" the text from their headers by either using a very large numer or a negative number. This basically pushes the text out of the header area, however you cannot replace the text, you must place your new text as part of the header background image.

One problem with indenting the text so far "off" the screen is if you have a horizontal scrollbar in the section it will cause the scrollbar to scroll as far as the text is.

Changing The Spacing Between Words

#section_name { word-spacing: 0px; }

This will add white space in between your words. The amount depends on the number you put in.

Changing The Spacing Between Letters

#section_name { letter-spacing: 0px; }

Adds whitespace inbetween letters.

Transforming The Text

#section_name { text-transform: uppercase; }

Changes all text w/in a section to a certain format.

Possible transformations::
uppercase (changes all letters to uppercase)
lowercase (changes all letters to lowercase)
capitalize (capitalizes the first letter of each sentence or line)

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_10 created on Tue, 18 Jul 2006 01:26:48 +0000
Posted: Tue, 18 Jul 2006 01:26:48 +0000

BORDERS

Changing Border Width

#section_name { border-width: 0px; }

This changes the thickness of your border.
You can use pixels or any other form of measurement OR the following::
thin
medium
thick

Changing Border Color

#section_name { border-color: #XXX; }

Changing Border Style

#section_name { border-style: dashed; }

Possible border styles::
dashed
dotted
double
groove
inset
outset
ridge
solid

Removing a Border

You can either use the "border-width" command set to '0px' OR the following::

#section_name { border: none; }

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_11 created on Tue, 18 Jul 2006 01:29:29 +0000
Posted: Tue, 18 Jul 2006 01:29:29 +0000

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_12 created on Tue, 18 Jul 2006 01:31:13 +0000
Posted: Tue, 18 Jul 2006 01:31:13 +0000

FILTERS & OPACITY

Make Things Grayed

#section_name { filter: gray; }

Only works in IE.

Make Things Glow

#section_name { filter: glow(color=#XXX, strength=##); }

Strength can be any number between 1 to 255 and affects the brightness of the glow.
Also only suppurted in IE.

Make Things Partially Transparent

#section_name { filter: alpha(opactiy=##); opacity: .##; }

The first code works for IE and is a number between 1 - 100 and the second works for Firefox and is a decimal version of that number. So 'opacity=50' in the second would be 'opacity: .5'

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_13 created on Tue, 18 Jul 2006 01:32:33 +0000
Posted: Tue, 18 Jul 2006 01:32:33 +0000

SCROLLBARS

Making A Section Scroll

#section_name { overflow: auto; }
#section_name { overflow-x: auto; overflow-y: auto; }

Types of overflow codes::
auto - will overflow IF the section goes larger than the specified dimensions.
none - will not overflow.
hidden - will not overflow.

overflow-x is the horizontal, overflow-y is the vertical. If you want BOTH or NEITHER to scroll simply use the first code. Scrolls will only work if your section exceeds the specified dimensions. So you MUST set how big your section will be in order for a scrollbar to show up.

Changing the Colors on a Scrollbar

#section_name { scrollbar-track-color: #XXX; scrollbar-face-color: #XXX; scrollbar-arrow-color: #XXX; scrollbar-shadow-color: #XXX; scrollbar-darkshadow-color: #XXX; scrollbar-highlight-color: #XXX; scrollbar-3dlight-color: #XXX; }

Just mess around with the different segments to see what each change. ^.^ ONLY works in IE.

This is more of a note, rather than an edit.
You CANNOT use "body" for the scrollbars. If you want to affect the whole page use "html" with NO "#" in front of it. Or use "#content" to affect all scrolls except the very right one.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_14 created on Tue, 18 Jul 2006 01:33:21 +0000
Posted: Tue, 18 Jul 2006 01:33:21 +0000

CURSORS

Changing The Cursor

#section_name { cursor: crosshair; }

Possible COMMON cursors::
(in other words you don't have to upload anything)

crosshair
pointer
wait
text
help
move
n-resize
ne-resize
nw-resize
e-resize
w-resize
s-resize
se-resize
sw-resize

Replacing The Cursor With Your Image

#section_name { cursor: url('xxx.cur'); }

This is for a custom created cursor. To do so you need a cursor creating program (thanks C.O.D.E.D. for the link!) and an image hoster that supports .cur files. Search google for some 3nodding

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Kahime

(?)Community Member

Sparkly Dabbler

6,350 Points

Offline

Report Post
Post: 15730229_15 created on Tue, 18 Jul 2006 01:35:03 +0000
Posted: Tue, 18 Jul 2006 01:35:03 +0000

COMMENT/QUOTE BOXES

Removing/Replacing Corners

#section_name .caption:before {display: none; background: url('xxx'); }
#section_name .caption:after {display: none; background: url('xxx');}
#section_name .caption2:before {display: none; background: url('xxx');}
#section_name .caption2:after {display: none; background: url('xxx');}

With this you can actually remove ALL the corners or only some of them ^.^ The second two are only for the comments section. The first two are comments & profile section. Replace the corners w/ your own images with the background section. If you just don't want the corners at all remove the 'background...' portion of the code.

Remove/Replace The <

#section_name .message {background-image: none; }
#section_name .message {background-image: url('xxx'); }

The first removes and the second replaces.

| WELCOME | RULES/T.O.C. | THREAD HELPERS/THREAD KEY | SECTIONS --> CLASSES & IDS/EXPLANATIONS | LAYERS | UNIVERSAL CODES | SECTIONS | BACKGROUNDS | FONTS | BORDERS | ADVANCED CODES | FILTERS & OPACITY | SCROLLBARS | CURSORS | COMMENTS/QUOTE BOXES | CUSTOM SECTIONS | MISC. ADVANCED CODES | HELPFUL CODES EVERYONE ASKS FOR | F.A.Q. | RELATED THREADS | PROFILE CODES RELATED | PROFILE HELP RELATED | PROFILE 2.0 RELATED | CSS RELATED | PROFILE GUILDS | GENERAL PROFILE RELATED | FREE PROFILE THEMES SITES | COLOR CODES SITES | AFFILIATES | KAHIMES PROFILES | BLACKLIST | QUICK/BASIC PROFILE |

Report This Topic | unblock images

1 2 3 4 5 6 ... 675 676 677 > >> >>> »|

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

Welcome to Gaia! ::

Quick Reply

More Information

Welcome to Gaia! ::

How do you like the new tutorial???

Quick Reply

More Information