Welcome to Gaia! ::

Did you find this helpful?

Yes 0.44516798248142 44.5% [ 7725 ]
No 0.041837146314758 4.2% [ 726 ]
Sort of... 0.14942661211318 14.9% [ 2593 ]
I'm so confuuuuused T_T 0.36356825909065 36.4% [ 6309 ]
Total Votes:[ 17353 ]
1 2 3 4 5 6 ... 476 477 478 > >> >>> »|
Kira Catgirl's avatar

Dapper Genius

To find something quickly, use ctrl+f and search for the section you need codes for

This is only for the OLD Profile Style.
Warning: This thread is very reading-intensive.

User Image - Blocked by "Display Image" Settings. Click to show.
Congratulations!
This thread has won an award, and is now Profile Whore Approved.
Your thread will now be added to the P.W. Thread awards spot!
Rewarded for: Helpfull and friendly CSS information.


Table of Contents

1.) You Are Here
- - - - ToC
- - - - Updates
- - - - News
- - - - ToDo List
2.) General Useful Information for Custom Profiles
- - - - Block Sizes
- - - - How to use Color Codes
- - - - Commonly used CSS properties (a must-read!)
3.) Pieces of Code
4.) Alignment and Positioning
5.) Links


Updated September 17, 2006.

-Updated and cleaned up the General Info section, added some new examples.
-Rearranged, simplified, and added some explanations to the Codes section.


News

Hello, everyone! I've finally gotten back to my lovely thread here that seems to have taken on a life of its own. xd ; I'm going to try to do some reorganizing and updating and such of this... my apologies if I disappear again mid-update.


Things To Do

--Redo the alignment and positioning post entirely
Kira Catgirl's avatar

Dapper Genius

General Info

Everything that follows is about what you put in the box labelled "Theme Override" in the "Theme" section of your "Edit Profile" page.

First, to make this easier for everyone involved, here's a basic profile layout with the main sections colour-coded.

User Image
Header
Content
Main*
Sidebar*

*These two names are not official - I am calling that for ease of reference.

Sizing

NOTE: ALL sections vary in height from profile to profile. They have no set heights. In addition, you can change these values yourself.

Sidebar: Width: 230px
Main: Width: 500px
Header: Width: 760px Height: 150px
Avatar: Width: 120px Height: 150px
Friends Avatar Images: Width: 110px Height: 130px
Wishlist/Wearing Item Images: Width: 30px Height: 30px

If you want to be assured of some spacing between your sections, I'd recommend using a somewhat smaller size for the widths - i.e. 226px or 228px instead of the full 230px for the sidebar blocks.


Color Codes

There are two different ways of using colours. The first is the easy way - just put in the name of the colour. Click here for a list of named colours that you can use. This is also a good site - it has a much broader selection. Link courtesy of Arcnos

The second way gives you even more freedom of choice - you can enter a colour according to its RGB values in hexadecimal (called hex for short). RGB stands for "red green blue", and is a colour system. The hex values are 6 digits - the first two are for red, the second two are for blue, and the third two are for green. There is a very good website for getting hex values of colours from a colour wheel here. Link courtesy of kNOw_FUTURE

So the larger the number for a colour, the more of that colour there is needed to make the final colour. #000000 has 0 of all three, and is black. #ffffff has ff of all three, which is the maximum, and so is white.

Yes, ff is a number. The hexadecimal system has 16 possible digits, as opposed to just 10. They are:
0 1 2 3 4 5 6 7 8 9 a b c d e f

The three main colours, when combined with each other in pairs, make colours as follows:
red + green = yellow
red + blue = magenta
green + blue = cyan

So you can make colours by using different amounts of each of the 3 colours to combine. Feel free to experiment.

If you happen to have an image editing program like Photoshop, Paint Shop Pro, or the GIMP, you can pick the colour in the colour selection screen, and it'll have a text box with the html hex code right there for you to use!

Just make sure it has a # in front of it, you ALWAYS need that.


Commonly Used CSS codes

