Website Design & Marketing

Tags: myspace, social networking

Customizing social media pages is an important factor for designers, users, and social media marketers. The ability to create custom backgrounds and designs for myspace, twitter, etc. can become a lucrative business model for savvy designers and developers.

Compared to many other social networking sites, Myspace offers the most flexibility in the layout and design of a profile page. They provide a ton of customization options and make it easy to get a new look quickly.

There are some prerequisites before we jump into a fully custom design. You will need a photo hosting site account like flickr,photobucket,or picasa. This will host your background images or other media you want to put on your profile.

Let’s create a professional-looking page with the new Myspace 2.0.

Once you sign-in to your account, you’ll click to edit your profile.

Now, make sure that your profile is set to MySpace 2.0. If you already upgraded then you can skip this step.

You’ll now easily be able to browse around and interact with the theme editor at the top of the page. This is where the magic happens and you should play around with different settings to get the feel for how it works and what each selection in the theme editor does.

Now you can choose to use the themes that Myspace offers or upload a custom Myspace theme.

This is where your design skills come in handy and the creativity runs wild. To upload your professional Myspace theme, paste your own CSS code into the appropriate box. Don’t know how to write css? no problem. Get a brush up on CSS at W3Schools.

Make sure that you’ve clicked in the appearance box that you don’t want to choose a layout. Then input your CSS code in the textbox as seen above. Once you know what CSS is and have an idea on how to code it you need to know what codes in MySpace can be modified. Below is an example blank 2.0 CSS file:

/* body, main font properties, background of page */
body{
  background-color: #f8f8f8;
  font-family: helvetica, arial;
  font-size: 11px;
  color: #333333;
}
 
/* width of profile, second background color */
div.wrap{
  width: 60%;
  background-color: #fff;
  border-left: 1px solid #878787;
  border-right: 1px solid #878787;
}
 
/* header & navigation properties */
div#header, div#googlebar {background-color: #878787;}
#topnav {background-color: #878787;}
#topnav a {color: white;}
#topnav ul, #topnav ul li {border: none;}
#topnav ul li a:hover {background-color: #6C6C6C;}
 
/* global module properties */
div.moduleMid1 {background-color: #EFEFEF; padding: 5px; border: 1px solid #AFAFAF;}
 
/* basic details */
div.profileDemographics {background: white; border: 1px solid #AFAFAF;}
 
/* Interests, Blog Entries, Details, Friend Space & Comments */
h3.moduleHead{
  font-weight: bold;
  font-size: 16px;
}
 
/* general, music, status, ethnicity */
strong, h4 {font-weight: bold; color: #333333;}
 
/* link properties */
a:link {color: #333333; font-weight: bold;}
a:hover {text-decoration: underline;}
 
/* odd/even properties */
.interestsModule .odd, .detailsModule .odd, .commentsModule .odd {background-color: #F7F7F7;}
.interestsModule .even, .detailsModule .even, .commentsModule .even {background-color: #EBEBEB;}
 
/* footer properties */
div#footer {font-size: 10px;}

If you want to hide boxes and elements on your profile MySpace 2.0 Codes has a great reference of information to help you out. And a tutorial from Skeedio should get you up to speed on modifying the css files for MySpace 2.0

Once your done, click to publish your profile. Once published, click to view your profile and your Myspace page should appear like so:

Related Blogs

• Related Blogs on myspace
• MySpace Trawl – Nedry | Hecklerspray
• Dallas Clubs

• Related Blogs on Social Media
• Social media, brands and the way forward

Related Posts:

• Social Media and Reputation Management
• Top 10 Social Networking Sites

This entry was posted on Thursday, August 20th, 2009 at 11:14 am and is filed under Graphic Design, Social Networking, Web Design & Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.