Special thanks to Esc
CSS Headers
#id_about - The panel with your About Me content. You can edit the About Me content under My Gaia --& Account --& About Me.
#id_details - The panel with your avatar on it. It also contains your stats like registered date, last login, etc. and your personal information like your birthday.
#id_details img - You can use this selector to edit your avatar in the details panel.
#id_contact - The panel that had the "Add to Friends/Ignored", "Send Message", and "Trade Items" links.
#id_equipment - The panel with a list of the items that you currently have equipped.
#id_equipment .item - Use this if you want to affect only the items in the panel, and not the panel overall.
#id_equipment .item img - Use this if you want to affect only the individual items.
#id_playlist - The panel with your playlists.
#id_badges - The panel with your zOMG badges.
#id_badges .clickable - The individual badges.
#id_wishlist - The panel with a list of the items on your wishlist.
#id_wishlist .item - Use this if you want to affect only the items in the panel, and not the panel overall.
#id_wishlist .item img - Use this if you want to affect only the individual items.
#id_mycar - The panel with your car in it.
#id_interests - The panel with your interests listed.
#id_interests h3 - The heading of each section of interests; I.E. "Favorite Movies/Anime", "Favorite TV Shows", etc.
.interest_tags - The lists (links) of all of your interests.
#id_signature - The panel displaying your current signature.
#id_gifts - The panel that shows any gifts you have received.
#id_store - The panel with your store in it.
.media_panel - The panel with your media in it. If you have more than one media and want to change a specific one, you would treat it like a custom section (explained in the next post).
#id_house - The panel with your house in it.
#id_forum - The panel displaying your forum stats I.E. your total number of posts and your average number of posts per day.
#id_footprints - Also referred to as the "recent visitors" panel; it shows users who have come to your profile.
#id_guilds - The panel displaying the guilds you are currently a member of.
#id_journal - The panel with your journal in it.
#id_journal p a - The "View Journal" link.
#id_journal ul - The links to entries in your journal.
#id_friends - The panel that shows all of your Gaia friends.
#id_friends ul img - The heads of your friends. NOTE: Any edits you make to this will affect the ? icon as well. To undo this, you can apply different properties to the ? icon alone using the next selector.
#id_friends .user_info img - The ? icon.
#id_comments - The panel that displays all of your comments.
#alert_container - The Add Comments button.
#id_comments .user_info img - The little ? icon next to a commenter's username.
#id_comments .avatar - The avatar/head of your commenter.
#id_comments .date - The date listed on each comment.
#id_comments dt - The username, ? icon, and date of each comment. This also contains the line that separates these things from the actual comments.
#id_comments dd - The actual comments themselves and the avatar/head of the commenter.
Scrollbar
overflow:hidden
overflow-y:hidden
overflow-x:hidden
scrollbar-face-color:#df0160;
scrollbar-shadow-color:#b2013e;
scrollbar-highlight-color:#fe86ad;
scrollbar-3dlight-color:white;
scrollbar-darkshadow-color:#f04783;
scrollbar-track-color:#ffc7df;
scrollbar-arrow-color:#94002c;
_________________________________
Columns
#columns
---> {width: ##px; margin-left: auto; margin-right: auto; float: none; position: relative; top: 0px;}
#column_1
#column_2
#column_3
Header Selectors
#gaia_header li{color: #FFFFFF !important;}
#gaia_header - The navigation bar overall. I usually use this if I'm adding a border to the botto mof the navigation bar.
#gaia_header a - All of the links in the header.
#gaia_header a:hover, a:visited, a:active (Must add !important before the ; )
#gaia_header, #gaia_header * - If you want to edit specific parts of the gaia header, like the background color or the font family.
#header_left - The left side of the navigation bar.
#header_left img - The Gaia logo.
#header_right - The right side of the navigation bar.
.user_info_popup
Padding: between border and header
• Slight difference... ^ ^*
.panel h2 {background: transparent; color: darkred; line height: 75%;} = normal
.panel h2 {background: transparent; color: darkred; line height: 75%'} = dotted top border (O.0)
Gaia Header CSS
#gaia_header (This the whole top bar, and sets width, overall border, and height, but not colors)
#gaia_header #header_left, and #gaia_header #header_right (these are the left and right sides of the bar, and can be used to change the color of the bar)
#gaia_header a(this is the links in the header)
and #header_left img (this is the actual logo)
#gaia_header #header_left, #gaia_header #header_right{background-color:#1f1f1f;color:#00ffff;}
Regular Logo:
#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://www.freewebs.com/trezoid/DSG.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}
Black Logo:
#header_left img
{
padding-top: 0px;
padding-right: 47px;
padding-bottom: 23px;
padding-left: 0px;
background-color: transparent;
background-image: url(http://i97.photobucket.com/albums/l210/zaned06/gaia.png)!important;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
height: 0px;
width: 0px;
}
#gaia_header{position:absolute; width:100%;}
#gaia_header{
position:fixed;
width:100%;
}
V2 Newer Codes
#alert_container - The Add Comments button.
USER STATUS
.forum_userstatus - The whole userstatus
.forum_userstatus .statuslinks
.forum_userstatus.trig .statuslinks - The blue arrow
.forum_userstatus.hover .statuslinks
.forum_userstatus .statuslinks span.online - The online image + text
.forum_userstatus .statuslinks span.offline - The offline image + text
#avatar_menu - The dropdown {cannot be hidden without affecting other things}
#avatar_menu a - The links on the dropdown
#avatar_menu a:hover - The links on the dropdown hovered over
#avatar_menu li.menu_seperator -The line that separates the content
.forum_userstatus .statuslinks{background: url('URL OF IMAGE') top right no-repeat;}
replaces arrow with an image
.forum_userstatus.trig .statuslinks, .forum_userstatus.hover .statuslinks{background: none;}
This does something, just put it in. I haven't quite figured out its purpose.
.forum_userstatus .statuslinks span.online{background: url('URL OF IMAGE') top left no-repeat;}
replaces the default online image with another image
.forum_userstatus .statuslinks span.offline{background: url('URL OF IMAGE') top left no-repeat;}
replaces the default offline image with another image
.forum_userstatus .statuslinks span.online, .forum_userstatus .statuslinks span.offline{background: none;}
hides the online/offline images [note: since the images are part of the background, that's why we are hiding the background]
New Codes
FAQ
#site {margin-right: auto; margin-left: auto;}
OLD SCHOOL
#section h2 {display: none;}
#site h2 {display: none;}
CURRENT
.panel h2 {display: none;}
MEDIA
&autoplay=true
&loop=1
#multimedia {position: absolute; visibility: visible;}
#multimedia object, #multimedia embed {display: none;} or {visibility: hidden;}
Remove "Alert me of Comments"
The "Alert Me of Comments" thing is only visible to you, but you can hide it with this code:
#alerts_banner{display: none;}
Media Codes (More)
.media_panel
{ visibility: hidden; height: 0px; }
to autoplay the video/music, put &autoplay=1 at the end of the url. It works ONLY for youtube videos, so far as I've tried.
Profile Brand-style creditation
body {
background: url(http://i730.photobucket.com/albums/ww305/profilebrand/gaia-layouts.gif) bottom left no-repeat fixed;
}
html { background: url (....).... }
Buttons...!!!!! >W<
#id_contact li a = Add Friends
#id_contact li+li a = Message
#id_contact li+li+li a = Trade
You need to display it as a box {display: block;}
remove the font {font-size:0px!important;text-indent:-5000px;}
and add the image {height: xxpx; width: xxpx; background: url('xxx');}
Courtesy of: seriously_me
Background settings
• repeat
• no-repeat
• repeat-x
• repeat-y
Opacity
{opacity: .8; -moz-opacity: .8; filter:alpha(opacity=80); -khtml-opacity: .8;}
This code makes the section see-through but still visible. You can edit the numbers in green if you want to make the section more or less visible.
Borders
• Dashed
• Dotted
• Solid
• Double
• Groove
• Inset
• Outset
• Ridge
• Rounded
>>add: -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
Font Family {font-family: ; }
• Verdana
• Sans-Serif
• Tahoma
• Garamond
• Georgia
• Serif
• Fantasy
• Arial
Text-Decoration
• none
• underline
• overline
• line-through
• blink (?)
Text Transform
• none
• capitalize - first character of each word is uppercase
• uppercase
• lowercase
• inherit
Text-Align
• Left
• Right
• Center
Font-Style
• normal
• italic
• oblique
Links
• a
• a:link
• a:visited
• a:hover
• a:active
Cursors
• Help
• Crosshair
• Pointer
• Move
• Wait
• Text
• e/ne/nw/n/se/sw/s/w + -resize
• Default
• URL (cursors-4u.com)
Visibility
>> :hidden
+ :hover
.user_info_popup
Nuke RavenFire Community Member 
|
|