Using one of these codes in a section? Here you can see possible parameters for those codes, as well as the different ways to align text. Remember to ALWAYS put ; after EVERY LINE OF CODE.

  • border
    There are 3 different parameters for this one: the width, the style, and the colour.
    The width is simplest in pixels, meaning a number followed by px - for example, 2px
    The colour is in hex or HTML name, which you can find above.
    The possible styles are:
    solid, double, groove, dotted, dashed, inset, outset, ridge, hidden.
    You can also modify only one of the four border sides by replacing border with border-left, border-right, border-top, or border-bottom.
    Examples:
    border: 2px groove #ff0000;
    border: 1px solid blue;
    border-top: 2px dotted;
  • background
    Most commonly you'll just be using the colour, url and alignment parameters for this.
    You can specify a background colour by just adding in the RGB hexadecimal or HTML name of the colour.
    The format for the url, which is how you add images, is url(image URL goes here)
    The possible alignments are any combination of the following:
    top OR bottom
    left OR right
    center
    fixed - This prevents your image from scrolling with the page.
    no-repeat OR repeat-x OR repeat-y - The first prevents your image from tiling. The second tiles your image horizontally. The third tiles your image vertically. Using none of these causes both vertical AND horizontal tiling of your image.
    Examples:
    background: #000 url(http://someurl.com/someimage.jpg) fixed top center no-repeat;
    background: green url(http://another-url.com/image.jpg) top left repeat-y;
    background: #ff80e5;
  • text-indent
    This indents the text a certain distance in pixels.
    Example:
    text-indent: 50px;
  • text-align
    This works like the [ align ] tag on the Gaia forums.
    Examples:
    text-align: right;
    text-align: center;
  • text-decoration
    This changes the appearance of the text - most commonly used in the links codes.
    Possible parameters are:
    none, overline, underline, line-through.
    You CAN use more than one.
    Examples:
    text-decoration: overline underline;
    text-decoration: line-through;
  • color
    This assigns the colour of the text. Use either the HTML name or hexadecimal number of your colour.
    Examples:
    color: #fff;
    color: #f055f0;
    color: magenta;
  • font-size
    Sets the size of the font in the section. I usually use pt (normal font sizing system) but you can use px (height in pixels) as well.
    Examples:
    font-size: 10pt;
    font-size: 25px;
  • cursor
    Causes a non-standard or custom cursor to be viewed instead of the viewer's default.
    The non-default cursors that are already available are:
    crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help
    Experiment to see what they look like!
    If you want to use a custom cursor you downloaded or made, use url(http://someurl)
    You can upload your custom cursors here to use them! Found by Snow Bird
    Examples:
    cursor: text;
    cursor: n-resize;
    cursor: url(http://someurl.com/cursorfile);
  • opacity
    This is used to make sections see-through. In general, you'll probably use it to make an item disappear - for example, your avatar. To do so, just set it at 0.
    Example: opacity: 0;
    NOTE: I have discovered that this doesn't work in Internet Explorer. If you want to make it IE-compatible, you have to use this as well:
    filter: alpha(opacity=0);
    I assume you can use numbers besides 0 for both pieces of code.
    Please, if you are altering opacity, use BOTH codes. Cross-browser compatability is GOOD.
  • display
    You'll be using this to make a section disappear entirely, by putting none after it.
    Example: display: none;
Kira Catgirl's avatar

Dapper Genius

Codes

Remember, to find the right code more quickly, use ctrl+f and search for the section you want codes for! Also, wherever you see #000 or #fff - those are colours, so you can put whatever colour you want there.

Background

#content { background: #000 url(image URL goes here) fixed no-repeat; border: none; color: #fff; }
This changes the background for the Content block, and the Content block ONLY. Refer to the image in post #2 if you do not know what the Content block is.

body { background: #000 url( image URL goes here ) fixed left center no-repeat; color: #fff; }
This changes the background for the ENTIRE page, as well as the font colour.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of fixed left center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.

#profile, #details, #wishlist, #about, #journal, #friends, #comments, #signature { background: none; }
This makes the about, details, wishlist, profile, etc. boxes have transparent backgrounds.
If you do not want any particular one of those sections to have a transparent background, remove it from the code. If you later want to have it be transparent again, add it back to the code.


Borders

.section { border: 2px dotted #000; }
This puts a border around every one of the sections.

#content { border-left: 2px dotted #000; border-right: 2px dotted #000; border-bottom: 2px dotted #000; }
#extendedProfileBody #header { border-right: 2px dotted #000; border-left: 2px dotted #000; border-top: 2px dotted #000; }
This puts a border around the Content block. Refer to the image in post #2 if you do not know what the Content block is.

#site { borderpx solid #000; background: #FFF; }
This puts a border around the ENTIRE page. Note: It's been pointed out that if you don't specify the background colour, it will look strange near the bottom of the page around the footer area.


Headers and Links

#extendedProfileBody #header h1 { background: #000 url( image URL goes here ) top center no-repeat; border: 0px; }
This lets you change the main header image.
If you don't want to have a background image, just replace url( image URL goes here) with url( )
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.

.section h2 { text-align: left; text-indent: 5px; color: #000; height: 30px; }
This sets properties for ALL of the block headers.
This means that if there is something that you want every one of your block headers to have (such as the same font colour), you can declare them all at once in here and not have to put it in the individual block header.
For the code to change the header for a specific block, please see the code section for that block further down this post.

#site a:link { color: #888; font-size: 10pt; text-decoration: none; }
#site a:visited { color: #ff0000; font-size: 10pt; text-decoration: none; }
#site a:active { color: #00ff00; font-size: 10pt; text-decoration: none; }
#site a:hover { color: #0000ff; font-size: 10pt; text-decoration: underline; }
This changes the link properties for all the links on the entire page.
If you replace #site with a different section (like #about) it will change the properties for the links in ONLY that section.
a:link is the style the link will have by default. a:visited is the style the link will have if the viewer has been to the page it links too. a:active is the style the link has if it was just clicked on. a:hover is the style the link has when the mouse is over it, but has not clicked.


Profile

#profile { background: #000 url( image URL goes here ) left center no-repeat; }
#profile h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the profile section. The background image under #profile (the first line) when used at the proper size and with that alignment, can be used as a fake avatar image if you make your avatar invisible. (See below)
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of left center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.

#profile #bar { background: none; }
#profile #bar #onlineButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #offlineButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #hiddenButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #addButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #msgButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #tradeButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #ignoreButton { background: url( image URL goes here ) no-repeat; }
#profile #bar #addButton a { background: url( image URL goes here ) no-repeat; }
#profile #bar #msgButton a { background: url( image URL goes here ) no-repeat; }
#profile #bar #tradeButton a { background: url( image URL goes here ) no-repeat; }
#profile #bar #ignoreButton a { background: url( image URL goes here ) no-repeat; }
This changes the images for the status bar.

#profile .avatar { opacity: 0; filter: alpha(opacity=0) height: 150px; }
This causes your avatar to disappear.

#profile .caption { background: #000 url( image URL goes here ) border: 2px solid #555; color:#fff; }
#profile .caption:before { content: url( image URL goes here ) background: url( image URL goes here ) top right no-repeat; }
#profile .caption:after { content: url( image URL goes here ) background: url( image URL goes here ) bottom right no-repeat; }
#profile .caption .message { background: url( image URL goes here ) top left no-repeat; }
This allows you to modify your quote bubble. The background URL for .caption:before and .caption:after modify the rounded corners, and don't show up on IE. .caption .message modifies the pointy part of the speech bubble that points to the speaker. If you don't want to have special corners at all, just remove url( image URL goes here) from the code.

#profile ul.items { display: none; }
This causes the list of items that you're wearing to disappear.

#profile ul.items li img { background: #000 url( image URL goes here) top center no-repeat; }
#profile ul.items li { border: 1px solid #fff; }
This lets you put an image behind and a border around each of the items that you're currently wearing.
If you want to have a border but not a background image, just remove the first line.
If you want to have a background image but not a border, remove the second line.


Details

#details { background: #000 url( image URL goes here ) top center no-repeat; }
#details h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the details section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.

#details #commonFriends { display: none; }
This makes that 'Shared Friends' bit go away.

#details #commonFriends li img { background: #000 url( image URL goes here ) top center no-repeat; }
#details #commonFriends li { border: 1px solid #fff; }
This allows you to change the border and the image behind each of the shared friends that show up.
If you want to have a border but not a background image, just remove the first line.
If you want to have a background image but not a border, remove the second line.


Wishlist

#wishlist { background: #000 url( image URL goes here ) top center no-repeat; }
#wishlist h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the wishlist section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.

#wishlist ul.items li img { background: #000 url( image URL goes here) top center no-repeat; }
#wishlist ul.items li { border: 1px solid #fff; }
This lets you put an image behind and a border around each of the items in your wishlist.
If you want to have a border but not a background image, just remove the first line.
If you want to have a background image but not a border, remove the second line.


About

#about { background: #000 url( image URL goes here ) top center no-repeat; }
#about h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the about section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.


Friends

#friends { background: #000 url( image URL goes here ) top center no-repeat; }
#friends h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the friends section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.

#friends #friendGroup li { border-right: 0px; }
This removes that annoying line between your friends' images.

#friends #friendGroup li img { background: #000 url( image URL goes here ) bottom center no-repeat; } #friends #friendGroup li { border: 1px solid #fff; }
This lets you put an image behind and a border around each of the people on your friend's list.
If you want to have a border but not a background image, just remove the first line.
If you want to have a background image but not a border, remove the second line.


Journal

#journal { background: #000 url( image URL goes here ) top center no-repeat; }
#journal h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the journal section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.


Comments

#comments { background: #000 url( image URL goes here ) top center no-repeat; }
#comments h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the comments section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.

#comments dl dt.avatar img { background: url( image URL goes here ) left top no-repeat; }
#comments dl dt.avatar2 img { background: url( image URL goes here ) right top no-repeat; }
This puts an image behind your commentors.
The first line is for those on the left side, and the second line is for those on the right.

.caption { background: #000 url( image URL goes here ) border: 2px solid #555; color: #fff; }
.caption2 { background: #000 url( image URL goes here ) border: 2px solid #888; color: #fff; }
This changes the background of the commentors speech bubbles, and the border colours.
The first line is for the commentors on the left side, and the second line is for those on the right.
If you don't want to have a background image, just remove url( image URL goes here) from the code.

.caption:before { content: url( image URL goes here ) background: url( image URL goes here ) top right no-repeat; }
.caption:after { content: url( image URL goes here ) background: url( image URL goes here ) bottom right no-repeat; }

.caption2:before { content: url( image URL goes here ) background: url( image URL goes here ) top right no-repeat; }
.caption2:after { content: url( image URL goes here ) background: url( image URL goes here ) bottom right no-repeat; }
This changes the corner images of the speech bubbles.
Read this whole explanation.
The content url changes the left-hand corners. The background url changes the right-hand corners. The :before lines change the top corners. The :after lines change the bottom corners. The first two lines are for the commentors on the left, and the second two lines are for the commentors on the right.
This means that the content url in .caption:before would be the upper left corner. If you do not understand, try reading this explanation a few more times.
If you use Internet Explorer: As far as I know, this does not work at all in IE. If you are changing the colours of your comment bubbles and do not want to make corner images, replace url( image URL goes here ) with url( ) in all four locations in this code.

.caption .message { background: url( image URL goes here ) top left no-repeat; }
.caption2 .message { background: url( image URL goes here ) top left no-repeat; }
This allows you to replace the part of the speech bubble that points to the avatar who posted. The first line is for those on the left side, and the second line is for those on the right.
If you are changing the colours of your comment bubbles and do not want to make corner images, replace url( image URL goes here ) with url( ) in both locations in this code.

Signature

#signature { background: #000 url( image URL goes here ) top center no-repeat; }
#signature h2 { background: #000 url( image URL goes here ) top left no-repeat; }
This is the basic code for the signature section.
If you don't want to have a background image, just remove url( image URL goes here) from the code.
To change the alignment, replace any part of top center no-repeat with the type of alignment you want. Please see post #2 under background for other alignments.
If you want to specify text properties for the header specifically for the profile block, copy the code from the Headers and Links section above in this post that is inside the { } and paste before the last } in this code.


Cursor

See post #2 for the list of non-custom cursors available for use.

body { cursor: url( place cursor URL here ) }
This adds a custom cursor to the whole page. You can replace body with another section (for example, #about) if you want just that section to use a different cursor.

#site a:link, #site a:hover, #site a:active, #site a:visited { cursor: url( place cursor URL here ), default; }
This adds a cursor for all of the links on the page. You can replace #site with another section (for example, #about) if you want just that section's links to use the different cursor.


Obsolete Codes

These codes are no longer useful, due to the layout changes that Gaia has made to the profile pages.

#gaiaLogo { border: 0px; color: #fff; font-size: 11px; }
This removes the border around the bar with the logout/login button, and allows you to change the font colour/size of the Welcome Soandso message.

#footer { display: none; }
This removes the blue bar with the Gaia Copyright label.

#footer { background: #000 url( image URL goes here ) right no-repeat;color: #fff; }
This (theoretically) changes the image and the font colour for the Copyright bar at the bottom.

#corp { color: #fff; font-size: 10pt; text-decoration: none; }
This changes the line of Gaia links on the bottom of the page.
Kira Catgirl's avatar

Dapper Genius

Changing the Page Alignment

We now have a way to center profiles simply on all browsers! (Thanks to Roman Holiday)
#site { margin-left: auto; margin-right: auto; width: 760px; }

It appears to work on all resolutions as well, and has been tested with IE and Firefox. biggrin I believe changing either margin-left or margin-right to a pixel value will shift it to a different position, and you can do it by percentage to keep the page aligned properly over different resolutions.

However, you can still reposition the blocks individually if you desire.
position: relative;
left: 250px;
width: 500px;

So what you have to do is for every block, you figure out how many pixels from the left edge of the pageit would be, and how many from the top it would be. As I'm sure you realize, this doesn't lend itself well to differing screen resolutions - so be sure to indicate on your profile what resolution it's intended for. You also have to indicate that if you use a pixel length instead of auto to move it to, for example, the right edge of the page.

There's a bonus to this method, though - you can reorganize your sections however you want! For example, on my profile page, I moved my signature section up so that it's under my about section - as opposed to the bottom of the page.

This is how an actual section code would look:
#wishlist {
background: url(someURL) top center no-repeat;
position: relative; left: 0px; top: 550px; width: 230px;
}

Notice how I added the width parameter there too - that was to get my background images to line up properly when I used the left or right alignment as I was getting some overlap. It also makes sizing images much easier if you can define the widths yourself. xp

You do NOT need to manually position the header parts of the code (i.e. #wishlist h2) or any of the other interior bits inside of those blocks, like the squares for your friends.

Moving the Viewer's Avatar

You can ALSO use the position to move the avatar in the header! Here's what I've got on my profile:
#header #avatar { position: absolute; left: 645px; top: -5px; }
#header #wordBubble { position: absolute; left: 775px; top: -5px; }

That moved the avatar and the position for the little PM/event/trade bubble in the header over to the opposite side of the page. Which is a very nifty trick.
Kira Catgirl's avatar

Dapper Genius

Links

Link to me!
User Image
[url=http://snipurl.com/k9uq] [img]http://tinyurl.com/dzoew/mcplink.png[/img][/url]



User Image - Blocked by "Display Image" Settings. Click to show.
User Image - Blocked by "Display Image" Settings. Click to show.
User Image
Extended Profile Resource List
Kira Catgirl's avatar

Dapper Genius

Wow, this took me almost 2 and a half hours to type up. eek
Thanks so much! whee I'm gonna get started on custimizing mine now, using your thread. biggrin
Okay I can read that but I dont uderstand how you change the background of the beta profile to a picture you want it to be?Like my friend has a picture of kakshie sinsay in the back ground and it looks tight!!
Kira Catgirl's avatar

Dapper Genius

Demons Baby Fox
Okay I can read that but I dont uderstand how you change the background of the beta profile to a picture you want it to be?Like my friend has a picture of kakshie sinsay in the back ground and it looks tight!!
Up near the top of the third post, there's some code under Backgrounds that says it's for the whole page. Just replace the part that says "image URL goes here" with the URL of the picture you want as the background, and put it in the theme section of your profile. 3nodding
...content or body?
Kira Catgirl's avatar

Dapper Genius

Demons Baby Fox
...content or body?
Body. Content isn't the entire page. surprised
How do you change the theme, and what do you need?
I'm confused how do you make the pretty background and everything?
Kira Catgirl's avatar

Dapper Genius

-R.a.z.z.a.b.3.r.r.y-
How do you change the theme, and what do you need?
... um... You make images, go to 'Edit Profile', click 'Themes', and then read the first few posts here to get the codes and info that you put into the box labelled 'Theme Override'. >.>
How do you put an image behind my avatar/items Im wearing?

Quick Reply

Submit
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games