Version 2.0 CSS Guide | First Page | Forum

x.windstar2.x · 2006-08-16T15:29:48-07:00

[size=10]This is a guide for users that have been wondering why Old School CSS won't work for the New profile system. It's easy really, instead of sections you use panels. :3nod: If I'm missing anything or am wrong about something feel free to tell me. [b]Navigation[/b] - 1. Expanation 2. Comparison 3. Moving Panels 4. Code Fill 5. Reserved[/size]

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Report ad

x.windstar2.x

(?)Community Member

Offline

Post: 16768451_1 created on Wed, 16 Aug 2006 23:29:48 +0000
Posted: Wed, 16 Aug 2006 23:29:48 +0000

This is a guide for users that have been wondering why Old School CSS won't work for the New profile system. It's easy really, instead of sections you use panels. 3nodding
If I'm missing anything or am wrong about something feel free to tell me.

Navigation -

1. Expanation

2. Comparison

3. Moving Panels

4. Code Fill

5. Reserved

x.windstar2.x

(?)Community Member

Offline

Report Post
Post: 16768451_3 created on Wed, 16 Aug 2006 23:40:15 +0000
Posted: Wed, 16 Aug 2006 23:40:15 +0000

Here I will show you what the Old School CSS codes looks like in the New profile CSS.

body - html, body

.section - .panel

.section h2 - .panel h2

#content - #columns

#content #sidebar - #column_1

#content #main - #column_2

#profile - .details_panel
#profile .items - .equipped_list_panel

#wishlist - .wish_list_panel

#about - .about_panel

#journal - .journal_panel

#friends - .friends_panel

#multimedia - .media_panel
#multimedia embed - .media_panel embed

#comments - .comments_panel

#signature - .signature_panel

Remember to take out the bolds before you use the code though. 3nodding

x.windstar2.x

(?)Community Member

Offline

Report Post
Post: 16768451_4 created on Wed, 16 Aug 2006 23:44:59 +0000
Posted: Wed, 16 Aug 2006 23:44:59 +0000

Are you wondering why you can't move the panels with only top, bottom, left, and right? Well it's simple. You know how you move the dates in the comments on Old School? Well that's how you move the panels, with margins. Instead of putting top or bottom or left or right you put margin-top, margin-bottom, margin-left, and margin-right.
Here is an example of how to use the margins in a code if you are still confused:

.about_panel { margin-top: 30px; margin-left: 30px; }

Remember to take out the bolds before you use the code though. 3nodding

x.windstar2.x

(?)Community Member

Offline

Report Post
Post: 16768451_5 created on Wed, 16 Aug 2006 23:59:28 +0000
Posted: Wed, 16 Aug 2006 23:59:28 +0000

If you are just too lazy to read my posts above this is where I'll be putting the main codes.
*Note I only put the background part of the code in it, you can add margins, font-color and such to it also.

html, body { background: #FFFFFF url() no-repeat; }
This will change the background of the whole body background.

.panel { background: #FFFFFF url() no-repeat; }
This will change the backgrounds of all of the panels.

.panel h2 { background: #FFFFFF url() no-repeat; }
This will change the background of all panel headers. You can also add a panel name and _ in front of it to change a specific header. Like: .about_panel h2.

#columns { background: #FFFFFF url() no-repeat; }
This will change the background of all the columns.

#column_1 { background: #FFFFFF url() no-repeat; }
This will change the background of the first column.

#column_2 { background: #FFFFFF url() no-repeat; }
This will change the background of the second column.

#column_3 { background: #FFFFFF url() no-repeat; }
This will change the background of the third column.

.details_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the profile panel.

.equipped_list_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the equipped list.

.wish_list_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the wishlist panel.

.about_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the about panel.

.journal_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the journal panel.

.friends_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the friends panel.

.media_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the multimedia panel.

.media_panel embed { background: #FFFFFF url() no-repeat; }
This will change the background around the media video.

.comments_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the comments panel.

.signature_panel { background: #FFFFFF url() no-repeat; }
This will change the background of the signature panel.

Remember to take out the bolds before you use the code though. 3nodding