Welcome to Gaia! ::

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion
<3 </3
Reply
1 2 3 4 5 6 ... 97 98 99 > >>

Original Member

Offline
User Image - Blocked by "Display Image" Settings. Click to show.


Alright, here's the intro. This thread will be all about just listing all the possible codes anyone can use to help customize their extrended profiles.

Goal: Give much needed help to those who need it. 3nodding Hopefully, this way, people wont have to search through pages and pages of threads looking for a code, and perhaps this will reduce the number of "What Code..." threads. whee



General Information:
The above Post Sections are clickable. ninja

If you see 'XXX' in a code, it isn't a sexual reference. It's merely a term I used to let you know that you can submit something there to change your profile. So, for example, if you see:
[code:1]url('XXX')[/code:1]
Then replace the XXX with a URL, and preview your profile. 3nodding
NOTE: Remember, anytime you're using a URL, it always has to have an apostrophe mark on both sides. If url(XXX) doesn't work, then url('XXX') should. 3nodding

If you see "-=-=-=-=-" in a code, don't copy it into your Profile. It's not a code, but something I use to separate codes. Even if it's in a
tag, it doesn't do anything, but could potentially mess something up.

Hexidecimal Code: A Hexidecimal Code is a six digit number that represents colors. When a web browser sees it, it replaces it with whatever color that six digits is assigned to. HEX codes always have the pount sign before them (#). Incase you don't have all 260+ combinations memorized, here's a handy link: [b][url=http://www.w3schools.com/html/html_colors.asp][color=black]W3C, the people who made up HTML, CSS, and much, much more![/color][/url][/b]

Here is another link to web-safe HEX color codes: [b][url=http://html-color-codes.com/][color=black]Color Chart by VisiBone[/color][/url][/b]

Please, please, don't PM me. I know little to nothing about CSS, I can't help you much. All I know is what's listed here. If you have a question, you can ask it in this thread, but don't expect me to PM you an answer. :sweat: Thanks for taking the time and reading this.

Original Member

Offline
-Header & Body Codes-


Below is a list of all codes that affect the Header Section of your Profile, along with the Background.

Codes:


This code is for your H2 sections. It affects the words "Friends", "Details", "Wishlist", etc. You can use this to change them all at once, instead of changing one at a time. 3nodding
.section h2
{
background: url('XXX') no-repeat top left;
}

This code changes the background behind the word.

-=-=-=-


The below code affects what your caption contains. For those who don't know what that is, your Caption is the little word bubble/square that your character is saying.
#profile .caption
{
left: 110px;
width: 40px;
top: 80px;
background: url('XXX') no-repeat center;
}
This code here gives your Caption an image as a background. For Left, Witdh, and Top, you can use your own px's, this is just an example. 3nodding

-=-=-=-


This affects how your Avatar is displayed.
#profile .avatar
{
display: url('XXX')
background: url('XXX') no-repeat top left;
}
The 'Display:' portion is the URL for your actual Avatar, so don't add it unless you want to change your Avatar into some other image. 'Background:' can change the Background behind the Avatar.

-=-=-=-


This code affects the Header Image.
#extendedProfileBody #header h1
{
background: url('XXX') no-repeat;
}
This is basically affects that long image at the top of the screen. You know, the one that says "Gaia Online" or "Gaia Profiles" or something. The large banner. Well, simply replace XXX with your own URL, and you can replace the banner with your image. BANNER SIZE: 760x150 Pixels

-=-=-=-


This code changes the Background.
#extendedProfileBody
{
background: #000000;
}

-=-=-=-=-=-

#extendedProfileBody
{
background: url('XXX')
}
You can use this to change your background. That code with the six digit number (This number is called a Hexidecimal, for your info) is a color code. Whatever number is there, tells what background color it is. Or, you can use the second one, which changes the background into an image.

-=-=-=-


This affect text/body in your profile.
body
{
background: url('XXX') no-repeat fixed left;
font-family: Comic Sans MS, Arial Black, Times New Roman;
color : #000000;
text-align:justify;
}
Here you can adjust the Text and overall body of your profile. Background URL, you know what that is. "Font-Family" changes the type of font on the page to any kind you specify. Here, you'll want to give three (Fonts shouls be separated by comas). Three fonts, the first being your prefered one. It takes three, incase a user doesn't have the first font on their computer. "Color" changes the color of the text, which requires a Hexidecimal if I'm correct. "Text-align" tells where to align your text. Justify makes it regular, but you can use Center, Right, or Left. 3nodding

Atasuke Chikanatsu
This code changes the colors of Text and Links (UPDATED):
TD, FONT, P, BR, BODY, H1, H2, I, B
{
font-family:lucida sans;
font-size:10pt;
color: COLORCODE;
}
a:link {color: COLORCODE; font-weight: bold; text-decoration: none}
a:visited {color: COLORCODE; font-weight: bold; text-decoration: none}
a:active {color: COLORCODE; font-weight: bold; text-decoration: none }
a:hover {color: COLORCODE; font-weight: bold; text-decoration: underline}


This code changes the colors of the links at the bottom of the page:
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE; letter-spacing: -1px;}
a.copyright { color: COLORCODE; font-size: small; text-decoration: none;}
a.copyright:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.corporate { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.corporate { color: COLORCODE; font-size: small; text-decoration: none;}
a.corporate:visited {color: COLORCODE;}
a.corporate:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.news{ font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.news { color: COLORCODE; font-size: small; text-decoration: none;}
a.news:visited {color: COLORCODE;}
a.news:hover { color: COLORCODE; font-size: small; text-decoration: underline;}


Changes the footer of the page (the blue bar, for those of you who don't know):
#extendedProfileBody #footer
{background: url('XXX')}


-=-=-=-


This long list of code, my friend, changes your Status Bar (UPDATED).
Atasuke Chikanatsu
#profile .caption
{
top: 50px;
}
#bar #onlineButton {width: 60px; background: transparent url(ONLINE Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}
#bar #offlineButton {width: 60px; background: transparent url(OFFLINE Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}
#bar #hiddenButton {width: 60px; background: transparent url(HIDDEN Graphic URL Here) no-repeat; text-indent: -5000px; height: 22px;}

#bar #addButton {background: transparent url(ADD Graphic URL Here) no-repeat;}
#bar #msgButton {background: transparent url(PM Graphic URL Here) no-repeat;}
#bar #tradeButton {background: transparent url(TRADE Graphic URL Here) no-repeat;}
#bar #ignoreButton {background: transparent url(IGNORE Graphic URL Heref) no-repeat;}

#bar #addButton a {width: 33px; background: transparent url(ADD MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #msgButton a {width: 29px; background: transparent url(PM MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #tradeButton a {width: 28px; background: transparent url(TRADE MouseOver Graphic URL Here) -22px -90px no-repeat;}
#bar #ignoreButton a {width: 34px; background: transparent url(IGNORE MouseOver Graphic URL Here) -22px -90px no-repeat;}
This is a bit of a complex code, so if you don't know your way around on Gaia (Or Internet, I should say), then perhaps asking for some help would be good. If you don't want a portion or image to be changed, then merely omit it.

Autolycos
}

#friends
{
display: none;
}


Remove the Friends section of your profile.

*The can work with any section. Just change the friends part to journal, multimedia ect. just change '#friends' to the name of the section you want*

body
{
cursor: crosshair;
}


Adds a crosshair cursor to your profile.

For a more details explination on cursors, go here: Pie32's Cursor List

Original Member

Offline
-Individual Codes-


Below is a list of all codes that affect the each individual section of your Profile. This is your "Profile" section, "About", "Friends", etc., and is for codes that affect them individually.

Profile Codes:
This code changes the Background Header image of your "Profile" section.
Atasuke Chikanatsu
#profile H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


About Codes:
This code changes the Background Header image of your "About" section.
Atasuke Chikanatsu
#about H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


Details Codes:
This code changes the Background Header image of your "Details" section.
Atasuke Chikanatsu
#details H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


Wishlist Codes:
This code changes the Background Header image of your "Wishlist" section.
Atasuke Chikanatsu
#wishlist H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


Friends Codes:
This code changes the Background Header image of your "Friends" section.
Atasuke Chikanatsu
#friends H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


Journal Codes:
This code changes the Background Header image of your "Journal" section.
Atasuke Chikanatsu
#journal H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


-=-=-=-


Multimedia Codes:
Atasuke Chikanatsu
This code embeds the Multimedia section:

#multimedia { text-indent: -5000px; position: relative; left: -5000px; }
#comments { position: relative; top: -420px; }
#signature { position: relative; top: -420px; }

NOTE: This will leave a large space at the bottom of your profile. DO NOT use this code if you are using the CENTERING code (where your entire prifile is in the center of the page)


This code changes the Background Header image of your "Multimedia" section.
Atasuke Chikanatsu
#Multimedia H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


Pie32
For my hide multimedia code, you can use the centering code. It's just this next bit of code that you should include after it. It moves up the footer, so it is optional.
#footer { position: relative; top: -420px }
#corp { position: relative; top: -420px }


-=-=-=-


Comments Codes:

This code changes the Background Header image of your "Comments" section.
Atasuke Chikanatsu
#comments H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}


These codes affect the comments in your Profile. "dt.avatar img" affects the first person to post in your comments, or more specifically, the first person on the list of people. Likewise, "dt.avatar2 img" affects the second person on the Comments list.
#comments dl dt.avatar img
{
background: url('XXX')
}

#comments dl dt.avatar2 img
{
background: url('XXX')
}
These particular codes change the background image behind the commentor's Avatar.

-=-=-=-


Signature Codes:
This code changes the Background Header image of your "Signature" section.
Atasuke Chikanatsu
#signature H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}

Original Member

Offline
-Those other codes-


Here's your list of all codes that don't really fit into the above two categories. whee Here's your random, out there codes. 3nodding Just a little something to give your profile that little spice it needs.

Spare Codes:
None yet

Original Member

Offline
-Extra Stuff-


This is just some extra stuff. It's mainly a list of all those helpful people out there who've submitted codes or are willing to help you with your profiles.

(If you're one of these people, PM me or post a link to your thread/guild, and I'd be glad to post it here.)

domokun Helpful Helpers domokun : - These are the people who've helped me make the threads:

Awards and thanks:
User Image - Blocked by "Display Image" Settings. Click to show.

Aside from the constant thanks we've recieved for help (Which I really enjoy, it makes this job worth the work 3nodding ), we've also recieved a generous donation thanks to those of The Good Faeries Agency. They really are great people. 3nodding

Atasuke Chikanatsu: For submitting a hefty amount of coding, along with being a great help with multiple users, whether it be code searching or troubleshooting. (Sasha kicked me out of my profile! The evil hot-guy loving wench mad )
Atasuke has also been promoted to my Right Hand Guy, for all the excellent work he's done. As I know little to nothing about CSS, he's the person to thank for most of the help there. 3nodding

Pie32
My original post: And]http://www.gaiaonline.com/guilds/viewtopic.php?page=1&t=1574877#38087674
And of course, Pie32. Probably one of the people of whom inspired me to help Gaian's by creating this thread. He's popped in once or twice to give his help. Also hosting and making TONS of custom cursors. domokun

User Image - Blocked by "Display Image" Settings. Click to show.


Link to us:


User Image - Blocked by "Display Image" Settings. Click to show.
[url=http://snipurl.com/k1zz][img]http://tinypic.com/fvw9dz.jpg[/img][/url]
(Thanks Nahayara!)

User Image - Blocked by "Display Image" Settings. Click to show.
[url=http://snipurl.com/k1zz][img]http://tinypic.com/fp74ie.png[/img][/url]
(Thanks Alternate!)

User Image - Blocked by "Display Image" Settings. Click to show.
[url=http://snipurl.com/k1zz][img]http://tinypic.com/fp747l.jpg[/img][/url]
(Thanks Pistgurl!)

Original Member

Offline
*cuts ribbon* Open. biggrin

'Course, still being worked on, but post away.

Offline
I'll give you some codes to put on that list! xd Just let me sort them into sections first, then I'll post em

Offline
Here is some coding that you can put into your theme.

Anything maked by 'COLORCODE' is where you put HEX color code
Anything maked by 'XXX' is where you put your URL's


This code changes the banner at the top of the page:

#extendedProfileBody #header h1
{
background: url('XXX')
}



This code insterts a background picture:

body
{
background: #000000 url('XXX') no-repeat fixed left;
}


Additional things that can be added to the picture:

no-repeat = the picture will not repeat itself (meaning it will only put the background image ONCE)
fixed = fixes the picture in a position. you must add one or more of the following after the 'fixed' command:
left = fixes the image to the left
right = fixes the image to the right
top = fixes the image to the top
bottom = fixes the image to the bottom


This code removes the excess bacground from around the different sections (friends, profile, wishlist, ect...):

#content
{
background: none;
}


'none' can be changed to a HEX color or image


This code changes the colors of Text and Links:

body,TD,FONT,P,I
{
font-family: verdana;
font-size:8pt;
color: COLORCODE
}
B
{
font-family:verdana;
font-size:8pt;
color: COLORCODE}
a:link { color: COLORCODE; font-weight: bold; text-decoration: none}
a:visited { color: COLORCODE; font-weight: bold; text-decoration: none}
a:active { color: COLORCODE; font-weight: bold; text-decoration: none }
a:hover { color: COLORCODE; font-weight: bold; text-decoration: underline}
TD, FONT, P, BR, BODY, H1, H2
{
font-family:verdana;
font-size:8pt;
color: COLORCODE
}
p table
{
width:450;border:1px solid black;
background:white;
}



This code changes the colors of the links at the bottom of the page:

.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE; letter-spacing: -1px;}
a.copyright { color: COLORCODE; font-size: small; text-decoration: none;}
a.copyright:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.corporate { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.corporate { color: COLORCODE; font-size: small; text-decoration: none;}
a.corporate:visited {color: COLORCODE;}
a.corporate:hover { color: COLORCODE; font-size: small; text-decoration: underline;}
.news{ font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: COLORCODE;}
a.news { color: COLORCODE; font-size: small; text-decoration: none;}
a.news:visited {color: COLORCODE;}
a.news:hover { color: COLORCODE; font-size: small; text-decoration: underline;}



This code embeds the Multimedia section:

#multimedia { text-indent: -5000px; position: relative; left: -5000px; }
#comments { position: relative; top: -420px; }
#signature { position: relative; top: -420px; }


NOTE: This will leave a large space at the bottom of your profile. DO NOT use this code if you are using the CENTERING code (where your entire prifile is in the center of the page)


Changes the footer of the page (the blue bar, for those of you who don't know):

#extendedProfileBody #footer
{background: url('XXX')}

Offline
That is all the code I have so far. I'll add more when I get it mrgreen

Original Member

Offline
Atasuke Chikanatsu
That is all the code I have so far. I'll add more when I get it mrgreen
Thanks! Much appreciated. I'll add it in now. 3nodding

Offline
Lord Oni-mushu
Atasuke Chikanatsu
That is all the code I have so far. I'll add more when I get it mrgreen
Thanks! Much appreciated. I'll add it in now. 3nodding
No problem 3nodding to tell you the truth, I originally had help with the code I have now...well, most of it anyway

Offline
*subscirbes* I see much potential in this thread. ninja

Offline
This code affects the headers of each section (profile, friends, wishlist, multimedia, ect...) so you may put your own custon headers in place:

#profile H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}
#friends H2{background: url(XXX) no-repeat top left;}
#details H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}
#multimedia H2{background: url(XXX) no-repeat top left;}
#comments H2{background: url(XXX) no-repeat top left;}
#about H2{background: url(XXX) no-repeat top left;}
#wishlist H2{background: url(XXX) no-repeat top left; text-indent: -1000px;}
#signature H2{background: url(XXX) no-repeat top left;}
#journal H2{background: url(XXX) no-repeat top left;}



This code affects the BACKGROUND of each section (profile, friends, wishlist, multimedia, ect...):

#profile{background:COLORCODE url(XXX) no-repeat top right;}
#friends{background:COLORCODE url(XXX) no-repeat top right;}
#details{background:COLORCODE url(XXX) no-repeat top right;}
#multimedia{background:COLORCODE url(XXX) no-repeat top right;}
#comments{background:COLORCODE url(XXX) no-repeat top right;}
#about{background:COLORCODE url(XXX) no-repeat top right;}
#wishlist{background:COLORCODE url(XXX) no-repeat top right;}
#signature{background:COLORCODE url(XXX) no-repeat top right;}
#journal{background:COLORCODE url(XXX) no-repeat top right;}


NOTE: Both of these codes can be varied in quite a few ways. If you need help with them, then feel free to ask me

Offline
two more codes that I forgot to add mrgreen
Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion

Quick Reply

Submit
Manage Your Items
Other Stuff
More
Get GCash
Offers
More
Get Items
More Items
More
Where Everyone Hangs Out
Other Community Areas
  • Guilds
    fan clubs for the stuff you love
  • Chat
    chat in real time with other Gaians
  • Art Arenas
    browse & rate gaian art galleries
  • Clans
    play zOMG with others
More
Virtual Spaces
Fun Stuff
More
Gaia's Games
Mini-Games
More
//
//

Join Now

// //

Have an account? Login Now!

//
//