Welcome to Gaia! ::

Gaia Forums » GAIA Community » Gaia Community Discussion » Profile Discussion
<3 </3
Reply
1 2 3 4 5 6 ... 23 24 25 > >>

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
http://www.gaiaonline.com/forum/viewtopic.php?t=17554537


Ok so I know there's tons of guides out there, but I've been working on this one since March and I've decided to go ahead and put it out for now.

Once Profiles v2 comes out, I'll be tweaking my stuff, and merging with Tutsumi's GOPG.

But for now, this covers most everything I could think of about CSS and Gaia Profiles.

If you have any questions about anything in this guide, please post them in this thread. If you have any questions about stuff not in this guide, you can ask them here, but you'd probably be better off reading other guides to look for the answer, or making your own thread about them.

But please don't PM me with your questions gonk

  1. Intro
  2. Copy & Paste Codes
  3. Editable Copy & Paste Codes
  4. Common Classes and IDs in Old School and v2
  5. How to actually use the classes and IDs to create custom CSS
  6. How to define styles for different blocks
  7. Classic Base CSS
  8. Blocks Base CSS
  9. Grunny Base CSS (coming soon)

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
First off, we'll give you one-liner codes for those of you who are looking to do a specific thing and just want the code for it, without caring how it works xp

#profile h2, #details h2, #wishlist h2, #about h2, #friends h2, #journal h2, #multimedia h2, #comments h2, #signature h2{text-indent: -5000px;}
    make all the header text dissapear (or move waaaaay to the left) so that you can use an image instead of the basic text


#commonFriends{display:none;}
    make it so your common friends don't show up when other people visit your page. Commonly used if your layout depends on your details box being a set size


#friends #friendGroup li{border-right:0px;}
    get rid of that annoying line along the side of your friends


#profile ul.items {display: none;}
    make the items you're currently wearing not appear


.caption:before, .caption:after, .caption2:before, .caption2:after{display:none;}
    get rid of the rounded corners. You can't see them in IE but if you leave them in and have a blue background for your comments (or any color other than white) it makes things look like crap for anyone viewing with firefox


#comments .avatar, #comments .avatar2{display:none;}
    remove the avatar of the person who's commented. A good thing to do if your comments box is less than 300 pixels wide


#about .links {display: none;}
    make the links at the top of your about section disappear


#site{margin-left: auto; margin-right: auto; width: 760px;}
    center your profile


#content{border:0px; background: transparent;}
    get rid of the grey line on the right side of your profile, and make the content section transparent


.caption .message, .caption2 .message{background: transparent;}
    get rid of the caption "tail"

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Next we have code that takes a little more work. This code you can copy and paste, but you've gotta make a few changes before it will work for you. Again, it doesn't really require that you understand the code to use it. Don't know what section you're trying to change? The next post will contain all the most common section IDs (and then some) and a short description of each so you can find the right section ID for the following codes smile Items that are red are things that have to be changed. Items that are blue are things that you can change if you want, or you can leave as the are.

