Soup up your profile page w/ CSS

Tom · #1 11-17-2006, 01:45 PM

You can view my profile here. You can make yours look exactly like mine if you go into your user cp >> edit options >> then scroll to the bottom of the page and cut and paste this code:

Code:

Body{background-attachment: 
fixed; background-position: top center; background-image: url(http://img380.imageshack.us/img380/989/backgroundcz1.jpg);}


.page {background:transparent;color: #000000;}
.tcat {background:transparent;color: #000000;}
.thead {background:transparent; color: #000000;}
.tborder {background:transparent;}
.tfoot {background:transparent;}
.alt2, .alt2Active {background:transparent;color: #000000;}
.alt1, .alt1Active {background:transparent;color: #000000;} 
.panelsurround {background:transparent;} 
.panel {background:transparent;}

into the big text area called CSS.

You could always make yours look just like mine, but you might have more fun looking for background images here and then use this to host the image (remember to check the resize box to a 17-19 inch monitor and check 'remove size/resolution bar from thumbnail?' box so you don't end up w/ that on your background). Cut and paste the 'Direct link to image' at the bottom of the next page (after you click 'host it!') and then put it where it says here:

Body{background-attachment:
fixed; background-position: top center; background-image: url( here );}

Have fun with it! You can change 'top center' to 'bottom right' or whatever.

Here's some possible background images and the code you would use to make it your background:

Spoiler:

Just a pink girly theme

Spoiler:

added 11/28/06

Spoiler:

New theme for

s like me! Added 11/29/06

Spoiler:

I'll add more as I come up with them to this post. . . . . so, stay tuned!

The 'color: #000000;' is for the color of the text. You can also change the background color or any of these elements by adding 'background: #FFF000;' which would make the element yellow. If you don't know what you're doing and have absolutely no idea what to do, then just hold back, and eventually I plan on adding a simple point and click thing so you can just say "make this yellow and make this opacity 80% and use this as my background image." Till then, learn CSS.

The Waiting Hurts · #2 11-17-2006, 01:59 PM

Great! Just when I thought I'd come into work and have a relaxing day doing nothing. Thanks Tom!

Tom · #3 11-17-2006, 02:01 PM

Quote:

Originally Posted by The Waiting Hurts

Great! Just when I thought I'd come into work and have a relaxing day doing nothing. Thanks Tom!

1695814 · #4 11-17-2006, 03:10 PM

OK, so she asked if you'd been poisoned because she was wondering why you ended up in the hospital with tubes sticking out of your orifices?

Tom · #5 11-17-2006, 03:54 PM

It's just one of those random email stories that I got off the net. Truth is, I don't even have a dog.

1695814 · #6 11-17-2006, 04:44 PM

Quote:

Originally Posted by Tom

It's just one of those random email stories that I got off the net. Truth is, I don't even have a dog.

If you'd like a 7 year old sheltie that barks a lot, let me know.

Tom · #7 11-17-2006, 05:16 PM

Quote:

Originally Posted by 1695814

Quote:

Originally Posted by Tom

It's just one of those random email stories that I got off the net. Truth is, I don't even have a dog.

If you'd like a 7 year old sheltie that barks a lot, let me know.

BTW, you may want to try this code since you have a darker background image:

Code:

Body{color: #ffffff; background-attachment: 
fixed; background-position: top center; background-image: url(http://img476.imageshack.us/img476/6486/01014eq4.jpg);}


.page {background:transparent;color: #000000;}
.tcat {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.5; color: #000000;}
.thead {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;}
.tborder {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;}
.tfoot {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;}
.alt2, .alt2Active {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;}
.alt1, .alt1Active {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;} 
.panelsurround {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;} 
.panel {background-color:9A9A9A; 
filter:alpha(opacity=90); -moz-opacity:0.9; opacity:0.9; -khtml-opacity:0.9; color: #000000;}

Tom · #8 11-21-2006, 04:33 PM

Here's a turkey day theme! Gobble gobble!!

Spoiler:

P.S. I'm going to add a little icon that will show up next to your name that will indicate that you have a custom profile. That along with things that will make it easier to change the look of your profile. After that, you'll be able to upload a few more pictures if ya want, and perhaps a comments section and a few more fields to talk a little more about yourself. Yes, I realize that many of you won't be playing with this much, but I sure as hell will :P More themes on the way.

P.P.S. You may have figured out that myspace codes don't work with our code. If you see a theme that's available for myspace, or you just see it on myspace and want it, just let me know (send a link

), and I'll translate it over to our CSS code*.

*while supplies** last

**supplies = sanity

Doctor Infinity · #9 11-24-2006, 05:35 PM

Quote:

Originally Posted by Tom

P.S. I'm going to add a little icon that will show up next to your name that will indicate that you have a custom profile. That along with things that will make it easier to change the look of your profile. After that, you'll be able to upload a few more pictures if ya want, and perhaps a comments section and a few more fields to talk a little more about yourself. Yes, I realize that many of you won't be playing with this much, but I sure as hell will :P More themes on the way.

Thanks for the heads up about customizing profiles, Tom. Definitely a cool feature, looking forward to see more custom profiles out there soon. Please keep us updated as you add more features and set up the means to identify who has a custom profile.

Tom · #10 11-24-2006, 08:50 PM

Right now I have it set up to show this icon

if you have a custom profile page (some CSS customization) and you have something in your about section.

Now, if you only have CSS stuff done, and nothing in your about section, but you still want people to check out your profile you can always just add a space to the about field and the profile icon will show up, but I'd encourage you to tell us a little bit about yourself (or make something up)!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode