How can I style my userpage?

November 21, 2004 8:47 PM

I want my user page to be a color, like orange clock's. How do I do that? I understand basic html and all that; I really would like to know the specific html to make your user page a color (other than blue; nothing against it, of course, I'm just more of a pink girl).
posted by ThePinkSuperhero to MetaFilter-Related at 8:47 PM (22 comments total)

p.s. I just cold stole it.
posted by orange clock at 8:51 PM on November 21, 2004

bless you. I think I'm in love with you- is that OK?
posted by ThePinkSuperhero at 8:52 PM on November 21, 2004 [1 favorite]

absolutely.
posted by orange clock at 8:56 PM on November 21, 2004

whatever you do, don't put a redirect on it.
posted by angry modem at 9:51 PM on November 21, 2004

...or else you'll need admin hope to un-hack it.
posted by neckro23 at 9:52 PM on November 21, 2004

I'm glad to see you changing your user page match the Threat Advisory Level.
posted by George W. Bush at 9:55 PM on November 21, 2004

My first impulse was to View Source for orange clock's user page. A quick search for "color" brings us to background-color: #CC6600 which is the warm pumpkiny hue of oc's background. You know, because "View Source" is always fun.

(And a quick check of ThePinkSuperheros's Profile suggests that she's very happy with the way things have turned out.)

So. Hooray for Zoidberg!
posted by Guy Smiley at 10:43 PM on November 21, 2004

I dont know. I've always liked taz's and t r a c y's
posted by vacapinta at 11:08 PM on November 21, 2004

That pink is painful.
posted by Yelling At Nothing at 11:16 PM on November 21, 2004

Line 191, column 22: document type does not allow element "STYLE" here.

And unsurprisingly, Opera renders the background in pristine metafilter blue. i.e, Your Mileage May Vary.
posted by fvw at 11:53 PM on November 21, 2004

For a quick fix, simply paint your monitor screen with a thin layer of the desired colour. Worked for me!
posted by kenchie at 3:37 AM on November 22, 2004

OK, I'm still confused. I see the instructions from ashbury that orange clock linked to, but I don't know what the hell it means!

Where is the "style type" option? Is it on the customize page? I'm sure this easy but I must be missing something. Do fries come with that shake?
posted by HifiToaster at 5:09 AM on November 22, 2004

HiFiToaster and others: stick the code (style type etc. etc.) as text in your "about me" section. you know, the part of your user page that you use to describe yourself, etc. start by re-importing the current mefi style using @import (i think you may not need to do this, but i looked at gyan's user page source code, he did it, so i did, and it worked... YMMV). then start overriding the defaults with your own CSS commands. me, i didn't do a color change, but i did add two new images to replace the metafilter logo and the "community 'blog" images at the top of the page. if you don't want the weird blue blocky bar at the bottom of the mefi logo i'd reccommend replacing the image yourself (host image on your own server, of course, and call up at will. stare at my user page source code if you need help figuring out how i stuck them in the right spot.)

i think at some point i'll make the page green. because i can. which necessitates redoing the images. whateva.

and now i'm thinking... does this only work in user pages? has matt taken the time to ensure that nobody can drop a style rule into a comment and screw up the entire site? 'cause, uh, that would be a bad thing if it was allowed.

not that i encourage anyone to try, say, making this thread use the "ask mefi" green stylesheet.

(but if it works it would be good to know, so that we can alert matt to fix it. just in case.)

on preview: matt's on top of this already. you can dump in a <style> tag but the style rules inside the tag are safely ignored. cool. no messing with the page allowed - which is probably for the best!
posted by caution live frogs at 6:57 AM on November 22, 2004

@import "/styles/default.css";body{background-color: #FF66CC;}img, table, {display: none;}Hmmmm, let's see.....
posted by ThePinkSuperhero at 7:30 AM on November 22, 2004 [1 favorite]

Nope, doesn't appear to work. Matt is so smart.
posted by ThePinkSuperhero at 7:30 AM on November 22, 2004 [1 favorite]

I'm no 1337 h4xxx0r 801, but I tried the inline style thing first day I was here.

Letting users fiddle their own pages while securing threads was a nice touch, so I'm grateful to Matt for not locking everything down. Now I just need a fricken' designer to make mine look presentable.
posted by NinjaPirate at 7:38 AM on November 22, 2004

Wow, taz and tracy got it goin' on.
posted by TimeFactor at 8:15 AM on November 22, 2004

oh man, if you guys are going to be looking at my profile page I ought to update it, and do something about my blog that I've neglected now for so very, very long. And drop in a pimp comment for Viewropa. or maybe I'll just get back to what I was doing - being completely lazy and unproductive.
posted by taz at 8:43 AM on November 22, 2004

I think you need to use the @import to make the styles obtain for the current page. Otherwise, you'd have to alter the styles via JavaScript, and that can get hairy in IE.

One thing that bugs me is that in my tests, I haven't been able to kill the blue background on everything. Haven't tried very hard yet, though, so it could be as simple as just setting every HTML element I can think of to "background-color: transparent".
posted by lodurr at 12:09 PM on November 22, 2004

Try using the !important rule in your styles
(that's exclamationmarkimportant , in case MeTa mangles it)

Put it after any style rule you need to have applied, even if a later rule would normally overwrite it. !important gives a style rule priority over anything else, which can be helpful, but also kind of dangerous.

If you check my user page, I've changed all background colors to a delicate.. (ye gods, what have I done) shade of (oh moly) pink.
But seriously, that just shows I'm comfortable with who I am.

If you check the code and do a search for "text/css", the second match it finds will be the styles I wrote in. You're only really interested in the first rule here, but the second one is to insert that happy cartoon NinjaPirate mushroom at the top.

Two points to note;

1. the first rule says "make everything inside the HTML have pink background", and then there's the !important without any space before it!
2. all the styles are on one line, because if you try to space it out by pressing [enter], MeTa will put line break tags in. And you don't want to be putting horrid line breaks in your lovely styles.

The entire style rule that makes all backgrounds pink (I'm gonna change this back, you know that, don't you?) is:
[style type="text/css"]html * {background-color:#c39!important;}[/style]
but replace the square brackets with the angle ones

Now, like I said, this is useful, but also dangerous. I wouldn't want to change all backgrounds to pink (well, clearly I would, but I wouldn't want you to make the same mistake), so I'd do some more refined targeting of different elements in the page, like
p {width:50%;}
or
.copy {border:1px solid #999;}
to set styles for all paragraphs or content holders


I'm no teacher, so if that's not as clear as it needs to be, email me and I'll see what I can do. Be aware though, unless you're OK working with HTML code, you're not going to catch a lot of what's said.
posted by NinjaPirate at 1:45 PM on November 22, 2004

Aww feck, I should have dedicated the background-color chapter to lodurr. Sorry.
posted by NinjaPirate at 1:46 PM on November 22, 2004

Hiiiiiiiiii, kids!

Kids: Hiiiiiiii, Binky!

Anyway. Making the background important will also overrule background images. If you only want to get of the blue boxes around some of the text like zipcode, you need to add

span{background:#000!important;}

This would change all spans to black background, like in my profile. Obviously just change the 000 to whatever color you want.
posted by bargle at 4:12 PM on November 22, 2004