~NEW CSS CODES FOR EXTENDED PROFILES~
DO NOT SEND ME PM?S!!! My inbox is getting Too full and I?m losing important messages. You send me a PM I WILL ignore it. I am no longer accepting any PM?s regarding this tutorial unless you are asking about custom graphics. Please post ALL questions in the thread.
If you have a useful site or tip or code I don?t have listed here you may PM it to me.
Thank you ^.^
1) Go to your profile, go to the extended profile set-up page click on "theme."
This is where you enter the code. You can put the code over any of the four themes:: Classic, Blocks, Grunny, and Custom. Please note that mine is overlayed over "blocks."
Therefore image size and a few other minute details may vary w/ which one you are using.
For example, I have noticed when you do "custom" it moves the tables together so there is not space between them.
I didn't really create any of these codes, they are accumulated codes I've found from other people and by experimenting. You MAY post questions in here, however, if it's not on the list I might not be able to answer it.
2) Some basic coding::
When putting in images you can use repeat, no-repeat, fixed right and fixed left.
Repeat will of course tile the image. No-repeat will not tile the image.
If you are NOT repeating and your image does not fill the page you will want to say whether it is "fixed left" or "fixed right." Most people fix their images left, which means it starts at the top left corner and goes out from there.
When doing table borders you can use the following to determine their look::
"dashed, thin dashed, thick dashed, thin dotted, dotted, thick dotted, thin solid, solid, thick solid" (there may be a few more I do not know of.)
When changing font colors you will use "hex codes." These are a string of six digits (numbers and letters) which correspond to a certain color. A good place to find the hex code for a certain color is:
www.morecrayons.com
The hex code is pre-fixed by a "#" sign, unless you are making it transparent. In which case you simply fill in the space where the code would normally be with "transparent"
no "#" sign needed.
Text-decoration: Used primarily with links though I believe it can be used in text as well.
There are a few different types:: "none, underlined, strikethrough" (strikethrough might be "strikeout" I'm not entirely sure here.)
You will see these in the codes, note that whenever you see one of these basic codes you can replace it with one of the others in the same group.
3) Putting a Background On Your Profile.
There are two ways to do this. Go to your profile ? you see the right line where the tables go unto and how there is "grey space" to the right of that?
You can either have a bg that fills in up to that line or one that goes all the way to the edge of the page (by the scrollbar). (As far as I know you cannot remove that line, BUT I?ve seen someone do it, unfortunately I do not know the code for it.)
A) This will put in a bg color or image up to the right border. (before the grey space)
[code:1]#content
{
background: #ffddee;
}
[/code:1]
Changes the background color.
[code:1]
#content
{
background: #000000; url('http://your image url here') no-repeat fixed left;
}[/code:1]
Adds a background picture.
B) This will place a bg over the entire page. Note that you must have the code to remove the content background for the image to show through completely.
[code:1]body
{
background: #000000 url('http://your image url here') no-repeat fixed left;
}[/code:1]
Adds background to the ENTIRE page (including that little grey space to the right.)
[code:1]body
{
background: #000000
}[/code:1]
Changes background color for ENTIRE page.
[code:1]#content
{
background: none;
}[/code:1]
Removes the background in front of the background (This is primarily used if you are putting a bg on the entire page.)
4) Changing the Header.
[code:1]#extendedProfileBody #header h1
{
background: url('http://your image url here');
}
[/code:1]
Changes the top header image where it shows the avi of the person viewing your profile.
5) Changing Font Color and Type.
There are different sections for which you can change the font, here are a few of them.
[code:1].section h2
{
color: #0044cc;
}[/code:1]
Changes the font color in ALL headers.
[code:1]#profile h2
{
color: transparent;
}[/code:1]
Changes the font to transparent in a specific header. (or you can replace transparent with "#000000" to change the font color.)
[code:1]#profile
{
color: #000000;
}[/code:1]
Changes the font color for a specific box, in this case the "profile" box where your avatar and items are shown.
[code:1]body
{
font-family: arial;
font-size: 12pt;
color: #000099
}[/code:1]
Likewise you could do the above (I believe, I haven't tested it out yet though) to change the font type, size, and color for the whole page.
[code:1]#profile h2
{ font-type: helveltica; }[/code:1]
Changes the font type for a specific header, in this case the "profile" header.
6) Erasing Your Avatar.
There are a few different codes from this. Some will not be viewable with some servers, and some have their own little glitches, so test them out first to see which is best for you.
[code:1]#profile
{
background: #000 url() no-repeat left center;
}
#profile .avatar
{
opacity:0;
}[/code:1]
Deletes the picture of your avatar.
[code:1]
#profile
{
background: #000 url('your image url here') no-repeat left center;
}
#profile .avatar
{
filter:alpha(opacity=0);
opacity:0;
}
[/code:1]
Deletes your avi picture and replaces it. However, you must note that your new picture is actually your profile bg picture, just centered. (or not centered if you have the image size worked out right.) Similar to my profile bg, the moving doll is actually part of the bg picture. Thank you sporkmaster5000 for the code ^.^
7) Replacing Your Avi with a New Picture.
[code:1]#profile h2
{
background: url('your new avi image') no-repeat left bottom; height: 190px;}
#profile img.avatar{width:0px; height:0px;}
#profile #bar
{
margin-top: 10px;
}
#profile .caption
{
top: 50px;
}[/code:1]
Replaces your avi picture. However, this will move the "online status" bar below the avi picture and you CANNOT have a image for the profile header. Meaning no code that says "#profile h2 etcetcetc" besides this one or it won?t work.
8 ) Putting an Image In Your Quote Or Comment Area.
[code:1]#profile .caption
{
width: 100px;
height: 67px;
background:
url('http://your image url here')
#FFFFFF
center no-repeat;
}[/code:1]
Puts a picture in the caption. (Or background if you remove the "center no-repeat"
wink Please note that if your image is taller than the height of the normal quote bubble you will need to change the height specification.
[code:1]#profile .caption
{ color: #FFFFFF; }[/code:1]
Changes caption font color to white (this is done because you cannot just erase your caption text and then put a picture, it won?t show. this enables you to put a picture without any text showing through) Or you can replace the "ffffff" with a different hex code to change the font color.
[code:1]
#profile .caption
{ background: #FFFFFF; }[/code:1]
Changes the bg color of the profile quote box.
[code:1]
#comments .caption
{ background: #FFFFFF; }[/code:1]
Changes the bg color of the comment box on one side.
[code:1]
#comments .caption2
{ background: #FFFFFF; }[/code:1]
Changes the bg color for comment boxes on the other side.
[code:1]
#comments .caption
{ background: #FFFFFF; url('your img url here') no-repeat;}
#comments .caption2
{ background: #FFFFFF; url('your img url here') no-repeat;}[/code:1]
Changes background images for both sides of comment boxes. (You can have diff. images for each size if you feel so inclined.)
9) Changing The Header Images of the profile, about, wishlist, etc boxes.
[code:1]#profile h2
{
background: url(http://your image url here) top left no-repeat;
text-indent: 150px;
}[/code:1]
Changes the header img. (likewise you can do the same for: details, wishlist, about, friends, journal, comments, signature. just replace the "profile" with the section you wish to place the picture in.)
If you wish to simply change the color erase the "url-----" part and replace the "000" with the hex code for the color you wish to use.
[code:1].section #profile,#details,#journal,#friends,#comments,#multimedia,#wishlist,#signature,#about h2
{
background: url(your image url here) top left no-repeat;
}[/code:1]
Changes the header image for all sections. Thank you sporkmaster5000.
10) Changing the Background of the profile, about, wishlist, etc Boxes.
[code:1]#profile
{
background: #000
url(http://your image url here)
}[/code:1]
Changes the background picture in the profile section (the only reason you see that animated pic. where my avi would normally be is because it is PART of the background picture) [likewise you can do the same for: details, wishlist, about, friends, journal, comments, signature. just replace the "profile" with the section you wish to place the picture in.)
If you wish to simply change the color erase the "url-----" part and replace the "000" with the hex code for the color you wish to use.
11) Adding a Picture Behind Your Commentors.
Please note that you must fiddle with the image size so that the left side (I believe it is) doesn?t overlap the comment boxes.
[code:1]#comments dl dt.avatar img
{
background: url('http://your image url here');
}
#comments dl dt.avatar2 img
{
background: url('http://your image url here');
}[/code:1]
Places an img. behind your commentator?s avatars.
The one w/out a number is the left side and the right side is the one with "2" in it. You CAN use different pictures for each side if you feel like it ^.^
12) Erasing the white space between your friends.
[code:1]#friends #friendGroup li{border-right:0px;}[/code:1]
Erases the white padding inbetween friends on your friendslist space.
13) Changing the Border Color of Your Tables
[code:1]#profile
{border-color: #FD525B;}[/code:1]
Changes the border color. (ie: same for: details, wishlist, about, friends, journal, comments, signature)
14) Changing The Links Colors/Types
Link ? is what someone will see when they have not touched any of the links.
Visited ? is the color that will show after they've been to that link
Active ? is the color of the link while the page is changing/loading.
Hover ? is the color of the link when the mouse is over it.
[code:1]a:link { color:#0044cc; font-weight: bold; text-decoration: none}
a:visited { color: #0044cc; font-weight: bold; text-decoration: none}
a:active { color: #F9121E; font-weight: bold; text-decoration: none }
a:hover { color: #F9121E; font-weight: bold; text-decoration: underline}[/code:1]
Changes the link color, weight, and text-decoration of the whole page.
[code:1]
#profile
{
a:link (color:#0044cc; font-weight: bold; text-decoration: none);
a:visited (color: #0044cc; font-weight: bold; text-decoration: none);
a:active (color: #F9121E; font-weight: bold; text-decoration: none);
a:hover (color: #F9121E; font-weight: bold; text-decoration: underline):
}[/code:1]
Changes the link color, weight, and text-decoration for a certain section. (I haven't tested this code out yet so I?m not entirely sure I have it right.)
15) Changing the Border Style.
[code:1]#signature
{border: thin dotted #FD525B;}[/code:1]
Makes the border dotted. (Also: "dashed", "thick dotted", etc etc)
16) Replacing Your Cursor Image
[code:1]
#extendedProfileBody{cursor:url(http://your.website.here/file.cur);}[/code:1]
Replaces the cursor with your own cursor image!!! (I have not tested the cursor one's out, they may or may not work.)
[code:1]body
{
cursor: url('CurserURL');
}[/code:1]
Apparently this will also replace the cursor.
17) Replacing the Logo Bar.
[code:1]#logo form {opacity:0;}
#logo img {opacity:0;}
[/code:1]
Makes the topmost logo bar vanish. (The one that says "username?."
wink
Thanks, milieudesanges for the tip.
[code:1]#logo {background: url('your url here') repeat;}[/code:1]
Places an image over the old logo bar. (Repeat only if you desire. Again, thanks milieudesanges ^.^ )
18 ) Getting Rid of Those Annoying White Squares In Your Comment Boxes
So what this does is make the comment and quote boxes squared and removes those little white corners. So now you can fill it with a color and not have the white corner above it.
[code:1]
.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption. message,.caption2 .message
{
background:none;
}[/code:1]
Simply squares and removes the white corners w/out replacing bg color of the comment and quote box.
[code:1]
.caption,.caption2
{
background: transparent;
}[/code:1]
Makes the bg of the comment and quote area transparent.
[code:1]
.caption,.caption2
{
color: #000000;
background: #000000;
}
.caption:before,.caption:after,.caption2:before,.caption2:after
{
display:none;
}
.caption:message,.caption2:message
{
background:none;
}[/code:1]
Changes the font color and bg color of the comment boxes. To change the quote box bg color use the below code::
[code:1]
#profile .caption
{
color: #000000;
background: #000000;
}[/code:1]
For some reason you cannot have a bg image AND bg color ~.~
Thanks again to sporksmaster5000 for all these lovely codes ^.^
19) Removing Portions Of Your Profile
Note:: I'm not entirely sure that it is OK to remove these portions, but here's the code.
[code:1]#journal
{
display:none;
}[/code:1]
Possibily doesn't display journal? O.o
Thanks sporkmaster50000
[code:1]#profile ul.items
{
display:none;
}[/code:1]
Removes items underneath your avatar.
Thanks white leo.
20) Makes Tables Transparent
[code:1]table, #profile, #header, #content, #details, #main, #journal, #multimedia, #signature, #wishlist, #comments{background: transparent;}[/code:1]
Note that you can also take one of the sections out if you wish it to not be transparent.
Thank you Syntome for the code ^.^
Image Sizing::
(I have NOT currently figured out the exact image sizes, but here are some approx.)
Header Image:: 760x150
Profile BG:: 230x300
(Wishlist & Details BG:: width - 230, height varies)
About, Journal, Friends, Comments, Sig. BG:: width 550, height varies
Profile, Details, Wishlist Header Img:: 230x41 (I think the height is actually a little taller than that, and the width I believe is actually 500 - it just auto-crops it, so unless you want a 'snug' image it doesn't matter if you're a little over)
About, Journal, Friends, Comments, Sig. Header Img:: 500, height? (I have 23, it might be larger than this)
For the Headers the height is taller in other themes: classic, grunny, and custom all seem to have a slightly larger header height than blocks does.
NOTE:: if you are using photobucket it will resize your ".png" files!! It won't resize ".jpg" (unless they're insanely large files!
[~Music.Is.My.Life~]
200
100
100
