ok all of the following was provided by Sakura(please do not bother her with pms) god knows I do it enough xd if you need any help post it here and we can go from there biggrin Be sure to select "Blocks" as your theme since these overrides were made specificially for that one.
To change the background color
#content
{ background-color: #FAFFC6; }
To Change the Top Profile Banner
#extendedProfileBody #header h1
{ background: url('Insert Banner Url Here'); }
The dimensions for the banner are 760x150 pixels
heart I would recommend saving your graphics as a .png file since I find it has the best compression. ^^;
Changing the Name/Avatar Box
#profile h2
{ background: url(Insert Name Header Url Here) top left no-repeat; }
#profile
{ background: url(Insert Box Background URL Here) bottom left no-repeat; border: 3px double #679F64; }
#profile .avatar
{ opacity:0; }
#profile .caption
{ position: absolute; top: 75px; left: 105px; width: 110px; }
#profile #bar
{ height: 10px; margin: -10px 10px;}
The dimensions for the name header is 230x40 and it's the same dimensions for the Details and Wishlist Headers, too. For the background, the dimensions are 223x272 and is the same for the Details and Wishlist backgrounds as well.
The #profile .avatar is used to hide your avatar if the background you used has art, an avatar edit, bunny, emote...etc If you're just using a plain background, then you can leave it off if you want it to display your current avatar.
The #profile .caption code is so you can adjust the width of the speech bubble and move it left/right, up/down. The pixel dimensions represent how far the bubble is away from the left side and the top of the page, so to move down you put something like top: 85px and subtract from that if you want to move the bubble up. Same goes for the left dimensions -- ie. 120px to move it more to the right or 90 to move it closer to the left.
#profile #bar is to adjust the bar that has your online status, send trade, PM, add friend etc... up and down in the profile box. The more negative the first number after 'margin:' the closer it is to the header bar.
Changing the Details Box
#details h2
{
background: url(Insert Details Header URL Here) top left no-repeat;
}
#details
{
background: url(Insert Box Background URL Here) bottom left no-repeat;
border: 3px double #Hex Code for Border Color;
}
You can use the same background as the Name box for the Details box if you don't have an avatar edit or art on it. Otherwise you may want to make an abstract background without the art that matches the first box. ^_^
Changing the Wishlist Box
#wishlist
{
background: url(Insert Box Background URL Here) bottom left no-repeat;
border: 3px double #Hex Code for Border Color;
}
#wishlist h2
{
background: url(Insert Wishlist Header Url Here) top left no-repeat;
}
Unless you want all three boxes to have different backgrounds, you can just put in the same abstract background you made for the Details box. : )
Changing the About Me box
#about
{
background: #Hex Code for Background Color url(Insert Box Background URL Here) bottom right no-repeat;
color:: #Hex Code for Font Color;
border: 3px double #Hex Code for Border Color;
height: 1%;
}
#about h2
{ background: url(Insert About Me Header URL Here) top left no-repeat; }
Same as the sidebars, only with larger dimensions. x3 The headers are 500x40 pixels in size and it's the same dimension for the Wishlist, Friends, Journal, Comments and Sig headers too. The background image is optional and if you would rather have a flat color you can just replace:
Quote:
background: #Hex Code for Background Color url(Insert Box Background URL Here) bottom right no-repeat;
with:
Quote:
background: #Hex Code for Background Color;
The background dimensions(if you're going to use any) is 599x300 pixels. I would recommend either a transparent background or one that easily fades into the background color of the profile page. You could probably set the dimensions bigger if you're lazy about changing the background color, but that's up to you.
Reply
