All Out Guide to CSS // NOT UPDATED TO REFLECT SYSTEM CHANGE

[ElindranythElindranyth]

READ THIS FIRST!!


THIS GUIDE IS CURRENTLY NOT UP TO DATE WITH CHANGES MADE TO THE PROFILE SYSTEM. I'M WORKING ON IT. DO NOT POST QUESTIONS REGARDING ANY OF THE CHANGES AS WE JUST DON'T KNOW YET, AND WE KNOW THE FIRST PAGE IS OUT OF DATE.

IF A CODE THAT IS LISTED ON THE FIRST PAGE DOESN'T SEEM TO BE WORKING, CHECK BACK AFTER THE TITLE OF THIS THREAD SAYS "UPDATED" TO SEE IF THAT CODE HAS CHANGED.

This thread is not designed to spoonfeed you codes. If you can't read the first page and figure out how to put the code together, explain where you are getting stuck, but don't expect people to do your coding for you. Do not PM me with any questions about how to do something on your profile; I answer questions on my own terms, when I have time and patience and such. I may have a help guide, but I don't like my inbox being treated like your personal Profile Question Center.

Please read the first page before posting any questions in this thread. If you can't bother to read the first page to find your answer, why should anyone bother to read your question and answer it, especially if it's already been answered on the first page?





CSS is probably the coolest thing to use to customize your profile, with either the Old School or v2 profile system. CSS is such a powerful tool when it comes to any sort of design... pretty much if you can think of it, you can do it.

With Gaia Profiles, you are doing CSS overrides. What this means is that you are building CSS based on what CSS the Gaia devs have already defined. This makes it a little harder, because there's only so much you can work with, but you can still do alot with it, and make some pretty awesome looking profiles, using either system.

In all honesty, the v2 system is a little harder to work with if you're used to the Old School system, but it is still possible to do alot with it. And it all may seem overwhelming at first, but once you get the hang of it, it's all pretty easy to use and work with. Hopefully, with the help of this guide, you'll be able to whip out great looking, original profiles in no time at all, using either system.

There are two places in which you can place your CSS override code. With the Old School system, you'll put your code in the "Theme" section on the Gaia Profiles Backend (as shown on page one of this guide). With the v2 system, you'll put your code in the CSS tab of the "Theme" section in the profile itself (as shown on page two of this guide).

Each system uses the same basic ideas and general terms, but the actual code for the classes and IDs are different. What this means is that you can't code a profile in the Old School system and use that same code on the v2 system, and vice versa. Currently, the v2 system has a "Convert" button that takes CSS designed for Old School and roughly converts it to something that will work in v2. Unfortunately, it doesn't do a very good job, but it gets some stuff like the page's background and link colors. In all honesty, you can probably do a better job yourself just by referencing this guide xd Once you know the differences between the two systems, it's possible to take a simple skin and "translate" it to the other system's code in about 15-20 minutes.

1. A little intro to CSS + Contents
   
2. Old School Copy and Paste
   
3. v2 Copy and Paste
   
4. Editable Copy and Paste for any system
   
5. Old School Editable Copy and Paste
   
6. v2 Editable Copy and Paste
   
7. General HTML tag Overrides
   
8. Old School Common Classes and IDs
   
9. v2 Common Classes and IDs
   
10. Old School / v2 Translation Cheat Sheet
    
11. How to use Classes and IDs to Define Custom CSS
    
12. How to Define Styles for your Custom CSS
    
13. Food For Thought
    
14. Spiffy Tricks
    
15. Link In and Links Out

Post this form in this thread if you want people to help you here.

Help Form!

[b]Which profile system are you using?[/b]
[b]What doesn't seem to be working?[/b] (answers like "everything" are not helpful and make it so we can't exactly help you)
[b]What have you already tried to do to make things work?[/b] (if you haven't tried anything then you should try a few things before giving up! be specific about what codes you've used and whatnot.)
[b]Post the part of your code you are having trouble with. DO NOT POST YOUR ENTIRE CODE! This will stretch the page alot.[/b]

[ElindranythElindranyth]

old school copy and paste

First off, we'll give you one-liner codes for those of you who are looking to do a specific thing and just want the code for it, without caring how it works xp Remember, these are specific to Old School profiles.

.section{font-weight: lighter;}