SECTIONID{overflow:scroll; overflow-x:hidden; overflow-y:auto; height: ##px; width:##px;}
    make a section scroll vertically, but not horizontally. Replace SECTIONID with the proper ID from the next post and the ##'s with the proper height and width of the block you are putting the scrollbar in.


SECTIONID{background: transparent url(http://imagenamehere) top right no-repeat;}
    make a section have an image for a background that is aligned at the top right of the block that won't repeat. Also have all the background that isn't covered by the image be transparent, so whatever color is in the block below will show through. Replace SECTIONID with the proper ID from the next post, and http://imagenamehere with the URL of the image you want as the background.


SECTIONID{border: 1px solid black;}
    put a 1 pixel solid black border around a section. you can make the lines thicker, change the color, or make the line dotted or dashed instead of solid. Remember to replace SECTIONID with the proper ID from the next post.


#multimedia embed{height:##px; width:##px;}
    change the size of your multimedia section. Since most multimedias aren't square, I'd suggest picking either the height to width to start editing. White space will fill up the rest of the square that Gaia alots (they give you a 500x500 square I believe), and then once you get either your height or width set, you can tweak the other one until all the white is gone.

    v2 version of this code:
    .media_panel embed{width: ##px; height: ##px;}


#bar #onlineButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}
    change the image that shows when you are online. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels


#bar #offlineButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}
    change the image that shows when you are offline. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels


#bar #hiddenButton {background: transparent url(http://imagenamehere); width: 60px; height: 22px;}
    change the image that shows when you are hidden. Replace http://imagenamehere with your image. Change the height and width if you make your image bigger or smaller than 60x22 pixels


#bar #addButton, #bar #addButton a {background: transparent url(http://imagenamehere);}
    change the "Add to Friendslist" button


#bar #msgButton, #bar #msgButton a {background: transparent url(http://imagenamehere);}
    change the "PM" button


#bar #tradeButton, #bar #tradeButton a{background: transparent url(http://imagenamehere);}
    change the "Trade" button


#bar #ignoreButton, #bar #ignoreButton a {background: transparent url(http://imagenamehere);}
    change the "Add to Ignored" button


#bar #addButton a:hover {width: 33px; background: transparent url(http://imagenamehere) -22px -90px no-repeat;}
    Change the "Add to Friendslist" button when you hover over it


#bar #msgButton a:hover {width: 29px; background: transparent url(http://imagenamehere) -22px -90px no-repeat;}
    Change the "PM" button when you hover over it


#bar #tradeButton a:hover {width: 28px; background: transparent url(http://imagenamehere) -22px -90px no-repeat;}
    Change the "Trade" button when you hover over it


#bar #ignoreButton a {width: 34px; background: transparent url(http://imagenamehere) -22px -90px no-repeat;}
    Change the "Add to Ignored" button when you hover over it





two part code for making a new section

this goes in your about section:
    ]content for new block here
    creates an ordered list that contains the content you want in the new section

this goes in your code:
#about ol{format here}
    formats the ordered list you added to your about section

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Alright this is where things begin to get a bit more complicated. This post contains a list of the most commonly adjusted IDs and tags with Old School Gaia Profiles. IDs, classes and tags are all different ways of defining styles with CSS. The IDs (items starting with a #) and classes (items starting with a .) are Gaia Profile specific, which means you can't just take your Gaia Profile code and copy it to a webpage and have it work perfectly. But you can take the knowledge that you learn from this post on and put it to work on regular webpages as well as Gaia Profiles.

We'll start with just a list of what IDs the Gaia developers have defined. I'll list the ID or class in bold, and follow it with a description of what it is.

#site
    the entire site from the top navigation to the bottom links


#extendedProfileBody #header h1
    the main header (the one that has the little house in it normally)


#content
    the section below the header image but above the blue footer image


#content #sidebar
    the column containing the profile, details, and wishlist blocks (usually about 230 pixels wide and on the left by default)


#content #main
    the column containing the rest of the blocks (usually between 450 and 500 pixels wide and on the right by default)


#profile
    the section where your avy and your items are


#profile h2
    the part of the profile section where it says your name


#profile .caption
    the quote next to your avy


#profile .avatar
    your avy


#details
    the section where it says your last login, how many posts you have, etc


#details #info
    the left column of the details block, containing your location, occupation, etc


#details #stats
    the right column of the details block, containing your join date, last login, etc


#details h2
    the part of the details section where it says "details"


#wishlist
    the section where your wishlist is displayed


#wishlist h2
    the part of your wishlist section where it says "wishlist"


#about
    the section where it displays whatever is in your about section


#about h2
    the part of your about section where it says "about"


#friends
    the part of your section where it shows your friends


#friends h2
    the part of your friends section where it says "friends"


#friends #friendGroup li
    the small block containing your friend's name and avatar


#friends #friendGroup img
    your friend's avatar



#journal
    the part of your profile where it puts your journal posts


#journal h2
    the part of your journal section where it says "journal"


#multimedia
    the part of your profile where it puts your multimedia (if you have any)


#multimedia h2
    the part of your multimedia section where it says "multimedia"


#comments
    the part of your profile that contains your comments


#comments h2
    the part of your comments section where it says "comments"


#comments .caption
    the block that contains the comments with the avatar on the left side


#comments .caption2
    the block that contains the comments with the avatar on the right side


#comments .avatar
    the avatar on the left side of the comments


#comments .avatar2
    the avatar on the right side of the comments


#signature
    the part of your profile where it displays your signature


#signature h2
    the part of your signature section where it says "signature"


#footer
    the blue bar at the bottom of the screen that says "Copyright 2005 Gaia Interactive"


#corp
    the links at the bottom of the page that start with the ToS and end with the Gaia Store


.genmed
    the text above quotes and above code blocks


.code
    the formatting of any code block


.quote
    the formatting of any quote block





In addition to these IDs and classes, you have a few basic tags that you can override. Stuff that you do to these tags would work on any webpage (ie. they're not Gaia Profile specific):

body
    the entire body of the page


a:link
    the links that haven't been visited


a:hover
    the links that haven't been visited, but only when your mouse is over them


a:visited
    the links that have been visited





And now, as of August 1st, you have the ability to use CSS in v2 profiles.

Unfortunately, things weren't done in a way that was just as simple as Old School profiles.

Each block in your profile is assigned a unique number. You have to know that unique number to be able to do any adjusting to that particular block. There are only two ways I know of to be able to find the unique number for the block you want to edit. The first way is to go into the source code of your page and look for a line similar to this:

<div id="panel_6106873" class="panel custom_panel">

in that example, the block's ID would be panel_6106873.

This corresponds to something like the #profile or #wishlist IDs from above.

Yeah it's pretty tricky and kinda sucky.

BUT!

There are some things you can easily mess with, and these are some things that are QUITE important to some of the people who've been using v2 Profiles.

So lets get into listing those smile

#header a:link
    the links in the header (My Gaia, Community, Games, etc)


#header a:hover
    when you hover over the links in the header


#header a:visited
    the links in the header that have been visited


#column_1
    the left column. Base width is 230px


#column_2
    the middle column. Base width is 500px


#column_3
    the right column. Base width is 230px


.panel
    Class who's attributes edit every block on the page. If you set a background color for this class, every block will have that background color


.panel h2
    sets the style for all the headers. This is where you can change the background color of the headers and the font color of the headers and whatnot


Other things that can be edited are the body, html, h1, h2, h3, links, and many other basic HTML tags. I've included some of those above, and others can be found just by looking on the internet.

Basically, they designed v2 profiles so that you wouldn't need to use CSS, but since there are still some things that people would like to be able to edit themselves, they gave us the ability to still do it.

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Now that we've listed out what IDs you're probably gonna want to edit, we get into the real meat of things. This is where things start to get a bit tricky.

Now that you know what section ID does what, you need to redeclare and redefine what happens to the IDs you want to affect. Redeclaring and redfining looks just like regular declaring and defining.

We'll give an example of how to redeclare and redefine your about section, and then we'll break it down and explain what we did.

#about{background: transparent url(http://gaelicgirl.tripod.com/backgrounds/starclouds.jpg) top left no-repeat; border: 1px solid black; width: 300px; height: 200px; overflow:scroll; overflow-x: hidden; overflow-y: auto; position: absolute; top:100px; left: 200px;}
    what we've done here is given the about section a background that is aligned to the top left of the About box. It won't repeat, no matter how big the box is or the image is. We then gave the box a 1 pixel solid black border. Next we made the box 300x200 pixels, and gave it a scrollbar. It will only show the vertical scrollbar, the horizontal one won't show up. We then made the box so it would be absolutely positioned. Then we told it we want it to be 100 pixels from the top and 200 pixels from the left.


The declaration is just where we put #about{}

The definition is everything that goes inside the curly brackets. You can define many styles at one time, like we did. This makes your code take up less space, and for some people it actually makes it more readable. Were I doing this code for a webpage instead of a gaia profile, I'd probably make it look more like this:

#about{background: transparent
whiteurl(http://gaelicgirl.tripod.com/backgrounds/starclouds.jpg) top left no-repeat;
whiteborder: 1px solid black;
whitewidth: 300px;
whiteheight: 200px;
whiteoverflow:scroll;
whiteoverflow-x: hidden;
whiteoverflow-y: auto;
whiteposition: absolute;
whitetop:100px;
whiteleft: 200px;}

But since this is a Gaia Profile and you have a limited number of characters, it's ok to sacrifice the uber readablity. It also might help keep people from stealing your code if it's not really easy for them to see what you're doing xd


Just like you can define multiple styles in one declaration, you can declare multiple IDs that all have the same style. I use this alot in my profiles because I end up having alot of things not displayed.

I'll use a piece of my current code as an example here.

#comments .avatar, #comments .avatar2, .caption:before, .caption:after, .caption2:before, .caption2:after, #journal h3, #commonFriends, #signature, #profile h2, #bar #addButton, #bar #msgButton, #bar #tradeButton, #bar #ignoreButton, #extendedProfileBody #header h1, #corp, #footer, #profile ul.items {display: none;}
    Yeah it's a long one. I had alot of things that I didn't want to be displayed, so instead of making a few different lines for each thing, I put them all together, seperated by commas, since they all had the same style definition (display:none;) If you have multiple sections that will all have the same style definition, this is the best way to save on space in your profile. And you can define more than one style if you want. I could have just as easily used my definition from above with the declaration here, it just wouldn't have made much sense to do so xd

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Next we get into the style defintions. We showed you above how to declare a style, now we'll break down what goes into each style defintion.

Just like how you declare an ID and then define the style, you declare a style and define it's attributes.

with an ID you use the following format
    IDNAME{style1; style2; style3;}


with a style you use this format
    STYLENAME: attribute1 attribute 2 attribute 3;


Notice that with the ID, the definitions are inside curly brackets and seperated with semi-colons. But in the styles, the defintions come between : and ; and are seperated only with spaces. This is important to note. None of your attributes should have spaces in them. Most are one word and those that aren't have dashes in them usually. Also this is why when you set something like a width, you do it as 100px instead of 100 px.

So now it's time to show you what you can do. I'll list the most common stylenames and their most common attributes. I won't by any means list them all. You can find an alphabetical listing of most styles and their attributes here: http://www.blooberry.com/indexdot/css/propindex/all.htm

background: (this sets the background of the block you are defining)
  • transparent - makes it so there is no background image. whatever is below this block will show through in this block
  • #000000 or black - sets the background to a solid color. You can use any of the defined names such as black, white, red, yellow, or you can use a hex code such as #000000 for black, #ffffff for white, etc.
  • url(http://imagenamehere) - place an image as the background instead of a color, or in addition to a color. Replace http://imagenamehere with the actual location of the image you would like to use.

    use the following only if you use a background image
  • top - aligns the image to the top of the block
  • bottom - aligns the image to the bottom of the block
  • left - aligns the image to the left side of the block
  • right - aligns the image to the right side of the block
  • no-repeat - makes the image only appear once in the block, no matter how big the block is
  • repeat-y - makes the image repeat vertically (eg. the image will repeat on top of each other, but not side to side)
  • repeat-x - makes the image repeat horizontally (eg. the image will repeat side to side but not up and down)


border: (defines a border for the entire block. I use this alot, especially when I put a scrollbar in a section. if you want to just have a left, top, bottom or right border, put border-left or border-top and so on)
  • #px - replace # with the width of the border that you'd like. 1 is the most common, and anything above 3 tends to become obnoxious.
  • solid - makes the border line solid
  • dashed - makes the border a dashed line
  • dotted - makes the border a dotted line
  • #000000 or black - sets the color of the border. You can use any of the defined names such as black, white, red, yellow, or you can use a hex code such as #000000 for black, #ffffff for white, etc.


width: (sets the width of the block. especially useful if you want to use scrollbars)
    ##px - replace ## with the width in pixels of the block


height: (sets the height of the block. again useful if you want to use scrollbars)
    ##px - replace ## with the height in pixels of the block


position: (this is what you need if you want to move blocks out of their original space)
  • relative - blocks are moved in relativity to the blocks that are declared before them (from top to bottom and left to right in their default positions on Gaia profiles)
  • absolute - items are moved absolutely regardless of what the other blocks around them do

the following only affect stuff if you've declared a position (absolute or relative)
left: (moves the block over a designated number of pixels from the left)
    ##px - replace ## with however many pixels from the left you want the block to be

top: (moves the block down a designated number of pixels from the top)
    ##px - replace the ## with however many pixels from the top you want the block to be

margin-left: (moves the margin from the left)
    ##px - replace the ## with however many pixels from the left you want the block to be. A good alternative to absolute/relative positioning, especially for the about section if you make an extra section inside the about section that you want to move OUT of the about section

margin-top: (moves the margin from the top)
    ##px - replace the ## with however many pixels from the top you want the block to be. A good alternative to absolute/relative positioning, especially for the about section if you make an extra section inside the about section that you want to move OUT of the about section

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Classic Base CSS

*
{
margin: 0;
padding: 0;
}

ul li
{
list-style-type: none;
}

dl dt
{
font-weight: bold;
}

#site
{
width: 760px;
position: relative;
}

/* CONTENT */

#content
{
padding: 10px;
}

#content #sidebar
{
position: absolute;
width: 230px;
left: 10px;
}

#content #main
{
margin-left: 230px;
min-height: 500px;
height: 500px;
border-left: 2px solid #D8E9F3;
}

#content > #main
{
height: auto;
}

/* SECTION */

.section
{
padding: 0 10px 10px 10px;
font-size: 12px;
}

.section h2
{
font-size: 15px;
margin: 0 -10px 0 -10px;
height: 25px;
margin-bottom: 10px;
line-height: 25px;
text-indent: -5000px; /* PHARK */
}

.section .clear
{
clear: both;
}

.section .head
{
width: 48px;
height: 48px;
}

.section .torso
{
width: 96px;
height: 96px;
}

.section .body
{
width: 120px;
height: 150px;
}

.section .items li
{
display: inline;
}

.section .items li img
{
width: 30px;
height: 30px;
}

.section .online
{
background: url(images/status_online.gif) top left no-repeat;
}

.section .offline
{
background: url(images/status_offline.gif) top left no-repeat;
}

.section .hidden
{
background: url(images/status_hidden.gif) top left no-repeat;
}

.section .links
{
margin-bottom: 10px;
}

.section .links li
{
display: inline;
}

.section .date
{
text-align: right;
font-size: 10px;
font-weight: normal;
font-style: italic;
margin: 0 0 3px 3px;
}

/* CAPTION */

.caption
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption2
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption2:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption2:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption .message
{
position: relative;
left: -22px;
padding: 0 0 0 32px;
min-height: 45px;
margin: 0 -12px 0 0;
background: url(images/caption_ml.gif) top left no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption2 .message
{
position: relative;
right: -22px;
padding: 0 32px 0 0;
min-height: 45px;
margin: 0 0 0 -12px;
background: url(images/caption_mr.gif) top right no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
}

.caption > .message
{
height: auto;
}

.caption2 > .message
{
height: auto;
}

/* ACCOUNT */

form
{
margin: 0 150px;
}

textarea
{
width: 100%;
height: 100px;
}

.textfield
{
width: 100%;
}

label
{
font-weight: bold;
}

fieldset
{
margin-bottom: 10px;
}

#account ul li
{
display: inline;
}

/* Common Friends */

#commonFriends p {font-weight: bold;}
#commonFriends ul {font-size: 10px; margin-bottom: 10px;}
#commonFriends ul li {display: inline;}

/* PROFILE BAR */
#bar {display: block; height: 22px; margin-left: 12px; background: url(images/action_bar_frontcap.gif) top left no-repeat}
#bar li {float: left;}

#bar #onlineButton {width: 60px; background: transparent url(images/bar_btn_online.gif); text-indent: -5000px; height: 22px;}
#bar #offlineButton {width: 60px; background: transparent url(images/bar_btn_offline.gif); text-indent: -5000px; height: 22px;}
#bar #hiddenButton {width: 60px; background: transparent url(images/bar_btn_hidden.gif); text-indent: -5000px; height: 22px;}
#bar #addButton {background: transparent url(images/bar_btn_addfriend.gif);}
#bar #msgButton {background: transparent url(images/bar_btn_pm.gif);}
#bar #tradeButton {background: transparent url(images/bar_btn_trade.gif);}
#bar #ignoreButton {background: transparent url(images/bar_btn_ignore.gif);}

#bar a {display: block; height: 0; padding-top: 22px; color: #000; overflow: hidden;}

* html #bar a:link, * html #bar a:visited {height: 22px; height: 0;}

/* Add hover images here smile */
#bar #addButton a {width: 33px; background: transparent url(images/bar_btn_addfriend.gif) -22px -90px no-repeat;}
#bar #msgButton a {width: 29px; background: transparent url(images/bar_btn_pm.gif) -22px -90px no-repeat;}
#bar #tradeButton a {width: 28px; background: transparent url(images/bar_btn_trade.gif) -22px -90px no-repeat;}
#bar #ignoreButton a {width: 34px; background: transparent url(images/bar_btn_ignore.gif) -22px -90px no-repeat;}

#bar #addButton a:hover {background-position: 0 0; z-index: 50;}
#bar #msgButton a:hover {background-position: 0 0; z-index: 50;}
#bar #tradeButton a:hover {background-position: 0 0; z-index: 50;}
#bar #ignoreButton a:hover {background-position: 0 0; z-index: 50;}

* html #bar a:hover {height: 22px; height: 0;}

/* PROFILE */

#profile
{
background: #FFF;
position: relative;
}

#profile h2
{
background: #185BC2;
color: #FFF;
text-align: center;
font-size: 14px;
font-weight: bold;
/* UN-PHARK */
text-indent: 0;
}

#profile .avatar
{
position: relative;
}

#profile .caption
{
position: absolute;
top: 70px;
left: 110px;
width: 105px;
}

#profile .status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
margin-left: 10px;
}

/* DETAILS */

#details
{
background: #FFF url(images/details_header_tile.gif) top left repeat-x;
height: 1%; /* Holly Hack */
}

#details h2
{
background: url(images/details_header.gif) top left no-repeat;
}

#details #stats
{
float: right;
width: 100px;
margin: 0 0 10px 10px;
}

/* WISHLIST */

#wishlist
{
background: #FFF url(images/wishlist_header_tile.gif) top left repeat-x;
}

#wishlist h2
{
background: url(images/wishlist_header.gif) top left no-repeat;
}

#wishlist .questing
{
background: url(images/wishlist_questing.gif) top right no-repeat;
}

#wishlist .bought
{
background: url(images/wishlist_bought.gif) top right no-repeat;
}

#wishlist .donated
{
background: url(images/wishlist_donated.gif) top right no-repeat;
}

/* ABOUT */

#about
{
background: #FFF url(images/about_header_tile.gif) top left repeat-x;
height: 1%; /* Holly Hack */
}

#about h2
{
background: url(images/about_header.gif) top left no-repeat;
}

/* FRIENDS */

#friends
{
background: #FFF url(images/friends_header_tile.gif) top left repeat-x;
height: 1%; /* Holly Hack */
}

#friends h2
{
background: url(images/friends_header.gif) top left no-repeat;
}

#friends #friendGroup
{
margin-top: 10px;
}

#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
border-right: 2px solid #D8E9F3;
}

#friends #friendGroup li img
{
width: 96px;
height: 96px;
}

/* JOURNAL */
#journal {background: #FFF url(images/journal_header_tile.gif) top left repeat-x;}
#journal h2 {background: url(images/journal_header.gif) top left no-repeat;}

/* MULTIMEDIA */
#multimedia {background: #FFF url(images/multimedia_header_tile.gif) top left repeat-x;}
#multimedia h2 {background: url(images/multimedia_header.gif) top left no-repeat;}

/* COMMENTS */
#comments {background: #FFF url(images/comments_header_tile.gif) top left repeat-x;}
#comments h2 {background: url(images/comments_header.gif) top left no-repeat;}
#comments dl {padding-bottom: 90px;}
#comments dl dt {position: relative; padding-top: 10px;}
#comments dl dt.avatar img {position: absolute; left: 0;}
#comments dl dt.avatar2 div {text-align: right;}
#comments dl dt.avatar2 img {position: absolute; right: 0; width: 120px;}
#comments dl dd {margin: 0 120px 0 100px;}
#comments .delete {margin-top: 10px; text-align: right;}
#comments #pagination li {display: inline;}
#comments .admin li {text-align: right;}

/* SIGNATURE */
#signature {background: #FFF url(images/signature_header_tile.gif) top left repeat-x;}
#signature h2 {background: url(images/signature_header.gif) top left no-repeat;}
#signature p {text-align: center;}

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Blocks Base CSS

/* GENERAL */

*
{
margin: 0;
padding: 0;
}

ul li
{
list-style-type: none;
}

dl dt
{
font-weight: bold;
}

#site
{
width: 760px;
position: relative;
}

/* CONTENT */

#content
{
padding: 10px;
}

#content #sidebar
{
position: absolute;
width: 230px;
left: 10px;
}

#content #main
{
margin-left: 240px;
}

/* SECTION */

.section
{
margin-bottom: 10px;
padding: 0 10px 10px 10px;
font-size: 12px;
}

.section h2
{
color: #FFF;
font-size: 16px;
margin: 0 -11px 10px -11px;
height: 41px;
line-height: 25px;
text-indent: -5000px; /* PHARK */
}

.section .clear
{
clear: both;
}

.section .head
{
width: 48px;
height: 48px;
}

.section .torso
{
width: 96px;
height: 96px;
}

.section .body
{
width: 120px;
height: 150px;
}

.section .items li
{
display: inline;
}

.section .items li img
{
width: 30px;
height: 30px;
}

.section .online
{
background: url(images/status_online.gif) top left no-repeat;
padding-left: 20px;
}

.section .offline
{
background: url(images/status_offline.gif) top left no-repeat;
}

.section .hidden
{
background: url(images/status_hidden.gif) top left no-repeat;
}

.section .links
{
margin-bottom: 10px;
}

.section .links li
{
display: inline;
}

.section .date
{
text-align: right;
font-size: 10px;
font-weight: normal;
font-style: italic;
margin: 0 0 3px 3px;
}

/* CAPTION */

.caption
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption2
{
border: 2px solid #6F7074;
background: #FFF;
}

.caption:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption2:before
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_tl.gif);
background: url(images/caption_tr.gif) top right no-repeat;
line-height: .1;
}

.caption2:after
{
display: block;
margin: -2px -2px -2px -2px;
content: url(images/caption_bl.gif);
background: url(images/caption_br.gif) bottom right no-repeat;
line-height: .1;
}

.caption .message
{
position: relative;
padding: 0 0 0 32px;
min-height: 45px;
margin: 0 -12px 0 0;
background: url(images/caption_ml.gif) top left no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
left: -21px;
}

.caption2 .message
{
position: relative;
padding: 0 32px 0 0;
min-height: 45px;
margin: 0 0 0 -12px;
background: url(images/caption_mr.gif) top right no-repeat;
font-size: 13px;
font-weight: normal;
height: 45px;
right: -22px;
}

.caption > .message
{
height: auto;
left: -22px;
}

.caption2 > .message
{
height: auto;
}

/* Common Friends */

#commonFriends p {font-weight: bold;}
#commonFriends ul {font-size: 10px; margin-bottom: 10px;}
#commonFriends ul li {display: inline;}

/* PROFILE BAR */
#bar {display: block; height: 22px; margin-left: 12px; background: url(images/action_bar_frontcap.gif) top left no-repeat}
#bar li {float: left;}

#bar #onlineButton {width: 60px; background: transparent url(images/bar_btn_online.gif); text-indent: -5000px; height: 22px;}
#bar #offlineButton {width: 60px; background: transparent url(images/bar_btn_offline.gif); text-indent: -5000px; height: 22px;}
#bar #hiddenButton {width: 60px; background: transparent url(images/bar_btn_hidden.gif); text-indent: -5000px; height: 22px;}
#bar #addButton {background: transparent url(images/bar_btn_addfriend.gif);}
#bar #msgButton {background: transparent url(images/bar_btn_pm.gif);}
#bar #tradeButton {background: transparent url(images/bar_btn_trade.gif);}
#bar #ignoreButton {background: transparent url(images/bar_btn_ignore.gif);}

#bar a {display: block; height: 0; padding-top: 22px; color: #000; overflow: hidden;}

* html #bar a:link, * html #bar a:visited {height: 22px; height: 0;}

/* Add hover images here smile */
#bar #addButton a {width: 33px; background: transparent url(images/bar_btn_addfriend.gif) -22px -90px no-repeat;}
#bar #msgButton a {width: 29px; background: transparent url(images/bar_btn_pm.gif) -22px -90px no-repeat;}
#bar #tradeButton a {width: 28px; background: transparent url(images/bar_btn_trade.gif) -22px -90px no-repeat;}
#bar #ignoreButton a {width: 34px; background: transparent url(images/bar_btn_ignore.gif) -22px -90px no-repeat;}

#bar #addButton a:hover {background-position: 0 0; z-index: 50;}
#bar #msgButton a:hover {background-position: 0 0; z-index: 50;}
#bar #tradeButton a:hover {background-position: 0 0; z-index: 50;}
#bar #ignoreButton a:hover {background-position: 0 0; z-index: 50;}

* html #bar a:hover {height: 22px; height: 0;}

/* PROFILE */

#profile
{
background: #F3F6FF url(images/details_header_tile.gif) top left repeat-x;
border-right: 1px solid #354FA3;
border-bottom: 1px solid #354FA3;
border-left: 1px solid #354FA3;
}

#profile h2
{
background: url(images/details_header.gif) top left no-repeat;
text-indent: 45px;
}

#profile .avatar
{
position: relative;
}

#profile .caption
{
position: absolute;
top: 80px;
left: 110px;
width: 105px;
}

#profile .status
{
background: url(images/action_bar_frontcap.gif) top left no-repeat;
margin-left: 10px;
}

/* DETAILS */

#details
{
background: #F3F6FF url(images/details_header_tile.gif) top left repeat-x;
border-right: 1px solid #354FA3;
border-bottom: 1px solid #354FA3;
border-left: 1px solid #354FA3;
height: 1%; /* Holly Hack */
}

#details h2
{
background: url(images/details_header.gif) top left no-repeat;
text-indent: 45px;
}

#details #stats
{
float: right;
width: 100px;
margin: 0 0 10px 10px;
}

/* WISHLIST */

#wishlist
{
background: #F3F6FF url(images/details_header_tile.gif) top left repeat-x;
border-right: 1px solid #354FA3;
border-bottom: 1px solid #354FA3;
border-left: 1px solid #354FA3;
}

#wishlist h2
{
background: url(images/details_header.gif) top left no-repeat;
text-indent: 45px;
}

#wishlist .questing
{
background: url(images/wishlist_questing.gif) top right no-repeat;
}

#wishlist .bought
{
background: url(images/wishlist_bought.gif) top right no-repeat;
}

#wishlist .donated
{
background: url(images/wishlist_donated.gif) top right no-repeat;
}

/* ABOUT */

#about
{
background: #FFF3F3 url(images/about_header_tile.gif) top left repeat-x;
border-right: 1px solid #903535;
border-bottom: 1px solid #903535;
border-left: 1px solid #903535;
height: 1%; /* Holly Hack */
}

#about h2
{
background: url(images/about_header.gif) top left no-repeat;
}

/* FRIENDS */

#friends
{
background: #FEF2F8 url(images/friends_header_tile.gif) top left repeat-x;
border-right: 1px solid #972961;
border-bottom: 1px solid #972961;
border-left: 1px solid #972961;
height: 1%; /* Holly Hack */
}

#friends h2
{
background: url(images/friends_header.gif) top left no-repeat;
}

#friends #friendGroup
{
margin-top: 10px;
}

#friends #friendGroup li
{
float: left;
width: 110px;
height: 130px;
text-align: center;
border-right: 2px solid #FFDFF0;
}

#friends #friendGroup li img
{
width: 96px;
height: 96px;
}

/* JOURNAL */
#journal {background: #F9F3FF url(images/journal_header_tile.gif) top left repeat-x; border-right: 1px solid #6C33A1; border-bottom: 1px solid #6C33A1; border-left: 1px solid #6C33A1;}
#journal h2 {background: url(images/journal_header.gif) top left no-repeat;}

/* MULTIMEDIA */
#multimedia {background: #FFF6E0 url(images/multimedia_header_tile.gif) top left repeat-x; border-right: 1px solid #6F5001; border-bottom: 1px solid #6F5001; border-left: 1px solid #6F5001;}
#multimedia h2 {background: url(images/multimedia_header.gif) top left no-repeat;}

/* COMMENTS */
#comments {background: #FBF4EF url(images/comments_header_tile.gif) top left repeat-x; border-right: 1px solid #834115; border-bottom: 1px solid #834115; border-left: 1px solid #834115; height: 1%;}
#comments h2 {background: url(images/comments_header.gif) top left no-repeat;}
#comments dl {padding-bottom: 90px;}
#comments dl dt {position: relative; padding-top: 10px;}
#comments dl dt.avatar img {position: absolute; left: 0;}
#comments dl dt.avatar2 div {text-align: right;}
#comments dl dt.avatar2 img {position: absolute; right: 0; width: 120px;}
#comments dl dd {margin: 0 120px 0 100px;}
#comments .delete {margin-top: 10px; text-align: right;}
#comments #pagination li {display: inline;}
#comments .admin li {text-align: right;}

/* SIGNATURE */
#signature {background: #F0F8FC url(images/signature_header_tile.gif) top left repeat-x; border-right: 1px solid #176385; border-bottom: 1px solid #176385; border-left: 1px solid #176385;}
#signature h2 {background: url(images/signature_header.gif) top left no-repeat;}
#signature p {text-align: center;}

Pandilicious's Husbando

Invisible Member

39,510 Points
  • Citizen 200
  • Person of Interest 200
  • Winged 100
Offline
Grunny Base CSS

coming soon
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
Play with GCash
Play with Platinum
More
//
//

Join Now

// //

Have an account? Login Now!

//
//