Add Some Pizzazz to Your Myspace Layout by Formatting Text with CSS

Add Some Pizzazz to Your Myspace Layout by Formatting Text with CSS


Formatting the text in your Myspace layout is easy with CSS

For the most part, the Myspace layout structure allows you some decent freedom for making your text look exactly the way you want it to by using CSS. First, let's take a look at a few of the classes that the Myspace layout employs:

.nametext - The Myspace css class used for the name at the top of the page

.whitetext12 - The css class used for "Contacting Bob", "Bob's Interests" and "Bob's Details"

.orangetext15 - The Myspace css class used for "Bob's Blurbs", "About me:", "Who I'd like to meet:", "Bob's Friend Space" and "Bob's Friends Comments".

.btext - The Myspace css class used "Bob has" 55 "friends" and "Bob's Latest Blog Entry"

.redbtext - The Myspace css class used in: Bob has "55" friends

.lightbluetext8 - The Myspace css class used in "Books:", "Status:", "Zodiac Sign:" and "Smoke / Drink:"

These CSS classes cover most of the text used in the Myspace profile layout. Now let's see what we can do with them.

Changing the Myspace layout background image for text

This is probably one of the coolest ways to change how text looks visually. You do it by adding a background image to the text. You can use a single, larger image, or a smaller repeating one. Here's a couple of examples of how to change the Myspace layout background image for some text:

<style>

.nametext {

background-image:url(http://www.impliedbydesign.com/images/text-background.gif);

}

That adds a background image for the .nametext style, which cooresponds to your name at the layout in your Myspace profile page.

Adding a repeating background to your Myspace textual layout

Repeating background images can be applied to different areas of your Myspace layout design. You can use them for neat stuff like adding a fading background to your Myspace layout background. To do it for your name at the top of the page, you can use the following code:

<style>

.nametext {

background-image:url(http://www.impliedbydesign.com/images/text-background.gif);

background-repeat:repeat-x;

}

Pretty simple, huh? And that's just the beginning. Here's some other styles you can add to add some more spice to your Myspace layout text:

Adding some color to your Myspace layout text

Here's the css style for adding some color to your text:

<style>

.nametext {

color:green;

background-color:yellow;

}

Adding some extra formatting to your Myspace layout text

<style>

.nametext {

font-size:25px;

font-weight:normal;

text-decoration:underline;

border:1px solid silver;

}

Now that you know how to apply some styles to one class, you can use them on any other classes that were mentioned at the beginning of this css tutorial.




Implied By Design Logo