Typing the title just made me realize the red flag it is to see "free" infront of anything these days. Anyways, I feel up to sharing these because some things were really annoying to get and after finally having said things it's been so nice and I'd like to be able to share them with anyone interested.
The following codes will be that of which I've used myself for many years here on Gaia. Some of the profile codes were recycled and modified over many years and were likely originally from sites like Gaiatools.com and other such Gaia profile generators from way back in the day. Said sites are very broken now days but can still be made use of if you know how to edit these types of code.
Credits: Many codes by user, AlthIndor.
My current full profile code:
----------------
Comes with compact media player, centered profile and white text.
Instructions: Locate "insertbackgroundhere" via "cntrl + f" if need be and insert your own background image via the direct link.
Previous code unedited:
----------------
Comes with grey text.
Instructions: Locate "insertbackgroundhere" via "cntrl + f" if need be and insert your own background image via the direct link.
Extra: If you'd like to change the text color for the majority of the profile, locate the following, if need be use cntrl + f and type in the entire thing.
Change 444 to the desired color code you'd like. Look it up on Google to get the hex code if need be.
If you'd like to change the link color, the same as above applies but change 777 to desired code,
----------------
Friend's Avatars on profile code that can be placed inside panels.
----------------
Instructions:
- Change "your-friends-user" to their username. If they have more than one word in their name it needs to be separated as above with "-"s.
- Replace the "xxx's" with their UID which can be found in the address bar when clicking on their profile.
- Go to edit your profile, click the 'add avatar' to profile option, select your friend's avatar then save your update.
- When viewing your profile (outside of edit mode), right click their avatar and select 'inspect'. Depending on your browser it may say 'inspect element' but for FireFox it is just 'inspect.' Copy the code via cntrl + c to not have to deal with the other copy type options.
- Paste your code some where you can edit text. It should look like this,
<img src="https://a1cdn.gaiaonline.com/dress-up/avatar/ava/72/85/11e5095a2998572.png" class="user_img" alt="User Image" id="yui-gen5">
What you need is this part, "00/11/12345678910.png"
- Lastly replace "00/11/1234 etc with the numbers with the corresponding numbers from your friend's avatar from 'inspect'.
Compact Media Player:
----------------
Profile Editing Tips: Gaia can be a bit buggy here and there and we need to keep in mind how to get around it.
- If you want to keep a private or friend's only profile, do not use the built in 'about' section when adding panels. Add a custom panel and name it 'about' if you want such a thing on your profile. The reason for this is due to a bug in the old Arenas, mainly Avatar Arenas where the original About section can be viewed albeit buggy to where coding doesn't show up properly.
- If you want to have music/media that auto plays you need to re-check the 'auto play' check box every time you edit anything on your profile as it resets to be unchecked whenever something is changed. If you have a lot to edit, be sure to set it back before you finish editing. Even more tedious, you need to save changes twice. So edit, save, check auto play again, then save again and you should be good.
The following codes will be that of which I've used myself for many years here on Gaia. Some of the profile codes were recycled and modified over many years and were likely originally from sites like Gaiatools.com and other such Gaia profile generators from way back in the day. Said sites are very broken now days but can still be made use of if you know how to edit these types of code.
Credits: Many codes by user, AlthIndor.
My current full profile code:
.panel{padding: 15px;}
.panel h2{margin:-5px -5px 10px -5px;padding:5px 6px;background:#aaa;text-align:left;text-transform:uppercase;font-weight:bold;color:#fff;font-size:10px;}
html { background: url(https://gaia.hs.llnwd.net/e1/images/profiles/v2/backgrounds/bg_tile_stars.jpg) repeat; }
body { background: no-repeat; }
.panel h2{background:#789ECF;color:#fff;}
.panel{background:#fff;color:#000;}
a{color:#D37B14;}
#header a{color:#D37B14;}
html, body {background-color: #000000;background-image:url('insertbackgroundhere'); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}.user_info_popup {background-color: #111;}.panel {background-color: #111;opacity: 0.8; filter:alpha(opacity=90);background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #333; border-width: 1px;box-shadow:0 1px 6px #000;}.panel h3 {color: #999; font-family: arial narrow; font-size: 12pt; text-transform: uppercase; font-weight: none; text-align: left; text-decoration: none;}.panel h2 {color: #999; font-family: arial narrow; font-size: 10pt; font-style: normal;letter-spacing:2px; font-weight: 100;text-transform:uppercase; text-align: center; line-height:15px;text-decoration: none;background-color: #202020;background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #000000; border-width: 1px;box-shadow:0 1px 6px #000;}div, p, table, td, li, span, .panel, dd {color: #ffffff; font-family: arial narrow, Helvetica, Arial, sans-serif; font-size: 10pt;letter-spacing:1px; text-align: center; text-decoration: none;}a:link, a:active, a:visited {color: #ffffff; font-family: arial narrow, Helvetica, Arial, sans-serif;font-size:11px;letter-spacing:1px; text-decoration: none;}a:hover {color: #888; font-family: arial narrow, Helvetica, Arial, sans-serif; text-decoration: none;}.style1 dt {color: #089ca1; font-family:arial narrow; font-size: 10pt; text-align: right; text-decoration: none;}#id_about .clear {display:block; background:none no-repeat bottom center; height:30px;}.contact_panel a:link, .contact_panel a:active, .contact_panel a:visited {color: #777; font-family:arial narrow; font-size: 10pt; font-weight: 100; text-align: center; text-decoration: none;}.contact_panel a:hover {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; text-transform: uppercase; text-decoration: none; }#id_details p strong{display:block; width:95%; color: #777; font-family: arial narrow; font-size: 10pt;font-weight:100px;letter-spacing:1px; text-align: center; text-decoration: none;}#id_about .clear {display:block; background:url('http://imagehosting.skem9.co.uk/di/5JJ2/gaiaOnlineBanner.gif') no-repeat bottom center; height:30px; }
/* Code by AlthIndor */
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
#columns {left: calc(50% - 490px);}
#column_1 {margin: 0;}
.panel h2{margin:-5px -5px 10px -5px;padding:5px 6px;background:#aaa;text-align:left;text-transform:uppercase;font-weight:bold;color:#fff;font-size:10px;}
html { background: url(https://gaia.hs.llnwd.net/e1/images/profiles/v2/backgrounds/bg_tile_stars.jpg) repeat; }
body { background: no-repeat; }
.panel h2{background:#789ECF;color:#fff;}
.panel{background:#fff;color:#000;}
a{color:#D37B14;}
#header a{color:#D37B14;}
html, body {background-color: #000000;background-image:url('insertbackgroundhere'); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}.user_info_popup {background-color: #111;}.panel {background-color: #111;opacity: 0.8; filter:alpha(opacity=90);background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #333; border-width: 1px;box-shadow:0 1px 6px #000;}.panel h3 {color: #999; font-family: arial narrow; font-size: 12pt; text-transform: uppercase; font-weight: none; text-align: left; text-decoration: none;}.panel h2 {color: #999; font-family: arial narrow; font-size: 10pt; font-style: normal;letter-spacing:2px; font-weight: 100;text-transform:uppercase; text-align: center; line-height:15px;text-decoration: none;background-color: #202020;background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #000000; border-width: 1px;box-shadow:0 1px 6px #000;}div, p, table, td, li, span, .panel, dd {color: #ffffff; font-family: arial narrow, Helvetica, Arial, sans-serif; font-size: 10pt;letter-spacing:1px; text-align: center; text-decoration: none;}a:link, a:active, a:visited {color: #ffffff; font-family: arial narrow, Helvetica, Arial, sans-serif;font-size:11px;letter-spacing:1px; text-decoration: none;}a:hover {color: #888; font-family: arial narrow, Helvetica, Arial, sans-serif; text-decoration: none;}.style1 dt {color: #089ca1; font-family:arial narrow; font-size: 10pt; text-align: right; text-decoration: none;}#id_about .clear {display:block; background:none no-repeat bottom center; height:30px;}.contact_panel a:link, .contact_panel a:active, .contact_panel a:visited {color: #777; font-family:arial narrow; font-size: 10pt; font-weight: 100; text-align: center; text-decoration: none;}.contact_panel a:hover {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; text-transform: uppercase; text-decoration: none; }#id_details p strong{display:block; width:95%; color: #777; font-family: arial narrow; font-size: 10pt;font-weight:100px;letter-spacing:1px; text-align: center; text-decoration: none;}#id_about .clear {display:block; background:url('http://imagehosting.skem9.co.uk/di/5JJ2/gaiaOnlineBanner.gif') no-repeat bottom center; height:30px; }
/* Code by AlthIndor */
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
#columns {left: calc(50% - 490px);}
#column_1 {margin: 0;}
----------------
Comes with compact media player, centered profile and white text.
Instructions: Locate "insertbackgroundhere" via "cntrl + f" if need be and insert your own background image via the direct link.
Previous code unedited:
.panel{padding: 15px;}
.panel h2{margin:-5px -5px 10px -5px;padding:5px 6px;background:#aaa;text-align:left;text-transform:uppercase;font-weight:bold;color:#fff;font-size:10px;}
html { background: url(https://gaia.hs.llnwd.net/e1/images/profiles/v2/backgrounds/bg_tile_stars.jpg) repeat; }
body { background: no-repeat; }
.panel h2{background:#789ECF;color:#fff;}
.panel{background:#fff;color:#000;}
a{color:#D37B14;}
#header a{color:#D37B14;}
html, body {background-color: #000000;background-image:url('insertbackgroundhere'); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}.user_info_popup {background-color: #111;}.panel {background-color: #111;opacity: 0.9; filter:alpha(opacity=90);background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #333; border-width: 1px;box-shadow:0 1px 6px #000;}.panel h3 {color: #999; font-family: arial narrow; font-size: 12pt; text-transform: uppercase; font-weight: none; text-align: left; text-decoration: none;}.panel h2 {color: #999; font-family: arial narrow; font-size: 10pt; font-style: normal;letter-spacing:2px; font-weight: 100;text-transform:uppercase; text-align: center; line-height:15px;text-decoration: none;background-color: #202020;background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #000000; border-width: 1px;box-shadow:0 1px 6px #000;}div, p, table, td, li, span, .panel, dd {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; font-size: 10pt;letter-spacing:1px; text-align: center; text-decoration: none;}a:link, a:active, a:visited {color: #777; font-family: arial narrow, Helvetica, Arial, sans-serif;font-size:11px;letter-spacing:1px; text-decoration: none;}a:hover {color: #888; font-family: arial narrow, Helvetica, Arial, sans-serif; text-decoration: none;}.style1 dt {color: #089ca1; font-family:arial narrow; font-size: 10pt; text-align: right; text-decoration: none;}#id_about .clear {display:block; background:none no-repeat bottom center; height:30px;}.contact_panel a:link, .contact_panel a:active, .contact_panel a:visited {color: #777; font-family:arial narrow; font-size: 10pt; font-weight: 100; text-align: center; text-decoration: none;}.contact_panel a:hover {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; text-transform: uppercase; text-decoration: none; }#id_details p strong{display:block; width:95%; color: #777; font-family: arial narrow; font-size: 10pt;font-weight:100px;letter-spacing:1px; text-align: center; text-decoration: none;}#id_about .clear {display:block; background:url('http://imagehosting.skem9.co.uk/di/5JJ2/gaiaOnlineBanner.gif') no-repeat bottom center; height:30px; }
/* Code by AlthIndor */
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
.panel h2{margin:-5px -5px 10px -5px;padding:5px 6px;background:#aaa;text-align:left;text-transform:uppercase;font-weight:bold;color:#fff;font-size:10px;}
html { background: url(https://gaia.hs.llnwd.net/e1/images/profiles/v2/backgrounds/bg_tile_stars.jpg) repeat; }
body { background: no-repeat; }
.panel h2{background:#789ECF;color:#fff;}
.panel{background:#fff;color:#000;}
a{color:#D37B14;}
#header a{color:#D37B14;}
html, body {background-color: #000000;background-image:url('insertbackgroundhere'); background-position: center; background-repeat: no-repeat; background-attachment: fixed;}.user_info_popup {background-color: #111;}.panel {background-color: #111;opacity: 0.9; filter:alpha(opacity=90);background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #333; border-width: 1px;box-shadow:0 1px 6px #000;}.panel h3 {color: #999; font-family: arial narrow; font-size: 12pt; text-transform: uppercase; font-weight: none; text-align: left; text-decoration: none;}.panel h2 {color: #999; font-family: arial narrow; font-size: 10pt; font-style: normal;letter-spacing:2px; font-weight: 100;text-transform:uppercase; text-align: center; line-height:15px;text-decoration: none;background-color: #202020;background-image:url(); background-position: top center; background-repeat: repeat; background-attachment: fixed;border-style: solid; border-color: #000000; border-width: 1px;box-shadow:0 1px 6px #000;}div, p, table, td, li, span, .panel, dd {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; font-size: 10pt;letter-spacing:1px; text-align: center; text-decoration: none;}a:link, a:active, a:visited {color: #777; font-family: arial narrow, Helvetica, Arial, sans-serif;font-size:11px;letter-spacing:1px; text-decoration: none;}a:hover {color: #888; font-family: arial narrow, Helvetica, Arial, sans-serif; text-decoration: none;}.style1 dt {color: #089ca1; font-family:arial narrow; font-size: 10pt; text-align: right; text-decoration: none;}#id_about .clear {display:block; background:none no-repeat bottom center; height:30px;}.contact_panel a:link, .contact_panel a:active, .contact_panel a:visited {color: #777; font-family:arial narrow; font-size: 10pt; font-weight: 100; text-align: center; text-decoration: none;}.contact_panel a:hover {color: #444; font-family: arial narrow, Helvetica, Arial, sans-serif; text-transform: uppercase; text-decoration: none; }#id_details p strong{display:block; width:95%; color: #777; font-family: arial narrow; font-size: 10pt;font-weight:100px;letter-spacing:1px; text-align: center; text-decoration: none;}#id_about .clear {display:block; background:url('http://imagehosting.skem9.co.uk/di/5JJ2/gaiaOnlineBanner.gif') no-repeat bottom center; height:30px; }
/* Code by AlthIndor */
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
----------------
Comes with grey text.
Instructions: Locate "insertbackgroundhere" via "cntrl + f" if need be and insert your own background image via the direct link.
Extra: If you'd like to change the text color for the majority of the profile, locate the following, if need be use cntrl + f and type in the entire thing.
div, p, table, td, li, span, .panel, dd {color: #444;
Change 444 to the desired color code you'd like. Look it up on Google to get the hex code if need be.
If you'd like to change the link color, the same as above applies but change 777 to desired code,
a:link, a:active, a:visited {color: #777;
----------------
Friend's Avatars on profile code that can be placed inside panels.
[url=https://www.gaiaonline.com/profiles/your-friends-user/xxxxxx/][img]https://a1cdn.gaiaonline.com/dress-up/avatar/ava/07/ad/503a5e7a223ad07.png[/img][/url]
----------------
Instructions:
- Change "your-friends-user" to their username. If they have more than one word in their name it needs to be separated as above with "-"s.
- Replace the "xxx's" with their UID which can be found in the address bar when clicking on their profile.
- Go to edit your profile, click the 'add avatar' to profile option, select your friend's avatar then save your update.
- When viewing your profile (outside of edit mode), right click their avatar and select 'inspect'. Depending on your browser it may say 'inspect element' but for FireFox it is just 'inspect.' Copy the code via cntrl + c to not have to deal with the other copy type options.
- Paste your code some where you can edit text. It should look like this,
<img src="https://a1cdn.gaiaonline.com/dress-up/avatar/ava/72/85/11e5095a2998572.png" class="user_img" alt="User Image" id="yui-gen5">
What you need is this part, "00/11/12345678910.png"
- Lastly replace "00/11/1234 etc with the numbers with the corresponding numbers from your friend's avatar from 'inspect'.
Compact Media Player:
/* Code by AlthIndor */
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #000;
background-position: bottom -40px left -15px, bottom 0 right -10px;
height: 40px !important;
border: 1px solid #FFFFFF80;
box-sizing: border-box;
overflow: hidden;
}
.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}
.media_panel iframe {
width: calc(100% + 25px);
height: 200px;
left: -15px;
opacity: .01;
z-index: 1;
}
.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
left: 78px;
z-index: 2;
}
----------------
Profile Editing Tips: Gaia can be a bit buggy here and there and we need to keep in mind how to get around it.
- If you want to keep a private or friend's only profile, do not use the built in 'about' section when adding panels. Add a custom panel and name it 'about' if you want such a thing on your profile. The reason for this is due to a bug in the old Arenas, mainly Avatar Arenas where the original About section can be viewed albeit buggy to where coding doesn't show up properly.
- If you want to have music/media that auto plays you need to re-check the 'auto play' check box every time you edit anything on your profile as it resets to be unchecked whenever something is changed. If you have a lot to edit, be sure to set it back before you finish editing. Even more tedious, you need to save changes twice. So edit, save, check auto play again, then save again and you should be good.
