Where to put the CSS Coding for your Profile:
Go to your profile, go to the extended profile set up page, click on "theme."
This is where you enter the code. You can put the code over any of the four themes:: Classic, Blocks, Grunny, and Custom. Please note that mine is overlayed over "blocks."
Therefore image size and a few other minute details may vary with which one you are using.
For example, I have noticed when you do "custom", it moves the tables together so there is not space between them.
Some Basic Coding:
When putting in images, you can use repeat, no-repeat, fixed right and fixed left.
Repeat will of course tile the image. No-repeat will not tile the image.
If you are not repeating and your image does not fill the page you will want to say whether it is "fixed left" or "fixed right." Most people fix their images left, which means it starts at the top left corner and goes out from there.
When doing table borders you can use the following to determine their look:
dashed, thin dashed, thick dashed, thin dotted, dotted, thick dotted, thin solid, solid, thick solid" (There may be a few more that I do not know about yet.)
When changing font colors you will use "hex codes". These are a string of six digits (numbers and letters) which correspond to a certain color. A few good places to find the hex code for a certain color is: Click here for a simple list of colors that you can use or click here for a more extensive list of colors that you can use.
The hex code is pre-fixed by a "#" sign, unless you are making it transparent. In which case you simply fill in the space where the code would normally be with "transparent" no "#" sign needed.
Text-decoration: Used primarily with links though I believe it can be used in text as well. There are a few different types:
"none, underlined, strikethrough" (strikethrough might be "strikeout" I'm not entirely certain.)
You will see these in the codes, note that whenever you see one of these basic codes you can replace it with one of the others in the same group.
Putting a Background on your Profile:
A.) This will put a background image or color up to the right border. (Before the gray space.)
#content
{
background: #ffffff;
}
{
background: #ffffff;
}
Changes the Background color.
#content
{
background: #000000; url(http://your image url here) no-repeat fixed left;
}
{
background: #000000; url(http://your image url here) no-repeat fixed left;
}
Adds a background image.
B.) This will place a background over the entire page. Note that you must have the code to remove the content background for the image to show through completely.
body
{
background: #000000
}
{
background: #000000
}
Changes background color for the entire page, including the little gray space to the right.
body
{
background: #000000 url(http://your image url here) no-repeat fixed left;
}
{
background: #000000 url(http://your image url here) no-repeat fixed left;
}
Adds background image to the entire page, including the little gray space to the right.
#content
{
background: none;
}
{
background: none;
}
Removes the background in front of the background (This is primarily used if you are putting a background on the entire page.)
Changing the Main Header:
#extendedProfileBody #header h1
{
background: url(http://your image url here)
}
{
background: url(http://your image url here)
}
Changes the Main Top Header where it shows the avatar of the person viewing your profile.
Changing Font Color and Type:
There are different sections on where you can change the font, here is a few.
.section h2
{
color: #0044cc;
}
{
color: #0044cc;
}
Changes the Font color in All of the headers.
#profile h2
{
color: transparent;
}
{
color: transparent;
}
Changes the font to transparent in a specific header or you can replace transparent with "#000000" to change the font color. Change the word "profile" in the coding to any of the header names that you wish to edit. (Example: #wishlist h2, #about h2, #journal h2, etc.)
#profile
{
color: #000000;
}
{
color: #000000;
}
Changes the font color for a specific box, in this case, the profile box where your avatar and items are shown. You can replace "profile" with any of the box names that you wish. (Example: #wishlist, #details, etc.)
body
{
font-family: arial;
font-size: 12pt;
color: #000099
}
{
font-family: arial;
font-size: 12pt;
color: #000099
}
Changes font type, color, and size for the whole page, just change the font type, size and color to what you want.
#profile h2
{ font-type: helveltica; }
{ font-type: helveltica; }
Changes the Font type of a certain header, in this case, the "profile" header, you may change the name of the header you wish to edit to anything that you wish. (Example: #details, #multimedia, #signature, #about, etc.)
Erasing your avatar:
There are different codes for this, some of these won't be viewable with certain servers, and some have their own sort of glitch, so please test each one out to see which is best for you.
#profile
{
background: #000 url() no-repeat left center;
}
#profile .avatar
{
opacity:0;
}
{
background: #000 url() no-repeat left center;
}
#profile .avatar
{
opacity:0;
}
Deletes your avatar image from your profile.
#profile
{
background: #000 url('your image url here') no-repeat left center;
}
#profile .avatar
{
filter:alpha(opacity=0)
opacity:0;
}
{
background: #000 url('your image url here') no-repeat left center;
}
#profile .avatar
{
filter:alpha(opacity=0)
opacity:0;
}
Deletes your avatar and replaces it. However, you must note that the new image is actually your profile background picture, just centered.
Replacing your Avatar Image with a picture:
#profile h2
{
background: url('your new avi image') no-repeat left bottom; height: 190px;}
#profile img.avatar{width:0px; height:0px;}
#profile #bar
{
margin-top: 10px;
}
#profile .caption
{
top: 50px;
}
{
background: url('your new avi image') no-repeat left bottom; height: 190px;}
#profile img.avatar{width:0px; height:0px;}
#profile #bar
{
margin-top: 10px;
}
#profile .caption
{
top: 50px;
}
Replaces your avatar picture. However, this will move the Online Status bar below the avatar picture and you can't have a image for your profile header. Which means no code that says "#profile h2" besides this one, otherwise it won't work.
Putting a image in your quote or comment box:
#profile .caption
{
width: 100px;
height: 67px;
background:
url('http://your image url here')
#FFFFFF
center no-repeat;
}
{
width: 100px;
height: 67px;
background:
url('http://your image url here')
#FFFFFF
center no-repeat;
}
Puts a picture in the caption. (Or background if you remove the "center no-repeat" wink Please note that if your image is taller than the height of the normal quote bubble you will need to change the height specification.
#profile .caption
{ color: #FFFFFF; }
{ color: #FFFFFF; }
Changes caption font color to white (this is done because you can't just erase your caption text and then put a picture, it won't show. This enables you to put a picture without any text showing through) Or you can replace the "ffffff" with a different hex code to change the font color.
#profile .caption
{ background: #FFFFFF; }
{ background: #FFFFFF; }
Changes the background of the profile quote box.
#comments .caption
{ background: #FFFFFF; }
{ background: #FFFFFF; }
Changes the background color of the comment box on left side.
#comments .caption2
{ background: #FFFFFF; }
{ background: #FFFFFF; }
Changes the background color of the comment box on the right side.
#comments .caption
{ background: #FFFFFF; url('your img url here') no-repeat;}
#comments .caption2
{ background: #FFFFFF; url('your img url here') no-repeat;}
{ background: #FFFFFF; url('your img url here') no-repeat;}
#comments .caption2
{ background: #FFFFFF; url('your img url here') no-repeat;}
Changes background image on both sides of the comment boxes. You can have different images for each if you feel creative.
Changing the Header images of the profile, about, wishlist, etc. boxes:
#profile h2
{
background: url(http://your image url here) top left no-repeat;
text-indent: 150px;
}
{
background: url(http://your image url here) top left no-repeat;
text-indent: 150px;
}
Changes the header image. Likewise you can do the same for: details, wishlist, about, friends, journal, comments, signature. Just replace the "profile" with the section you wish to place the picture in.
If you wish to simply change the color erase the url part and replace it with the hex color you wish to use such as: #000000.
.section #profile,#details,#journal,#friends,#comments,#multimedia,#wishlist,#signature,#about h2
{
background: url(your image url here) top left no-repeat;
}
{
background: url(your image url here) top left no-repeat;
}
Changes the header image for all of the sections.
Changing the background of the profile, about, wishlist, etc boxes:
#profile
{
background: #000
url(http://your image url here)
}
{
background: #000
url(http://your image url here)
}
Changes the background picture in the profile section. Likewise you can do the same for: details, wishlist, about, friends, journal, comments, signature. Just replace the "profile" with the section you wish to place the picture in.
If you wish to simply change the color erase the "url" part and put the color hex code that you wish as your background, such as: #000000.
Adding a picture behind your commentors:
#comments dl dt.avatar img
{
background: url(http://your image url here)
}
#comments dl dt.avatar2 img
{
background: url(http://your image url here)
}
{
background: url(http://your image url here)
}
#comments dl dt.avatar2 img
{
background: url(http://your image url here)
}
Places a image behind your commentors. The first one, the one without the "2" included is for the left side and the second one, the one with the "2" is for the right side. You may place different images behind the left commentors and the right commentors if you feel inclined to be creative.
Erasing the white space between your friends:
#friends #friendGroup li{border-right:0px;}
Erases the white padding inbetween your friends on your friendslist.
Changing the border color of your tables:
#profile
{border-color: #FD525B;}
{border-color: #FD525B;}
Changes the border color. Same for: same for: details, wishlist, about, friends, journal, comments, signature.
Placing a image behind each of your friends:
#friends #friendGroup li img
{
background: url(http://your image url here) no-repeat top left;
}
{
background: url(http://your image url here) no-repeat top left;
}
Puts a image behind the friends on your friendslist.
Changing the link colors/types:
Link � Is what someone will see when they haven't touched any of the links.
Visited � Is the color that will show after they've been to that link
Active � Is the color of the link while the page is changing/loading.
Hover � Is the color of the link when the mouse is over it.
a:link { color:#0044cc; font-weight: bold; text-decoration: none}
a:visited { color: #0044cc; font-weight: bold; text-decoration: none}
a:active { color: #F9121E; font-weight: bold; text-decoration: none }
a:hover { color: #F9121E; font-weight: bold; text-decoration: underline}
a:visited { color: #0044cc; font-weight: bold; text-decoration: none}
a:active { color: #F9121E; font-weight: bold; text-decoration: none }
a:hover { color: #F9121E; font-weight: bold; text-decoration: underline}
Changes the link color, weight, and text-decoration of the whole page.
#profile
{
a:link (color:#0044cc; font-weight: bold; text-decoration: none)
a:visited (color: #0044cc; font-weight: bold; text-decoration: none)
a:active (color: #F9121E; font-weight: bold; text-decoration: none)
a:hover (color: #F9121E; font-weight: bold; text-decoration: underline):
}
{
a:link (color:#0044cc; font-weight: bold; text-decoration: none)
a:visited (color: #0044cc; font-weight: bold; text-decoration: none)
a:active (color: #F9121E; font-weight: bold; text-decoration: none)
a:hover (color: #F9121E; font-weight: bold; text-decoration: underline):
}
Changes the link color, weight, and text-decoration of a certain section. Same goes for wishlist, multimedia, signature, details, wishlist, about, comments, friends, etc. Just replace "#profile" with the name of one of the other sections.
Changing the Border Style:
#signature
{border: thin dotted #FD525B;}
{border: thin dotted #FD525B;}
Changes the border style and makes it dotted, you may change it to any of the border styles listed in the basic coding section at the top of the page. (Example: dashed, thick dotted, etc.) Same goes for wishlist, multimedia, profile, details, wishlist, about, comments, friends, etc. Just replace "#signature" with the name of one of the other sections.
Replacing your cursor image:
#extendedProfileBody{cursor:url(http://your.website.here/file.cur)}
Replaces the cursor with your own cursor image. (I have not tested this out, it may or may not work.)
body
{
cursor: url('CurserURL')
}
{
cursor: url('CurserURL')
}
This is supposed to be able to change your cursor image too.
BODY {cursor: crosshair;}
A {cursor: crosshair;}
A:hover {cursor: crosshair;}
A {cursor: crosshair;}
A:hover {cursor: crosshair;}
Changes your cursor image to a crosshair, it's the only one that I know for sure works since I've used it on mine, at the moment. But I heard about these:
crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, and url(http://someurl).
Getting rid of the little white squares in your comment boxes:
.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption. message,.caption2 .message
{
background:none;
}
{
display:none;
}
.caption. message,.caption2 .message
{
background:none;
}
Simply squares and removes the white corners without replacing background color of the comment and quote box.
.caption,.caption2
{
background: transparent;
}
{
background: transparent;
}
Makes the background of the comment and quote area transparent.
.caption,.caption2
{
color: #000000;
background: #000000;
}
.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption:message,.caption2:message
{
background:none;
}
{
color: #000000;
background: #000000;
}
.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption:message,.caption2:message
{
background:none;
}
Changes the font color and background color of the comment boxes.
#profile .caption
{
color: #000000;
background: #000000;
}
{
color: #000000;
background: #000000;
}
Changes font color and background color for the quote box.
Removing Portions of your profile:
#journal
{
display:none;
}
{
display:none;
}
Removes the journal box from your profile. This may also be done with other sections of your profile, even though it's not recommended. If you have multimedia on your profile and remove the multimedia section box, your multimedia will not show up or your music will not play.
#profile ul.items
{
display:none;
}
{
display:none;
}
Removes the items from beneath your avatar, they will not be displayed.
Making tables transparent
table, #profile, #header, #content, #details, #main, #journal, #multimedia, #signature, #wishlist, #comments{background: transparent;}
This will make all of your table boxes transparent. If you wish to remove one of these to not be transparent, that is fine.
Moving the Viewer's Avatar:
#header #avatar { position: absolute; left: 645px; top: -5px; }
#header #wordBubble { position: absolute; left: 775px; top: -5px; }
#header #wordBubble { position: absolute; left: 775px; top: -5px; }
Moves the avatar and the position for the little PM/event/trade bubble in the header over to the opposite side of the page.
Centering the profile page:
#site { margin-left: auto; margin-right: auto; width: 760px; }
Centers the entire profile page. 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.
Image Sizing
The widths are exact, but the heights vary depending how many friends you have, etc. So you'll have to play around with the height until you get it right.
Header Image 760x150 pixels.
Profile Background: 230x300 pixels.
About, Journal, Friends, Comments, Signature, Multimedia: 550xheight varies.
Profile, Details, Wishlist: 230xheight varies.
For the headers on each section, it's the same width as the boxes, the height I'm not sure about since it varies theme to theme, such as Grunny, Classic, Custom, etc. My theme is currently set to Blocks and it's the only theme I'm willing to override since it seems to be the easiest to me at least.
I hope you enjoyed this simple tutorial and that it might have helped you out to some extent.
How to link to videos on www.youtube.com
Find a video that you like from www.youtube.com, then right click near the video, not directly on it. Then select "View Source Code". A window with a bunch of code should come up. Use the find feature (ctrl+F on PC) and find something that looks like this:
player.swf?video_id=bunchanumbers
Add that as a suffix to http://youtube.com/ so it should look like this:
http://youtube.com/player.swf?video_id=bunchanumbers
Then next, you copy the html address into the Multimedia Section of your profile by clicking on "My Gaia", then clicking on "Multimedia", then just pasting the html address into the box, the video should play.