gets rid of the unneccesary bolding caused by the missing </strong> tag in the interests section

.section h2{text-indent: -5000px;}

make all the header text dissapear (or move waaaaay to the left) so that you can use an image instead of the basic text

#commonFriends{display:none;}

make it so your common friends don't show up when other people visit your page. Commonly used if your layout depends on your details box being a set size

#friends #friendGroup li{border-right:0px;}

get rid of that annoying line along the side of your friends

#profile ul.items {display: none;}

make the items you're currently wearing not appear

.caption:before, .caption:after, .caption2:before, .caption2:after{display:none;}

get rid of the rounded corners. You can't see them in IE but if you leave them in and have a blue background for your comments (or any color other than white) it makes things look like crap for anyone viewing with firefox

#comments .avatar, #comments .avatar2{display:none;}

remove the avatar of the person who's commented. A good thing to do if your comments box is less than 300 pixels wide

#about .links {display: none;}

make the links at the top of your about section disappear

#site{margin-left: auto; margin-right: auto; width: 760px;}

center your profile

#content, #header{border:0px;}

get rid of the grey line on the right side of your profile

.caption .message, .caption2 .message{background: transparent;}

get rid of the caption "tail"

[ElindranythElindranyth]

v2 copy and paste

Now for the easy copy & paste codes for v2. There aren't as many, simply because most of the codes you will be using to override the CSS will actually require some editing. Most of the things you needed to do in the old school profile system that you could just copy and paste code without editing aren't things you need to do in v2 profiles. When they did v2, they paid attention to alot of the things we all took out and altered on a regular basis

--I actually have none right now, all of them can be edited slightly sweatdrop --

[ElindranythElindranyth]

Editable Copy and Paste for Either System

These are common things that people like to do to different sections. Because of that, you can use them with either system, just replacing SECTIONID with the one that fits for whichever system you're using. Items that are red are things that have to be changed. Items that are blue are things that you can change if you want, or you can leave as the are.

