MySpace Makeovers
With over a 100 million active monthly users MySpace is the dominant social networking site. Like most users, you probably have your ID and image completed and have contemplated how you can enhance the appearance of your page. Without too much difficulty, this can be done with a little knowledge of HTML tags and Cascading Style Sheets [CSS]. If you are an active user you will want to have a first impression that says something about you to any new visitor.
Your Profile Page is where we will begin. Start at your home page and click on “edit profile” just to the right of your URL. You’ll see fields for Headline, About Me, I’d Like to Meet, General, Music, Movies, Television, Books and Heroes, all of which can be embellished with HTML or CSS.
Our sample above shows a bit of both in their simplest form.
In the “About Me” field we chose to make the term “Blogroll” bold by using the <strong> HTML tag. At the point we want the embellishment to cease we place the closing tag </strong> which shows up after “Blogroll” in this case. Alternately, in the “About Me” field we added CSS to make an entire HTML paragraph tag bold and dark blue with <p style=”color: darkblue; font-weight: bold”> with the closing </p> at the end. The results show up below.
What’s the problem there? As you can see the links for RealOutlook, Pacific Consulting Group, and Webbilia are all bold and dark blue which is the default style for links. As such, nothing but links should be formatted in this fashion.
HTML Tags
HTML is a markup language for structuring your web documents. You start with an opening tag [ <tag> ] and end with a closing tag [ </tag> ] to terminate the area or content so structured. There are exceptions to using closing tags such as when you include an image [ <img src="url.com/image.jpg" /> ]. In that case you need to include a space and “/” before the “>” to close the open tag and make it comply with emerging web document types requirements. While we will only deal with what we use here, those who wish to acquire a complete reference will find an excellent source with Dynamic HTML: The Definitive Reference (Dynamic Html)
CSS Document Wide Style
The immense appeal of Cascading Style Sheets is that it allows you to separate content from style. It can also be applied to elements as in the paragraph example for the “I’d Like to Meet” field above. Document wide, we could have done the following:
<style>
p { color: darkblue; font-weight: bold }
</style>
Or, you can apply the style within the particular paragraph tag as above like this:
<p style=”color: darkblue; font-weight: bold”>
Our example uses the paragraph tag only. Similarly, different style properties can be applied to html tags across the board. Then the element is declared followed by a colon [":" ] then the property you with to ascribe to that element. Each element included in the style must be separated by a semi-colon [ ";" ]. Again, we are only going to deal with what we use here. An excellent reference can be found in Beginning CSS Web Development: From Novice to Professional
Practical Design
Design has no value if it doesn’t support a practical use. So many sights get carried away with their favorite images leaving the page unreadable. There maybe instances where the image is the message, in which case, there are exceptions to the rule. We selected a background image with little variation in color that allows us to maintain a consistent style for a readable site which you can see at http://myspace.com/realoutlook. How did we place the background image? We added a style to the body of the document linked to an image on this site as follows:
<style>
body {background-image:url(http://www.webbilia.com/_images/redondo2.jpg);}
</style>
Putting It Together
Now that we have an image we have to get rid of the obstruction caused by the default structure of your MySpace profile page which is made up of a series of nested tables. These tables have background colors and their elements have colors of their own which must be removed. This is done by adding the following styles:
<style>
table, tr, td, table table, table table td {background-color: transparent;}
table table table td {background-color: transparent; margin: 0px; }
</style>
As for the links we had to other sites, MySpace rewrites the ones you create for security reasons. You may have noticed the unconventional urls in the first image of our first “About Me” image above. The links we entered start as follows:
<a href=”http://www.realoutlook.com” target=”_blank”>Real Outlook</a>
Links are created using the anchor tag [ <a> ] with the referenced URL [ href="..." ] inside the tag. You can add the target=”_blank” direction to have the linked page open in a new window. When MySpace rewrites the link the target you provide stays in place. As it stands the “About Me” field now looks like this:
Take thing once step at a time. Should you make errors, they are easier to find if you take small steps and check the results. Try removing the table color elements before adding the any background images. If your text lacks contrast try putting it between paragraph tags and adding some local color to the paragraph. Take each element and work it until you get what you want and it will come together if you are patient!
