I've started fiddling with
my secondary site theme (secondary site = not this one that i'm writing from but one that i use to test stuff, like what new accounts come equipped with these days and how a new theme looks).
I'm mostly fiddling around with pieces here and there in hopes of getting a handle on the CSS involved (which I really haven't even begun to tackle yet). My first step (and the most dramatic, perhaps, since it's the part that hits you in the face immediately) has been to alter the images and background of the theme. My plan is to detail how I went about that (so at least those who are more clueless than i can get that far) and then pose questions on points where i'm currently stopped (mostly because i haven't worked any further on the problem yet, but I also feel like i've reached the point where i might spend an hour pouring over the CSS to find something when someone else, who's not quite as dumb as i, could point it out to me in a heartbeat).
So here's what I've done.
1. I changed my site to the Avlack theme (by Jolo -- this is the theme that's mostly blackish with a big green bar at the top). It seemed like a pretty straight forward design that I could fiddle with without too many extras to deal with (like fancy tabs around my tabs).
2. Then I had to get the CSS code. One would think that you could simply click on the "Custom CSS" section under your settings. No go. You'll find that section is blank. So instead I made sure I was on my home page, then I viewed the source code. (I don't know how this works in other browsers, but I went to "View" and down to "View Source."
3. You don't have to go very far before you see several lines that start with "link" and end with "css." That's where you want to be. There's a 36.css. Ignore that. I don't know what it does. There's a 10.css. Again, ignore it. Again, I am an ignoramus (and an Idon'tcareous). After these you'll see one that reads:
http://mutiply.com/style/custom/avlack/5.css>http://mutiply.com/style/custom/avlack/5.css">http://mutiply.com/style/custom/avlack/5.css. That's the homeboy you're lookin' for. Copy that line (start at http and end at css) and stick that URL into the little space at the top of your browser where URL's reside.
4. Copy everything that's on that page. Now you want to go back to your settings (just back up till you're on a page that has the "settings" link in the upper right corner and click on it). Next click on "Custom CSS" and paste the code into that big blank space. There, all you've done is given yourself something to start with. You'll notice at this point (if you click on save) that your page looks exactly like the avlack theme. Well, duh. We haven't changed anything yet. That's coming. Stop sweating.
5. The top of the code starts with "body." Underneath that is a line that starts with "background" and there's a URL to follow. If you want to stick another pic in there, this is the place to do it. (I've been uploading images to my account and then just linking to those, but you could stick the URL of an image that's no on multiply here if you want.) If you don't want an image here you can choose a background color. I threw that ghastly green color up by changing this line to: background: #CCFF66 (I would have thought it would be background-color: #CCFF66, but what do I know?) If you don't know what hex codes go to what colors, then you can buzz over to google and do a quick search on "html colors." you'll find a motherlode of places to help you out. My fave is at
Webmonkey.
6. Keep scanning down that CSS code and you'll see another line with a URL. (Mostly all I've done so far is scan for those URL's and change them. It's pretty painless and effectively creates a new "theme" -- with thanks to Jolo). This next URL ends with search.png. Believe it or not, this is the little bit of color just above the headshot. It's a 199 x 27 image. You can go find one or make your own. But be aware that the left side of the pic won't show up. I haven't figured out exactly how much Does show up, but for the pic I used, it didn't matter. To put your image in, just replace the
http://blahblahblah.search.png>http://blahblahblah.search.png">http://blahblahblah.search.png line with the URL of the image you'd like to be there.
7. The next URL ends in railmid.gif. I have no idea what it goes to. I get a "not found" message whenever I try to look at it.
8. The next URL is the one you've all been waiting for. It ends with top.png and it's what I turned into a picture of a peacock. This image is 780 x 200. Find your own pic, or make your own, and stick it's URL in place of the one that's there.
9. You could stop right there if you want. You've probably made quite a change to your page at this point. The only other thing that I think I've tackled so far is the little arrows down below the headshot. The URL for these is WAY down the code and ends with (drumroll please) arrow.png. I tried to stick some peacock feathers in for these. I don't think it worked very well.
10. The only other thing that I've done is change the color of my title. You'll have to scroll around until you find a section headed h1#page_owner_title. I changed the line under that that says color: #fff to say color: #CCFF66 (that lovely green color again). I don't know what the deal is with 3 digit hex codes, but replacing it with 6 digits seemed to work just fine.
OK, so now I've thoroughly shown my ignorance to all those who aren't nearly as dumb as I. I'd love it if you folks could now answer some of the following questions for me:
1. How do I change the gray where the google ads are to some other color? Where is that line in the code? (Can you tell I'm too lazy to look?)
2. Is it possible to add shadow to text? (with CSS - not photoshop)
I've looked at some of the other themes and have ideas of how those could be modified as well (with cute little tabs behind the tabs and such like) but I'm not feeling into it at the moment. So maybe I'll poke around those later. I'm hoping that if I fiddle with other people's stuff enough, I might get to the point where I can build my own little page from scratch.
edit:Wow! Thanks for all the great discussion. This post led to a lot of chat, a new group, and a better looking multiply. :-) However, at this point I'm going to close the discussion. If fiddling with the CSS is too difficult or overwhelming for you, I would recommend checking out the Customized Themes Group which has over 2200 themes to choose from (as of 4 July 2007) and over 51,000 members generating new themes all the time.
If you would like to design your own theme but find you need a little help, please check out the Multiply Design or Grouped (which is well decorated itself).
Good Luck!