|
Writing Your Profile in CSS/HTML |
|
|
|
|
|
|
Oh man, here we go.. Honestly, if you're looking for a new profile, it would be easier for you just to go find a premade profile, or hire someone to make you one at one of these locations:
1. www.tektek.org 2. themes.gaiatools.com 3. The Gaia Forums
If you're still here, it means you either didn't find anything you liked, or prices were too high. In that case, here are some pointers:
Gaia profiles are written in CSS, which means 'Cascading Script Style'. Since I create my own profiles, I know a thing or two about this stuff, but I'm still not an expert and since I had nobody to really coax me through this, apart from premade codes in forums and the occasional tip, I'm going to lay it out for you in a way I wish someone had explained it to me.
1. The first thing you have to is go to your profile options under the gear icon in your account setting and make it so that your profile type is set to 'classic' and the theme is set to 'custom'. Now whatever codes you put will show up on your profile page. At this point, I recommend opening another window and bring up your profile so that you can go quickly between looking at your profile page and editing it.
2. Now that you're ready to edit your profile, you need a background. If you're as slow as I was at first, you might be on this step for a while. Making a solid background color is super easy, but using a background image takes a little more work*. If you don't want to use a background image, go straight to the code I've provided and copy the corresponding section of CSS into your theme override text box**. * Background images have to be positioned and set to/prohibited from repeating, which takes more coding. If you don't do this right, you're image is hidden behind objects and sections of your profile, or it's not where you want it on the screen. You also have to incorporate it with a background color code to make it look more polished and complete. ** A 'hexcode', 'hexadecimal code', or 'color code' is a 6-digit code to represent a color. Click here for a complete list of color codes. - When using a background image, it's best to save the picture you're using onto Photobucket, ImageShack, or a similar website, so that you can edit the image as neccessary and never have to worry about losing you image source.
- Once you've got a url (web address) for your image, this is the code you will need to use to put it on your profile (/*...*/ parts are comments to help you organize your codes. they do not show up on your profile):
body /*..this is the background color..*/ {background-color: #hexcode; background-repeat: no-repeat;}
/* this is the background image. */ #content {background-image:url('url here'); background-position: ...; background-repeat: ...; border: ...; margin-top: ..px; margin-left: ..px; width: ..px; height: ..px;}
Here's this same code, with the information that I use, to help you figure out an idea of what information holes you need to fill in for yourself:
body /*..this is the background color..*/ {background-color: #ffffff; background-repeat: no-repeat;}
/* this is the background image. */ #content {background-image:url(http://i279.photobucket.com/albums/kk150/briyawna/flowers-background-1.jpg); background-position: top center; background-repeat: no-repeat; border: none; margin-top: -50px; margin-left: 120px; width: 1000px; height: 1000px;}
- Refresh your profile screen and see what you've got now. It's probably got the gaia header (the house and grass picture) and your profile content covering your background, right? Thought so. If you want to remove the header, copy and paste this code directly under your background code:
#header {display: none;}
Believe it or not, it DOES matter what order you put your codes in. Don't ask me why, I think it's stupid, but if you jump the gun and put codes in randomly, it's NOT going to work the same way. Profile coding goes in this order:
a. Background color b. Background image c. Header d. Sidebar - Profile (refers to your avatar picture, items list and status bar) - Details - Wishlist e. Main - About - Friends - Journal - Comments - Signature
3. To change any of these sections, you need to type #section_name and then give your command. There are certain commands you can give that are specific to each section, but most of the commands are generic and can be used for all of the sections. I could type all of the codes here, but Kahime already has a thread going on the subject*.
*Since I find her thread a bit difficult to read, I'm going to repost it here and edit some of her organization and notes so that it's easier to understand. I still think the credit should go where it's due, since without her, I would still be totally lost.
Also: The 'about' section is extremely versatile, and you can do virtually anything to it. All codes in the 'section/header' category can be used on the 'about' section.
((Background codes))
body {background: #000000 } Adds a background to WHOLE profile. body {background: url(-Enter picture URL here-); } Adds a background picture to the WHOLE profile.
scrollbar-arrow-color: #000000; scrollbar-track-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-shadow-color:#000000; Changes scroll-bar color. ((Header/Section Codes))
#section_name .h2 {background: url(-Enter picture URL here-); } Changes header of a certain commanded section.
#extendedProfileBody #header h1 { background: url(-URL-);} Adds the main header. (At the very top of the page.) #section_name h2 { background: url(-URL-) top left no-repeat; text-indent: 150px; } Adds a header to a certain section. (Journal, comments, details, ect.)
.section h2 {text-indent: -5000px;} Removes all headers. #section_name {text-indent: -5000px;} Removes any one header you want gone. table, #section_name {background: transparent;} Makes section table transparent. (to affect mult. tables at once, type #sect_name #sect_name #sect_name {background: transparent;})
.section {color: #-Hexhere-;} Changes ALL text colors to one single color.
#section_name {display: none;} Removes a section.
#section_name {opacity: 0-100;} Makes section see-through. 100 is completely solid, 0 is invisible. Any number from 0 to 100 gives the desired amount of transparency.
#section_name .links {display: none;} Removes all the links in any section you want. (If any.)
Resizing/Moving/Scrolling Sections
#section_name {top: **; left: **;} Moves/positions any given section.
#section_name {height: **; width: **; overflow: auto;} Puts a scroll bar on any given section. (Also resizes it.) Even though these are two seperate codes, they're usually put together and look like this: #section_name {height: **: width: *; overflow: auto; top: **; left: **;}
((Profile Codes)) #profile .avatar { opacity:0;} Deletes yolur avatar's picture. #profile {background: transparent;} Sometimes when you delete your avatar, there's a big block of color, this is the code to get rid of it. You can also use this while keeping your avatar's picture on your profile. #profile .caption { background: transparent; } Makes the quote box transparent. (Usually used when you have a background picture.) .caption:before,.caption:after,.caption2:before,.caption2:after {display:none;} Squares quote box.
#profile #bar {opacity: 0} Gets rid of the status bar completely. #profile ul.items {display:none;} Gets rid of the itens under your avatar.
]#profile {background: transparent;} Changes the background color of the profile section.
#profile {background: url(-URL of picture-);} Changes the background picture of the profile section only. (You can't have both a background image and color for this section.)
#profile #bar { background: none; } #profile #bar #onlineButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #offlineButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #hiddenButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #addButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #msgButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #tradeButton { background: url( image URL goes here ) no-repeat; height: **; width: **;} #profile #bar #ignoreButton { background: url( image URL goes here ) no-repeat; height: **; width: **;}
Note: this code group has to with add, message, block, etc. buttons found on your page. Don't be overwhelmed! haha biggrin
#profile { a:link (color:#FFFFFF; font-weight: bold; text-decoration: none); a:visited (color: #FFFFFF; font-weight: bold; text-decoration: none); a:active (color: #FFFFFF; font-weight: bold; text-decoration: none); a:hover (color: #FFFFFF; font-weight: bold; text-decoration: underline):} Changes link font, decoration, and colors. (Before and after each visit by the person.)
((Friends Codes))
#friends #friendGroup li{border-right:0px;} Removes the white space between each friend.
#friends {filter: grey; stregnth: 5;} Puts a filter over your friends. #friends #friendGroup li{display: none;} Removes your frends' pictures.
((Journal Codes)) (There's really barely anything you can do to this.) #journal {text-color: #-Hexcode-;} Changes the color of the text in the decription.
((Comments Codes))
#comments .caption { background: #000000; } #comments .caption2 { background: #000000; } Changes the background color of your comment boxes.
.caption:before,.caption:after,.caption2:before,.caption2:after {display:none;} .caption. message,.caption2 .message {background:none;} Squares the comment boxes. #comments dl dt.avatar img {display:none;} #comments dl dt.avatar2 img {display: none;} Removes commenters' avatars. ((Signature)) Because it's only your signature, there's really nothing you can do to this one besides move the section around on your profile page. That's explained in the sections/headers part.
((Multimedia Codes))
#multimedia embed{height: 200px; width:200px;} Makes your media smaller
And that's about all there is to it. Hope that helps you with everything you need for your profile! biggrin
Miss Aiyoku · Wed Feb 22, 2012 @ 11:23pm · 0 Comments |
|
|
|
|
|