EDIT 15 Sept 06: Hojeez, 10 months after writing this people are still reading it! That's fantastic, although I've made 2 other profiles since and the one this refers to doesn't exist anymore and wasn't particularly impressive anyway Please keep that in mind if you're using this tutorial, and I'll write another one for my current profile soon!
EDIT: Due to a few incidents of people using my entire theme on their profile, I've taken out the urls to my images and colours. I'm sad that people would do this; please respect the work that people put into these profile themes.
Okay I was asked by a few people to explain my code, so hopefully people will find this useful ^_^ Feel free to use any
code from my profile theme, but please do not use any of the images.
A few definitions first...
Basics
CSS 'rules' can be applied to different HTML tags to change the way they appear. Besides the basic HTML tags, you can also specify an id (using 'id=...') for specific sections, and a class (using 'class=...') for different sections that share some things about the way they're displayed. Any tag can have an id, a class or both, so if you look in the HTML code for the Profile page, you might see something like this:
Code:
<div id="about" class="section">
That means that that section of code has an id of 'about' and is part of the 'section' class.
We can't edit the HTML for the profile pages, but its still good to know so the CSS makes sense
Now, to specify styles for a tag in CSS, you'd write:
Code:
TAGNAME {
styles here;
}
If its an id you'd add a hash to the front:
Code:
#TAGNAME {
styles here;
}
And if its a class you'd add a dot to the front:
Code:
.TAGNAME {
styles here;
}
Each style rule should go on a new line, and must end with a semi-colon.
So, onto the real code. Remember, you'll need to replace the parts in capitals ('IMAGE URL' and 'COLOR') with your own image urls and colours.
Header
This is the header that appears under the logo and navigation bars, and shows the current user's avatar.
Code:
#extendedProfileBody #header h1 {
background-image: url(IMAGE URL);
height: 152px;
}
All I've done here is set the background image to my header, and changed the header's height. This is important if your
header image is larger or smaller than the default size, otherwise it will be cut off or have a large gap.
Content
The 'content' section is everything under the navigation down to before the footer; its the main content of the page.
Code:
#content {
background: #COLOR url(IMAGE URL) bottom left no-repeat;
}
This changes the background of the whole Content section. The first value changes the background colour, the second puts an image onto the background, 'bottom left' says where on the page the image should go, and 'no-repeat' stops it from tiling.
Code:
#content a {
color: #COLOR;
text-decoration: none;
}
#content a:hover {
color: #COLOR;
text-decoration: underline;
}
This part changes all links (<a> tags) within the Content section. The first part sets the text colour and turns off the default underlines. The second part changes what colour the text displays as when the mouse is hovering over it, and turns on an underline.
Section (general)
'Section' is a class used for all the main sections in the profile; this means that the About, Comments, etc boxes will be affected by this bit of code.
Code:
.section {
border: 0px 1px 1px 1px;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
}
.section h2 {
font-size:0px;
height: 83px;
}
The first part affects sections in general. Looking at it bit by bit:
Code:
border: 0px 1px 1px 1px;
... sets the border widths for all sections. The first value is for the top border, second is for the left, third is right, fourth is bottom. You can set different widths this way; I've just set the top one to 0 so it doesn't appear at all, with 1px borders on all other sides.
Code:
font-size: 11px;
... changes the font size for all text within a section.
Code:
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
These bits I just added in so all my things line up properly... 'margin' is the space outside of an object, and 'padding' is the lining inside an object. I've set the top padding to 0 so my headings sit at the top of each section.
Code:
.section h2 {
font-size:0px;
height: 83px;
}
The <h2> tag is around all the headings of the sections. I've made my own headings and don't want these in there, so I've set the font-size to 0. I have put background on them though, so I've set the height to the height of my background images so they don't get cut off.
Profile
Okay, onto the specific sections. If you want the borders, backgrounds, headings etc. to appear the same in each section you can just specify everything in the general section part, but I have different headings for each of mine so I do them all separately.
Code:
#profile {
background: #COLOR url(IMAGE URL) top left no-repeat;
border-color: #COLOR;
}
#profile h2 {
background: url(IMAGE URL) top left no-repeat;
}
This is the basic parts for my Profile section (the part with your own avatar and items). In the first part I've put on a background colour and image like before, and chosen a background colour.
The second part changes how the <h2> tag is displayed, which is at the top of the section. I'm using an image I created as a heading, so I've specified it as the background. Image headings for the left hand column sections need to be less than 230px wide.
Code:
#profile .caption {
display: none;
}
Still in the Profile section... this pertains to anything with a class 'caption' withing the 'profile' section, which is the speech bubble with my quote. I don't want it to appear at all, so I've set it to display: none. You can do this with any section you don't want to appear on the screen.
Code:
#profile ul {
background-color: #COLOR;
padding: 2px;
border: 3px double #COLOR;
}
This part pertains to any unordered-list tags (ul) in the profile section, which in this case is the items I'm currently wearing, displayed under my avatar. Just changed the background and padding, and added a border. 'double' makes it a double border; 'single' would make it a single solid border, and 'dotted' would make a dotten border.
Details
Code:
#details{
border-color: #COLOR;
color: #COLOR;
background: #COLOR url(IMAGE URL) bottom left no-repeat;
}
#details h2 {
background: url(IMAGE URL) top left no-repeat;
}
Pretty much the same as for Profile, but also changed the colour of the text using:
Code:
color: #COLOR;
Wishlist
Code:
#wishlist{
border-color: #COLOR;
background: #COLOR url(IMAGE URL) bottom left no-repeat;
}
#wishlist h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same as for Profile, different header image.
About
Code:
#about {
background-color: #COLOR;
border-color: #COLOR;
background: #COLOR url(IMAGE URL) top right no-repeat;
}
#about h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same as Details, different header image.
Friends
Code:
#friends {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#friends h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same as the other sections, different header image.
Code:
#friends #friendGroup li {
border-right: 1px dotted #COLOR;
background: url(IMAGE URL) bottom center no-repeat;
}
Changes how the avatars in the Friends section appear. I've put a dotted border on the right of each one which acts as a divider, and put a graphic behind each avatar.
Journal
Code:
#journal {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#journal h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same as for the other sections
Code:
#journal h3 {
display: none;
}
This is for the name of your journal. I don't want mine to appear, so I 'disappeared' it with display: none;
Code:
#journal p {
margin-top: 10px;
text-align:center;
}
This is for the description of your journal. I found it too close to my journal image, so I moved it down a little by making margin-top larger, and made the text center aligned.
Code:
#journal ul {
padding-top: 15px;
margin-left: 25px;
}
The list of your most recent journal articles. Just added some space around it with padding and margins.
Code:
#journal li {
padding-bottom: 5px;
list-style-type: circle;
}
Each item in the list of your most recent journal entries. The padding-bottom spaces them out a bit more, and the list-style-type puts the little circle in front of each one. Instead of circle you could make it square, disc, or none, which is the current default.
Comments
Code:
#comments {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#comments h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same as the others again.
Code:
#comments dl dt.avatar img {
background: url(IMAGE URL) left no-repeat;
padding-left: 3px;
margin-bottom: 2px;
}
#comments dl dt.avatar2 img
{
background: url(IMAGE URL) bottom right no-repeat;
_margin-right: 20px;
margin-bottom: 2px;
}
This is for the avatars of people who make comments on your page. The first bit is for avatars on the left, the second for avatars on the right. I've put an image behind them, and used margins and padding to position them where I want them to be.
This:
Code:
_margin-right: 20px;
... is an IE hack, meaning its a style only read by Internet Explorer. It's useful because different browsers display CSS differently. In IE my right avatars where shifted too far to the right, so I added a margin to shift them back. If you want something to only work in IE, just put an underscore at the front of it.
Signature
Code:
#signature {
background-color: #COLOR;
border-color: #COLOR;
}
#signature h2 {
background: url(IMAGE URL) top left no-repeat;
}
Same again.
Captions (aka speech bubbles)
The 'caption' class is used for all speech bubbles in the page, such as the ones in the Comments section. You need to specify styles for the left and right hand captions separately.
Code:
.caption {
border: 1px solid #COLOR;
}
.caption2 {
border: 1px solid #COLOR;
}
I didn't like the chunky grey border, so this changes it to a 1px border. I've used different colours for the left and right captions.
Code:
.caption:before {
content: url(IMAGE URL);
background: url(IMAGE URL) top right no-repeat;
}
.caption2:before {
content: url(IMAGE URL);
background: url(IMAGE URL) top right no-repeat;
}
This changes the top of the caption. If you want rounded borders, make the images and put the top left one in the first url, an top right in the second. If you're happy with the hard corners, just leave the url blank ( url() ), to get rid of the default Gaia corners.
Code:
.caption:after {
content: url(IMAGE URL);
background: url(IMAGE URL) bottom right no-repeat;
}
.caption2:after {
content: url(IMAGE URL);
background: url(IMAGE URL) bottom right no-repeat;
}
Same thing, but for the bottom corners. Left first, then right.
Code:
.caption .message {
background: url(IMAGE URL) top left no-repeat;
font-size: 11px;
}
.caption2 .message {
background: url(IMAGE URL) top right no-repeat;
font-size: 11px;
}
This is the little pointer bit on the speech bubble. Just change the url to your own image.
The Full Code
So here's my finished product! If you're using this to work on, please take out the links to my images when you put it up so it doesn't take up my bandwidth ~_~ Thankyou!
Code:
/* custom layout made by Chisa. Feel free to take any code, just don't take my images ^_^ */
/* MAIN HEADER --------*/
#extendedProfileBody #header h1 {
background-image: url(IMAGE URL);
height: 152px;
}
/* CONTENT -------- */
/* styles for the content dive around all the other sections */
#content a {
color: #COLOR;
font-size: 11px;
text-decoration: none;
}
#content a:hover {
color: #COLOR;
text-decoration: underline;
}
#content {
background: #COLOR url(IMAGE URL) bottom left no-repeat;
color: #COLOR;
}
/* SECTION ------ */
/* styles across all sections */
.section {
border: 0px 1px 1px 1px;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 10px 10px 10px;
}
.section h2 {
font-size:0px;
height: 83px;
text-indent: -3000px;
}
/* PROFILE --------- */
/* styles for the Profile section */
#profile {
background: #COLOR url(IMAGE URL) top left no-repeat;
border-color: #COLOR;
}
#profile h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* don't display speech bubble */
#profile .caption {
display: none;
}
/* current items list */
#profile ul {
background-color: #COLOR;
padding: 2px;
border: 3px double #COLOR;
}
/* DETAILS --------- */
/* styles for the Details section */
#details{
border-color: #COLOR;
color: #COLOR;
background: #COLOR url(IMAGE URL) bottom left no-repeat;
}
#details h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* WISHLIST --------- */
/* styles for the Wishlist section */
#wishlist{
border-color: #COLOR;
background: url(IMAGE URL) bottom left no-repeat;
}
#wishlist h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* ABOUT ------------ */
/* styles for the About section */
#about {
background-color: #COLOR;
border-color: #COLOR;
background: #COLOR url(IMAGE URL) top right no-repeat;
}
#about h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* FRIENDS ---------- */
/* styles for the Friends section */
#friends {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#friends h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* avatars */
#friends #friendGroup li {
border-right: 1px dotted #COLOR;
background: url(IMAGE URL) bottom center no-repeat;
}
/* JOURNAL ---------- */
/* styles for the Journal section */
#journal {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#journal h2 {
background: url(IMAGE URL) top left no-repeat;
}
#journal h3 {
display: none;
}
#journal p {
margin-top: 10px;
text-align:center;
}
#journal ul {
padding-top: 15px;
margin-left: 25px;
}
#journal li {
padding-bottom: 5px;
list-style-type: circle;
}
/* COMMENTS ---------- */
/* styles for the Comments section */
#comments {
background-color: #COLOR;
border-color: #COLOR;
font-size: 11px;
}
#comments h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* avatars */
#comments dl dt.avatar img {
background: url(IMAGE URL) left no-repeat;
padding-left: 3px;
margin-bottom: 2px;
}
#comments dl dt.avatar2 img
{
background: url(IMAGE URL) bottom right no-repeat;
_margin-right: 20px;
margin-bottom: 2px;
}
/* SIGNATURE ---------- */
/* styles for the Signature section */
#signature {
background-color: #COLOR;
border-color: #COLOR;
}
#signature h2 {
background: url(IMAGE URL) top left no-repeat;
}
/* CAPTIONS ---------- */
/* styles for all speech bubbles in Comments section */
.caption {
font-size: 11px;
border: 1px solid #COLOR;
}
.caption2 {
border: 1px solid #COLOR;
}
.caption:before {
content: url(IMAGE URL);
background: url(IMAGE URL) top right no-repeat;
}
.caption:after {
content: url(IMAGE URL);
background: url(IMAGE URL) bottom right no-repeat;
}
.caption2:before {
content: url(IMAGE URL);
background: url(IMAGE URL) top right no-repeat;
}
.caption2:after {
content: url(IMAGE URL);
background: url(IMAGE URL) bottom right no-repeat;
}
.caption .message {
background: url(IMAGE URL) top left no-repeat;
font-size: 11px;
}
.caption2 .message {
background: url(IMAGE URL) top right no-repeat;
font-size: 11px;
}
Thats it! Have fun, and don't forget to experiment!
View User's Journal
editing profile
 |