SECTIONID{overflow:scroll; overflow-x:hidden; overflow-y:auto; height: ##px; width:##px;}

make a section scroll vertically, but not horizontally. Replace SECTIONID with the proper ID from the common classes & IDs post for the system you are using and the ##'s with the proper height and width of the block you are putting the scrollbar in. NOTE In v2, this will only work when you use the unique panel ID for the section. Further on down in this guide, I explain how to find this for any given section smile

SECTIONID{background: transparent url(http://imagenamehere) top right no-repeat;}

make a section have an image for a background that is aligned at the top right of the block that won't repeat. Also have all the background that isn't covered by the image be transparent, so whatever color is in the block below will show through. Replace SECTIONID with the proper ID from the common classes & IDs post for the system you are using, and http://imagenamehere with the URL of the image you want as the background.

SECTIONID{border: 1px solid black;}

put a 1 pixel solid black border around a section. you can make the lines thicker, change the color, or make the line dotted or dashed instead of solid. Remember to replace SECTIONID with the proper ID from the common classes & IDs post for the system you are using.

SECTIONID{opacity: 0.85; -moz-opacity: 0.85; filter:alpha(opacity=85);}

make a block see-through-ish. It affects all "child" elements of the block, which means any images or text inside the block will become semi-transparent as well. Note that the first two numbers are decimals, and the last number is a whole number. The closer to 1 or 100 the number gets, the less see-through the item is.

[ElindranythElindranyth]

old school editable copy and paste

Next we have code that takes a little more work. This code you can copy and paste, but you've gotta make a few changes before it will work for you. Again, it doesn't really require that you understand the code to use it. Don't know what section you're trying to change? The next post will contain all the most common section IDs (and then some) and a short description of each so you can find the right section ID for the following codes smile Items that are red are things that have to be changed. Items that are blue are things that you can change if you want, or you can leave as the are.

#multimedia embed{height:##px; width:##px;}

change the size of your multimedia section. Since most multimedias aren't square, I'd suggest picking either the height to width to start editing. White space will fill up the rest of the square that Gaia alots (they give you a 500x500 square I believe), and then once you get either your height or width set, you can tweak the other one until all the white is gone.

#bar #onlineButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}

change the image that shows when you are online. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels

#bar #offlineButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}

change the image that shows when you are offline. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels

#bar #hiddenButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}

change the image that shows when you are hidden. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels

#bar #addButton, #bar #addButton a {background: transparent url(http://imagenamehere); text-indent: -5000px;}

change the "Add to Friendslist" button

#bar #msgButton, #bar #msgButton a {background: transparent url(http://imagenamehere); text-indent: -5000px;}

change the "PM" button

#bar #tradeButton, #bar #tradeButton a{background: transparent url(http://imagenamehere); text-indent: -5000px;}

change the "Trade" button

#bar #ignoreButton, #bar #ignoreButton a {background: transparent url(http://imagenamehere); text-indent: -5000px;}

change the "Add to Ignored" button

#bar #addButton a:hover {width: 33px; background: transparent url(http://imagenamehere) -22px -90px no-repeat; text-indent: -5000px;}

Change the "Add to Friendslist" button when you hover over it

#bar #msgButton a:hover {width: 29px; background: transparent url(http://imagenamehere) -22px -90px no-repeat; text-indent: -5000px;}

Change the "PM" button when you hover over it

#bar #tradeButton a:hover {width: 28px; background: transparent url(http://imagenamehere) -22px -90px no-repeat; text-indent: -5000px;}

Change the "Trade" button when you hover over it

#bar #ignoreButton a:hover {width: 34px; background: transparent url(http://imagenamehere) -22px -90px no-repeat; text-indent: -5000px;}

Change the "Add to Ignored" button when you hover over it

[ElindranythElindranyth]

v2 editable copy and paste

This code you can again copy and paste, but you've gotta make a few changes before it will work for you. Again, it doesn't really require that you understand the code to use it. Don't know what section you're trying to change? Check down a few posts for lists of common v2 IDs and Classes. Items that are red are things that have to be changed. Items that are blue are things that you can change if you want, or you can leave as the are.


#header, #columns{margin-left: auto; margin-right: auto; width: ##px; float:none;}

center the profile. This code, however, will only affect the header, and any blocks on the page. You have to set a width for this to work. 760px is a good width to use. Any text, pictures, avatars, or captions added in will not be moved by this code.

.media_panel embed{height:##px; width:##px;}

change the size of your multimedia section. Since most multimedias aren't square, I'd suggest picking either the height to width to start editing. White space will fill up the rest of the square that Gaia alots (they give you a ##x## square in v2 profiles), and then once you get either your height or width set, you can tweak the other one until all the white is gone. This also comes in really handy if you put your multimedia in the larger column, as it's designed to be the same size regardless of which column it's in.

.panel{background: #ffffff;}

set the background of every panel to white. Very similar to how .section works in Old School profiles. You can change this color to whatever color you want.

.panel h2{background: #ffffff; color: #000000;}

set the background of every panel header to white, and the text color in every header to black. Very similar to how .section h2 works in Old School profiles. You can change these colors to whatever colors you want.

html{background: #ffffff;}

set the background of the site to white. You can change this color to whatever color you want.

#columns{background: #ffffff;}

set the background behind the columns to white. Very similar to how #content works in Old School profiles. You can change this color to whatever color you want.

[ElindranythElindranyth]

General HTML Overrides

We'll start off with some basic tags that you can override. Stuff that you do to these tags would work on any webpage, or in either system. They refer to basic HTML elements, not to specifically designed IDs or Classes.

The tag that you can override is listed in bold, followed by a short description of what that tag does.

html, body

the entire body of the page

a:link

the links that haven't been visited

a:hover

the links that haven't been visited, but only when your mouse is over them

a:visited

the links that have been visited

h2

the text tag used for the subheaders

[ElindranythElindranyth]

old school common classes and IDs
This post contains a list of the most commonly adjusted IDs and tags with Old School Gaia Profiles. IDs, classes and tags are all different ways of defining styles with CSS. The IDs (items starting with a #) and classes (items starting with a .) are Gaia Profile specific, which means you can't just take your Gaia Profile code and copy it to a webpage and have it work perfectly. But you can take the knowledge that you learn from this post on and put it to work on regular webpages as well as Gaia Profiles.

I'll list the ID or class in bold, and follow it with a description of what it is.

#site

the entire site from the top navigation to the bottom links

#extendedProfileBody #header h1

the main header (the one that has the little house in it normally)

#content

the section below the header image but above the blue footer image

#content #sidebar

the column containing the profile, details, and wishlist blocks (usually about 230 pixels wide and on the left by default)

#content #main

the column containing the rest of the blocks (usually between 450 and 500 pixels wide and on the right by default)

#profile

the section where your avy and your items are

#profile h2

the part of the profile section where it says your name

#profile .caption

the quote next to your avy

#profile .avatar

your avy

#details

the section where it says your last login, how many posts you have, etc

#details #info

the left column of the details block, containing your location, occupation, etc

#details #stats

the right column of the details block, containing your join date, last login, etc

#details h2

the part of the details section where it says "details"

#wishlist

the section where your wishlist is displayed

#wishlist h2

the part of your wishlist section where it says "wishlist"

#about

the section where it displays whatever is in your about section

#about h2

the part of your about section where it says "about"

#friends

the part of your section where it shows your friends

#friends h2

the part of your friends section where it says "friends"

#friends #friendGroup li

the small block containing your friend's name and avatar

#friends #friendGroup img

your friend's avatar

#journal

the part of your profile where it puts your journal posts

#journal h2

the part of your journal section where it says "journal"

#multimedia

the part of your profile where it puts your multimedia (if you have any)

#multimedia h2

the part of your multimedia section where it says "multimedia"

#comments

the part of your profile that contains your comments

#comments h2

the part of your comments section where it says "comments"

#comments .caption

the block that contains the comments with the avatar on the left side

#comments .caption2

the block that contains the comments with the avatar on the right side

#comments .avatar

the avatar on the left side of the comments

#comments .avatar2

the avatar on the right side of the comments

#signature

the part of your profile where it displays your signature

#signature h2

the part of your signature section where it says "signature"

.section

every section listed above is also a section. If you are going to be applying the same style to every block, you can use this class instead of listing out every individual ID. For certain attributes, you will still have to define the style for the #profile ID as well.

.section h2

this one is quite similar to the previous one, except that it encompasses all the subheaders, the headers for each block. For certain attributes, you will still have to define the style for the #profile h2 ID as well.

.genmed

the text above quotes and above code blocks

.code

the formatting of any code block

.quote

the formatting of any quote block

[ElindranythElindranyth]

v2 common classes and IDs

Alright, so at first glance, v2 seems kinda tricky, as far as CSS overrides go.

And it can be. But that's because v2 was designed to be standalone. They put in CSS to allow further customization, but it doesn't rely on CSS like Old School did for customization.

v2 can be pretty powerful if you know how to use it.

Now there are two ways you can refer to a block. The first way I'll go over is to find the blocks unique panel ID.

Using this is really helpful if you want to make it harder for people to hijack your code, because it's one more thing they'll have to find in their own code, figure out what it does in your code, and then change. Most people who will put that kind of effort into code will do their own instead of ripping off someone else's.

In the source code of your profile, every block starts with a line similar to this:

<div id="panel_6106873" class="panel custom_panel">

In that example, the unique panel ID is panel_6106873. So to declare any styles for that block you'd use this ID: #panel_6106873

There are also a few other common IDs you can use, very similar to the ones you can ues for old school. The other ID listed in that example above is the custom_panel tag. This can be used as well, but when you use more than one of the same type of panel, the formatting extends to all the panels of that name. This can run you into trouble if you've got more than one multimedia and you want them to be different sizes, or in different places, and the same with custom sections. It doesn't really come up with most of the other content sections.

Now for the list to nearly mirror the one from above xd




#header a:link

the links in the header (My Gaia, Community, Games, etc)

#header a:hover

when you hover over the links in the header

#header a:visited

the links in the header that have been visited

#column_1

the left column. Base width is 230px

#column_2

the middle column. Base width is 500px

#column_3

the right column. Base width is 230px

.panel

Class who's attributes edit every block on the page. If you set a background color for this class, every block will have that background color

.panel h2

sets the style for all the headers. This is where you can change the background color of the headers and the font color of the headers and whatnot

#header

the main header. In default styles, this is blank to allow the page background to show through.

.details_panel

the section where your avy and info about your account are.

.details_panel h2

the header for the details section

.details_panel img

your avy

.forums_panel

lists how many posts you have, post per day average, and links your latest posts

.forums_panel h2

the header for the forums block

.wish_list_panel

the section where your wishlist is displayed

.wish_list_panel h2

the header for your wishlist section

.about_panel

the section where it displays whatever is in your about section

.about_panel h2

the header for your about section

.friends_panel

the part of your section where it shows your friends

.friends_panel h2

the header for the friends section

.journal_panel

the part of your profile where it puts your journal posts

.journal_panel h2

the header for the journal block

.media_panel

the part of your profile where it puts your multimedia. Remember, if you have multiple multimedia sections, anything you alter with this ID will alter ALL the multimedia sections at the same time

.media_panel h2

the header for your multimedia section. Remember, if you have multiple multimedia sections, anything you alter with this ID will alter ALL the multimedia sections at the same time

.comments_panel

the part of your profile that contains your comments

.comments_panel h2

the header for your comments section

.comments_panel dt, .comments_panel dd

the blocks that contain the comments themselves.

.signature_panel

the part of your profile where it displays your signature

.signature_panel h2

the header for the signature panel

.house_panel

the part of your profile where it displays your house

.house_panel h2

the header for the house panel

.equipped_list_panel

the part of your profile where it displays what your avy is wearing

.equipped_list_panel h2

the header for the equipped list panel

.interests_panel

the part of your profile where it displays your interests

.interests_panel h2

the header for the interests panel

.contact_panel

the part of your profile where it displays your links to what used to be known as the status bar

.contact_panel h2

the header for the contact panel

.guilds_panel

the part of your profile where it displays a link to your guilds

.guilds_panel h2

the header for the guids panel

.store_panel

the part of your profile where it displays the editable content for your store, and provides a link to it

.store_panel h2

the header for the store panel

[ElindranythElindranyth]

This is just a quick cheat sheet for people looking to make the transition from one profile system to the other.

Old School System == v2 System

body == html

#extendedProfileBody #header h1 == #header

.section == .panel

.section h2 == .panel h2

#content == #columns

#content #main == #column_2

#content #sidebar == #column_1

#multimedia embed == .media_panel embed

#profile .items == .equipped_list_panel

#wishlist == .wish_list_panel

#multimedia == .media_panel

#signature == .signature_panel

#profile == .details_panel

#friends == .friends_panel

#journal == .journal_panel

#about == .about_panel

#comments == .comments_panel

[ElindranythElindranyth]

how to actually use CSS to make profiles

Now that we've listed out what IDs you're probably gonna want to edit, we get into the real meat of things. This is where things start to get a bit tricky.

Now that you know what section ID does what, you need to redeclare and redefine what happens to the IDs you want to affect. Redeclaring and redfining looks just like regular declaring and defining.

We'll give an example of how to redeclare and redefine your about section, and then we'll break it down and explain what we did.

And just so you know, from here on out, my exmaples use Old School classes and IDs, but you can use these same basic principles on any classes and IDs, be it Old School, v2, or just regular old web design.

#about{background: transparent url(http://gaelicgirl.tripod.com/backgrounds/starclouds.jpg) top left no-repeat; border: 1px solid black; width: 300px; height: 200px; overflow:scroll; overflow-x: hidden; overflow-y: auto; position: absolute; top:100px; left: 200px;}

what we've done here is given the about section a background that is aligned to the top left of the About box. It won't repeat, no matter how big the box is or the image is. We then gave the box a 1 pixel solid black border. Next we made the box 300x200 pixels, and gave it a scrollbar. It will only show the vertical scrollbar, the horizontal one won't show up. We then made the box so it would be absolutely positioned. Then we told it we want it to be 100 pixels from the top and 200 pixels from the left.

The declaration is just where we put #about{}

The definition is everything that goes inside the curly brackets. You can define many styles at one time, like we did. This makes your code take up less space, and for some people it actually makes it more readable. Were I doing this code for a webpage instead of a gaia profile, however, I'd probably make it look more like this:

#about{background: transparent
whiteurl(http://gaelicgirl.tripod.com/backgrounds/starclouds.jpg) top left no-repeat;
whiteborder: 1px solid black;
whitewidth: 300px;
whiteheight: 200px;
whiteoverflow:scroll;
whiteoverflow-x: hidden;
whiteoverflow-y: auto;
whiteposition: absolute;
whitetop:100px;
whiteleft: 200px;}

For some reason, because of the editor I use, I find it somehow easier to read when its all on one line. It also might help keep people from stealing your code if it's not really easy for them to see what you're doing xd But for some people it's just easier to lay it out like this. It certainly can be helpful when you're just starting out because then it can be easier to find your errors if you have any.


Just like you can define multiple styles in one declaration, you can declare multiple IDs that all have the same style. I use this alot in my profiles because I end up having alot of things not displayed.

I'll use a piece of code from a previous profile as an example here.

#comments .avatar, #comments .avatar2, .caption:before, .caption:after, .caption2:before, .caption2:after, #journal h3, #commonFriends, #signature, #profile h2, #bar #addButton, #bar #msgButton, #bar #tradeButton, #bar #ignoreButton, #extendedProfileBody #header h1, #corp, #footer, #profile ul.items {display: none;}

Yeah it's a long one. I had alot of things that I didn't want to be displayed, so instead of making a few different lines for each thing, I put them all together, seperated by commas, since they all had the same style definition (display:none;) If you have multiple sections that will all have the same style definition, this is the best way to save on character space in your profile. And you can define more than one style if you want. I could have just as easily used my definition from above with the declaration here, it just wouldn't have made much sense to do so xd

[ElindranythElindranyth]

how to define styles

Next we get into the style defintions. We showed you above how to declare a style, now we'll break down what goes into each style defintion.

Just like how you declare an ID and then define the style, you declare a style and define it's attributes.

with an ID you use the following format

IDNAME{style1; style2; style3;}

with a style you use this format

STYLENAME: attribute1 attribute 2 attribute 3;

Notice that with the ID, the definitions are inside curly brackets and seperated with semi-colons. But in the styles, the defintions come between : and ; and are seperated only with spaces. This is important to note. None of your attribute's names should have spaces in them. Most are one word and those that aren't have dashes in them usually. Also this is why when you set something like a width, you do it as 100px instead of 100 px.

So now it's time to show you what you can do. I'll list some of the ones I find most useful. I won't by any means list them all. You can find an alphabetical listing of most styles and their attributes here: http://www.blooberry.com/indexdot/css/propindex/all.htm I use this site alot when I want to do something but can't exactly remember how to do it xd

background: (this sets the background of the block you are defining)

• transparent - makes it so there is no background image. whatever is below this block will show through in this block
  
• #000000 or black - sets the background to a solid color. You can use any of the defined names such as black, white, red, yellow, or you can use a hex code such as #000000 for black, #ffffff for white, etc.
  
• url(http://imagenamehere) - place an image as the background instead of a color, or in addition to a color. Replace http://imagenamehere with the actual location of the image you would like to use.
  
  use the following only if you use a background image
  
• top - aligns the image to the top of the block
  
• bottom - aligns the image to the bottom of the block
  
• left - aligns the image to the left side of the block
  
• right - aligns the image to the right side of the block
  
• no-repeat - makes the image only appear once in the block, no matter how big the block is
  
• repeat-y - makes the image repeat vertically (eg. the image will repeat on top of each other, but not side to side)
  
• repeat-x - makes the image repeat horizontally (eg. the image will repeat side to side but not up and down)

border: (defines a border for the entire block. I use this alot, especially when I put a scrollbar in a section. if you want to just have a left, top, bottom or right border, put border-left or border-top and so on)

• #px - replace # with the width of the border that you'd like. 1 is the most common, and anything above 3 tends to become obnoxious.
  
• solid - makes the border line solid
  
• dashed - makes the border a dashed line
  
• dotted - makes the border a dotted line
  
• #000000 or black - sets the color of the border. You can use any of the defined names such as black, white, red, yellow, or you can use a hex code such as #000000 for black, #ffffff for white, etc.

width: (sets the width of the block. especially useful if you want to use scrollbars)

##px - replace ## with the width in pixels of the block

height: (sets the height of the block. again useful if you want to use scrollbars)

##px - replace ## with the height in pixels of the block

position: (this is what you need if you want to move blocks out of their original space)

• relative - blocks are moved in relativity to the blocks that are declared before them (from top to bottom and left to right in their default positions on Gaia profiles)
  
• absolute - items are moved absolutely regardless of what the other blocks around them do

the following only affect stuff if you've declared a position (absolute or relative)
left: (moves the block over a designated number of pixels from the left)

##px - replace ## with however many pixels from the left you want the block to be

top: (moves the block down a designated number of pixels from the top)

##px - replace the ## with however many pixels from the top you want the block to be

margin-left: (moves the margin from the left)

##px - replace the ## with however many pixels from the left you want the block to be. A good alternative to absolute/relative positioning, especially for the about section if you make an extra section inside the about section that you want to move OUT of the about section

margin-top: (moves the margin from the top)

##px - replace the ## with however many pixels from the top you want the block to be. A good alternative to absolute/relative positioning, especially for the about section if you make an extra section inside the about section that you want to move OUT of the about section

[ElindranythElindranyth]

Some things to keep in mind.

When using old school profiles:

• can't think of anything just yet ninja

When using v2 profiles:

• If there isn't enough room for all three columns to fit on the page or in the column width, it'll drop the "offending" columns down below the others. This is mostly noticed on "default" v2 profiles in resolutions with a width of 1024 or less. In those resolutions, the third column drops below the first two columns. This can be annoying, but it can also be handy in some situations.

In general:

• The majority of Gaians use a resolution that is at least 1024px wide, and the number of Firefox users is growing. Think of cross-compatibility when you make your profiles. A good design is one that can be viewed on any resolution and any browser just the way the designer intended it to be seen.
  
• Very few people actually care enough to want your multimedia blaring at them when they first enter your page. Some may leave immediately, others may just get irritated and look for the stop button. Many will leave if there is no stop button.
  
• Just because you can put a thousand animated images on your page doesn't mean it will look good.

[ElindranythElindranyth]

Spiffy Tricks

Alright, these are some spiffy things that people will want to be able to do. These are all considered "advanced" and I'll be hesitant to give help on these unless you can prove to me that you really do understand CSS to the point where I can give you just a few hints and suddenly all will make sense.

Create a new section using Old School

Basically, there are two steps.

The first step is to create an ordered list in your about section. You use the bbcode tag list=1 or list=a to do this (put it in brackets for it to be bbcode, and end with a tag)

Then you edit the about sections ordered list with this code.

]content for new block here

creates an ordered list that contains the content you want in the new section

this goes in your code:
#about ol{format here}

formats the ordered list you added to your about section

Supposedly you can nest the elements to create multiple boxes like so

]content here
]more content here
]even more content here

this goes in your code:
#about ol{format "content here"}
#about ol ol{format "more content here"}
#about ol ol ol{format "even more content here"}

I've never actually tried multiple sections this way, so I may have the order wrong. Trial and error will show that, and someone can tell me if I'm right or wrong? XD

P 1 has confirmed that I have the order right xd

NOTE: if you move your about section using absolute or relative positioning, you will not be able to move anything out of it. Use margins to move your about section if you plan on having new sections.

Replace the question mark image in v2

.style2 a.user_info img, .style1 a.user_info img{width: 0; height: 0; padding: 0 15px 17px 0; background: url(URLOFNEWBUTTONHERE) bottom no-repeat;}
.style2 a.user_info:hover img, .style1 a.user_info:hover img{width: 0; height: 0; padding: 0 15px 17px 0; background: url(URLOFHOVERBUTTONHERE bottom no-repeat;}

In both, the first number represents the width, and the second represents the height.

Create easily moveable custom image links in v2

Ok, now this is for those people who want a status bar like in old school. Basically, you create a new custom block with a text link to whatever it is you want linked, and then you use the following code.

#UNIQUEPANELID h2{display:none;}

#UNIQUEPANELID{margin-top: ##px; margin-left: ##px;} /*these numbers position the button*/
#UNIQUEPANELID a{display: block; width: ##px; height: ##px; line-height: 500px; overflow: hidden; background: url(URLOFBASEIMAGEHERE);} /*the numbers here should be the same has the height and width of the image*/
#UNIQUEPANELID a:hover{background: url(URLOFHOVERIMAGEHERE);}

Then you just put the url in your panel. I recommend putting it in like this: [url=LINKURLHERE]. because otherwise IE sometimes has a fit with widths and such.

[ElindranythElindranyth]

Link In and Links Out