Archive for February, 2010

MySpace Profile 2.0 TWEAKING TIPS! 1

All in all, I really like the new Profile 2.0 because it actually gives you much more control over almost every part of the page. You just have to know the names of the elements and css elements they use.

I am sick of people asking “I can’t figure out Profile 2.0, how do I go back to 1.0??” Don’t give up so easily! Adapt and learn something! Take control and bring that version 2.0 profile to its knees!!

This is a quick, starter guide to get you started!

First of all, remember this all-important tip! – With Profile 2.0, you no-longer put CSS code in the About Me or Like To Meet sections…they have a specific section for the CSS code. You WILL NOT SEE ANY CHANGE if you do not place your CSS code in the correct area and that should be your first clue if you are pasting code but don’t notice any difference when viewing your profile.

Here is a sample of a complete CSS entry:
body {
font-family: Verdana, Arial, sans-serif;
background-color:#000000;
background-image:url(http://www.coolchaser.com/background/view/13335924);
background-attachment: fixed;
background-position:center right;
background-repeat:no-repeat;
text-align:left; /* reset text alignment */
width:748px; /* or a percentage, or whatever */
margin:0 auto; /* for the rest */
}

div.module {
background-color: #FFFFFF;
opacity:0.8;
alpha:80%;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
width:100%;
}

I like having a separate area for the CSS code! It helps keep things cleaner and easier to manage. Especially for those copy-and-paste people who copy-and-paste everything they find online into their profile, making it a virtual MESS!

One thing I did notice while tweaking my new profile was that in the Profile 2.0 Profile Customizer, you have Themes you can start with, and if you are tweaking your profile completely like I have, you don’t want to select a specific Theme because it will be working against you when you try using certain CSS code that has already been stated with the Theme. Select “No Theme” to start with a clean slate. Yes, it means you have to start from scratch, but at least you won’t have any Myspace CSS code working against you!

Now, let’s get started!

Handling things as a Whole, or Separately

You can change the look of all elements as a whole, or you can call on a specific element and change the look of just that one….

For example, lets say I just want to give ALL the boxes/modules a Black Background and a little Transparency…in the CSS area, I would add the following code:

div.module {
background-color:000000;
opacity:0.8;
alpha:80%;
}

The “div.module” means that the code applies to ALL Modules, and not one in particular. So the code above will give all the modules a black background and then give that black background an 80% opacity, making it only slightly see-through. For the background color, I specified “000000″ which is the HTML code for Black. If you don’t specify a background color, your modules will be completely see-through and the text will be hard to read against the page’s background, unless you use a solid color that contrasts with your text. With my method the text will be readable regardless of what your background is. If you don’t specify an “opacity” or “alpha”, the background of the modules will be a solid color and the page’s background will not be able to be seen through it. In some cases, this would be fine, depending upon the kind of look or design you are working towards.

Now, if you want to change specific boxes/modules instead of changing all of them, use the following element names to do so…

div.musicPlayerModule
div.basicInfoDetails
div.friendSpaceModule
div.interestsModule
div.commentsModule
div.companiesModule
div.detailsModule
div.networkingModule
div.schoolsModule
div.blogsModule
div.blurbsModule
div.calendarModule
div.photo

So if we want to change the background of the Details module Only, we would take the previous code and modify it like so:

div.basicInfoDetails {
background-color:000000;
opacity:0.8;
alpha:80%;
}

You can even state the Height and Width of those modules as well, but remember where they are placed and how they look overall with the rest of the profile. For example, let’s take the last piece of code we used and add Width and Height attributes to the Details module:

div.basicInfoDetails {
background-color:000000;
opacity:0.8;
alpha:80%;
width:600px;
height:400px;
}