Customizing Yahoo Mash: A Guide to CSS Tweaking

Tweaking Yahoo Mash is easier than you think...

Ok, so I got an invite for Mash, Yahoo's new social networking thingy and I've just spent some time digging through their CSS to figure out what can be done to tweak a Mash profile. As it turns out, a lot, actually... I'm going to use this guide as a 'work in progress' and will keep adding tweaks as I continue to figure stuff out. NOTE: this Yahoo Mash CSS Guide might not make sense to you if you don't know a thing about Cascading Style Sheets (CSS), but I'll try to keep it as simple as possible.

What's that? You don't have a Yahoo Mash invite?

Contact us and we'll get you one.

Now that you're in, take a minute to look around. You'll notice some similarities to Facebook. Spend some time filling in your info, moving stuff around, adding modules, etc. Once you've got that nailed down, you're ready to start tweaking the look of your profile. You can do some very basic modifications using Mash's built in "Style this profile" editor:

As you can see, you can add a background image and change a few colors. This may be all you're looking to do, but what if you want more? This is where Mash's "Advanced CSS" comes in. Using custom CSS to do some tweaking, I was able to create a profile that looks like this:

What's changed:

     1) The background (obviously)
     2) Added a tiled background to each section (the darker bricks behind About Me, Friends, etc.)
     3) Added a background color to the section titles (the blue bars you see) and changed the section title font colors
     4) Changed the section borders and styles from the gray dashed borders to a matching solid blue
     5) Changed the nickname font, size and color
     6) Changed the body text color
     7) Changed the look of the 'polaroid' where your profile picture is displayed (now reads: "awww...")
     8) Changed the color of the bar that appears when you hover over the About Me text

So let's break it down a bit. Here's how I made each of these Mash profile changes:

Changing Yahoo Mash backgrounds

Here's the code I used:

body {
     background-color:none;
     background-image:url('http://www.myspacelayoutsupport.com/myspace-backgrounds/images/bricks/bricks03.jpg');
     background-attachment:scroll;
     background-position:top left;
     background-repeat:repeat;
     font-family:arial;
     color:#cccccc;
     }

Notes: you don't have to use an image for the background, you can just use a solid color by specifying a hex color in background-color:#xxxxxx. Use font-family and color to change the basic font for your page. Feel free to use other CSS attributes too.

Changing Yahoo Mash section backgrounds and borders

Here's the code I used:

.mod {
     background-color:none;
     background-image:url('http://www.myspacelayoutsupport.com/myspace-backgrounds/images/bricks/bricks03b.jpg');
     border-style:solid;
     border-width:2px;
     border-color:#3C6A90;
     }

Notes: you don't have to use an image for the background, you can just use a solid color by specifying a hex color in background-color:#xxxxxx. Feel free to use other CSS attributes too.

Adding a background color to section titles

Here's the code I used:

.hd {
     background-color:#3C6A90;
     }

Note: Feel free to use other CSS attributes here.

Changing 'Nickname' text

Here's the code I used:

#ypf-coreid .user-card .user-info .user-name h1 span.nickname {
     color:#ffffff;
     font-family:courier new;
     font-size:16pt;
     }

Changing the Polaroid

I'll explain this one later when I have more time, but here's the code:

#ypf-coreid .user-card .user-images {
     background-image:url('http://www.myspacelayoutsupport.com/images/polaroid02.png')
     }

Changing section titles/headings

Here's the code I used:

h3 {
     font-size:12px;
     color:#ffffff;
     }

Note: Feel free to use other CSS attributes here.

Changing About Me hover color

Here's the code I used:

ul.about div.hover{
     background:#cc0000;
     }

That's it for now. I'll add more code tweaks as I dig a bit deeper.

Jimmy
MySpaceLayoutSupport.com