Want to impress your friends/peers/associates [choose one] with a classy MySpace layout? Here are 5 easy tips on how to do this:
1) The Power of Paragraphs
Since most MySpace users know very little about web design, what you'll often see on a MySpace page is an 'About Me' section filled up with a huge unbroken block of text. No matter how captivating the writing is, most will tire of reading this after the first four or five lines and especially so if it continues on for another 20 or 30 lines. You'll want to avoid making the same mistake of overwhelming your readers by putting your text into nice bite-size paragraphs.
Unfortunately for non-geeks, when you create paragraphs by hitting the Return key twice while typing into any text box on your MySpace 'Edit Profile' screen, this will not result in paragraphs created on your MySpace page after you hit the 'Save All Changes' button and you view your profile page. To properly format your text into paragraphs on your MySpace page, you'll need to type in: <p> ...every time you wish to start a new paragraph. Then when you click on the 'Save All Changes' button and view your profile, you'll see your text formatted into paragraphs. That's it. That's all. Angle bracket, p, angle bracket. Three little characters can mean the difference between someone reading everything you have to say or only reading the first few lines.
2) Legible Text
Many MySpace pages are styled using MySpace layouts which often use a background image to enhance the display. But all too frequently, MySpace users fail to think through to the final result of someone actually attempting to read certain colors and shades of text displayed over certain background images. The result is quite often a text color that doesn't have enough contrast with the color of the background image in order to make the text legible.
What you'll want to do to create a truly professional and classy MySpace page is to carefully select a layout in which the text is clearly legible. This means you'll need a light colored text displayed on a mostly dark colored background image or vice versa. And this also means that high contrast background images that have a myriad of light and dark colors will make poor backgrounds no matter what as there will always be some part of the background that will make any text color difficult to read.
3) A Picture is Worth a Thousand Words
You can spice up your MySpace profile page by posting images directly on it instead of just using your pics page. To do this simply upload your image(s) to a free image host like ImageShack or Photobucket, get the image URL (web address of the image) and then insert the following code in any text box on your 'Edit Profile' screen:
<img src="URL_TO_IMAGE_GOES_HERE">
Simply replace URL_TO_IMAGE_GOES_HERE with the web address of your uploaded image.
Presto. Pictures on your MySpace profile.
4) Keep It Inside the Box
Another unfortunate hallmark of MySpace pages is a layout that is so wide that it creates horizontal scrollbars at the bottom of the user's web browser. This is considered a faux pas in professional web design as it forces the user to not only scroll up and down but back and forth as well in order to view the entire web page. To avoid 'spreading your layout' in this fashion you'll need to take care of two things:
a. Don't post images wider than 400 pixels in any section of your MySpace page.
b. Don't allow friends to post any images wider than 400 pixels to your Comments section
To handle the second of the above, you'll need to either delete any comments with images that are too wide or you can disable HTML in your Comments section altogether (which will not allow the posting of images to your Comments section at all). To disable HTML in your Comments section, simply go to your MySpace account home page, click on Account Settings >> Profile Settings and then click to clear 'Disable HTML Profile Comments'.
5) Apply the KISS Principle
And finally, apply the KISS principle, i.e., Keep It Simple Stupid. It's a shame that in some respects, MySpace has become a gigantic online club of abominable web designers (and is subject to great ridicule because of this). Just because you see other MySpace users load upwards of a dozen flash videos and 100 image files all on one page (and this is not an exaggeration) does not make this good web design. The best web pages on the net are not those that are stuffed to the gills with the most bells and whistles but rather those that are user-friendly, color-coordinated and efficient at getting their particular message across. If you want a truly classy MySpace layout then keep in mind that sometimes less is more.
Robert Darrell is a professional web designer and the webmaster of ironspider.ca which provides a variety of free MySpace layouts that are 100% original (no copyright violations). Robert also specializes in easy-to-use MySpace overlays.
Article Source: http://EzineArticles.com/?expert=Robert_Darrell
Sunday, October 28, 2007
MySpace HTML Codes - Writing Up Your Own MySpace Layouts
WARNING: This article may contain some technobabble. Viewer discretion is advised.
In other words, if you have no HTML or CSS experience at all then I'm sorry to say but you're at least a month away from writing up your own MySpace layout codes from scratch.
On the other hand, if you do have some HTML and CSS experience then here are the basics on how to do this:
First of all --for the uninitiated-- MySpace is a social networking site where you can set up your own free home page and through that you can interact with over 100 million other MySpace users. You do this by browsing around their profile pages, leaving comments, sending messages or bulletins, adding 'friends' and generally just having a typical web 2.0 chit-chatty good time.
A 'MySpace layout' is a block of CSS code that can be used to modify the background, fonts, table borders and other aspects of your MySpace profile page. Although widely available across the net and free for the taking, it seems to me (from the truckloads of emails I get) that many are unclear as to exactly what goes into the making of a MySpace layout.
Officially, a MySpace layout is a hack. The block of CSS code which constitutes a MySpace layout is an embedded stylesheet which, according to W3C standards, is supposed to be inserted in the HTML document head. However, MySpace does not permit it's users to access the document head of their profile pages. When you install a MySpace layout by inserting the layout code into the 'About Me' text box on your MySpace account's 'Edit Profile' screen, you are placing the embedded stylesheet in the HTML document body instead. Somehow, shortly after MySpace's inception, somebody discovered that, hey, you can jam an embedded stylesheet into an HTML document body and it will still work. Well, to heck with web standards, away we go (and so began an entire industry).
So that's the long and short of it.
Your MySpace layout code will start out with a set of opening and closing STYLE tags like this:
<STYLE>...</STYLE>
...in between which will go all your CSS selectors and rule sets used to grab control of and customize all the various HTML elements on your MySpace page.
So now you have this:
<STYLE> css selector {rule set}
css selector {rule set}
css selector {rule set} </STYLE>
And exactly what selectors should you use? Ahh, well this is where the fun part comes in and is essentially beyond the scope of this article. But I can feed you a couple or three pointers to get you started.
Tables From Here to Eternity
The first thing you should know right off the bat is the default MySpace HTML code is a web standards guru nightmare in that it contains about eight bazillion nested tables. Also, be advised that all hash marks (#) are filtered out of user input so using ID selectors is not possible. You can however use class selectors. Here's a list of some of the CSS class names used in the default MySpace template to help get you started making your own MySpace layout:
navigationBar - MySpace header menu, i.e., "Home, Browse, Search..."
profileInfo - Basic Info table (contains user display pic)
contactTable - Contacting [username] table
userProfileURL - MySpace URL
interestsAndDetails - Interests table
userProfileDetail - Details table
userProfileSchool - Schools table
userProfileNetworking -Networking table
extendedNetwork - Extended Network table
latestBlogEntry - Blog Entry table
blurbs - Blurbs table
friendSpace - Friend Space table
friendsComments - Comments table
Many of these class names were recently added to the MySpace template so consider yourself lucky if you're just getting into the layout making biz. Prior to this, MySpace layout makers were obliged to fill their layout codes with ridiculously long CSS descendant selectors, such as "table table table table div div", etc, in order to target specific elements on a MySpace page.
MySpace Filters
With regards to filters, there are a number of other characters besides the hash mark which are automatically filtered out by the Cold Fusion script which processes MySpace user input. The filtering of the hash mark also makes it rather precarious to use hexadecimal color codes as without the required # character, using certain hexadecimal color codes will cause some major malfunctions with the display of your MySpace page. To be absolutely sure your color codes won't make your page go haywire, you'll have to use CSS RGB color notation instead, e.g., background-color: rgb(255,255,255).
Here's a list of everything that I'm aware of that gets filtered out of MySpace layout code:
* Hash marks #
* HTML comments
* CSS comments
* HTML iframe element
* CSS z-index property
* All Javascript
Tips and Tricks
Number one, I highly recommend that you install Firefox (if you haven't already) and then install Chris Pederick's Web Developer extension. The Outline function in this extension will be a tremendous help in figuring out the hierarchy of nested tables in the default MySpace HTML code.
And number two, remember that when you use a descendant selector to target nested tables, you're potentially (but not always) targetting all other tables nested at a deeper level. So for example, if you use 'table table table {APPLY THIS RULE SET}', you're also potentially applying the same style to tables nested four, five and six levels deep. You'll find yourself doing a lot of 'undoing' as you're writing up your MySpace layout code to make sure that you only apply styles to elements that you intend to apply them to. Hence, it will be normal to have your MySpace layout code filled with a lot of code that looks like this:
table table table {APPLY THIS RULE SET};
table table table table {UNDO PREVIOUS RULE SET};
And that's about it. The rest you'll have to learn by just diving right in and mucking about. And don't forget to check your MySpace page in several different browsers to make sure it looks the same.
Oh yeah and be prepared to go a little stir crazy.
This is par for the course.
:o)
Robert Darrell is the chief cook and bottle washer of the Iron Spider Web Design and Resource Center where he serves up a tantalizing array of tutorials on HTML and CSS.
He also provides an excellent collection of free MySpace layouts and easy-to-use MySpace overlays.
Article Source: http://EzineArticles.com/?expert=Robert_Darrell
In other words, if you have no HTML or CSS experience at all then I'm sorry to say but you're at least a month away from writing up your own MySpace layout codes from scratch.
On the other hand, if you do have some HTML and CSS experience then here are the basics on how to do this:
First of all --for the uninitiated-- MySpace is a social networking site where you can set up your own free home page and through that you can interact with over 100 million other MySpace users. You do this by browsing around their profile pages, leaving comments, sending messages or bulletins, adding 'friends' and generally just having a typical web 2.0 chit-chatty good time.
A 'MySpace layout' is a block of CSS code that can be used to modify the background, fonts, table borders and other aspects of your MySpace profile page. Although widely available across the net and free for the taking, it seems to me (from the truckloads of emails I get) that many are unclear as to exactly what goes into the making of a MySpace layout.
Officially, a MySpace layout is a hack. The block of CSS code which constitutes a MySpace layout is an embedded stylesheet which, according to W3C standards, is supposed to be inserted in the HTML document head. However, MySpace does not permit it's users to access the document head of their profile pages. When you install a MySpace layout by inserting the layout code into the 'About Me' text box on your MySpace account's 'Edit Profile' screen, you are placing the embedded stylesheet in the HTML document body instead. Somehow, shortly after MySpace's inception, somebody discovered that, hey, you can jam an embedded stylesheet into an HTML document body and it will still work. Well, to heck with web standards, away we go (and so began an entire industry).
So that's the long and short of it.
Your MySpace layout code will start out with a set of opening and closing STYLE tags like this:
<STYLE>...</STYLE>
...in between which will go all your CSS selectors and rule sets used to grab control of and customize all the various HTML elements on your MySpace page.
So now you have this:
<STYLE> css selector {rule set}
css selector {rule set}
css selector {rule set} </STYLE>
And exactly what selectors should you use? Ahh, well this is where the fun part comes in and is essentially beyond the scope of this article. But I can feed you a couple or three pointers to get you started.
Tables From Here to Eternity
The first thing you should know right off the bat is the default MySpace HTML code is a web standards guru nightmare in that it contains about eight bazillion nested tables. Also, be advised that all hash marks (#) are filtered out of user input so using ID selectors is not possible. You can however use class selectors. Here's a list of some of the CSS class names used in the default MySpace template to help get you started making your own MySpace layout:
navigationBar - MySpace header menu, i.e., "Home, Browse, Search..."
profileInfo - Basic Info table (contains user display pic)
contactTable - Contacting [username] table
userProfileURL - MySpace URL
interestsAndDetails - Interests table
userProfileDetail - Details table
userProfileSchool - Schools table
userProfileNetworking -Networking table
extendedNetwork - Extended Network table
latestBlogEntry - Blog Entry table
blurbs - Blurbs table
friendSpace - Friend Space table
friendsComments - Comments table
Many of these class names were recently added to the MySpace template so consider yourself lucky if you're just getting into the layout making biz. Prior to this, MySpace layout makers were obliged to fill their layout codes with ridiculously long CSS descendant selectors, such as "table table table table div div", etc, in order to target specific elements on a MySpace page.
MySpace Filters
With regards to filters, there are a number of other characters besides the hash mark which are automatically filtered out by the Cold Fusion script which processes MySpace user input. The filtering of the hash mark also makes it rather precarious to use hexadecimal color codes as without the required # character, using certain hexadecimal color codes will cause some major malfunctions with the display of your MySpace page. To be absolutely sure your color codes won't make your page go haywire, you'll have to use CSS RGB color notation instead, e.g., background-color: rgb(255,255,255).
Here's a list of everything that I'm aware of that gets filtered out of MySpace layout code:
* Hash marks #
* HTML comments
* CSS comments
* HTML iframe element
* CSS z-index property
* All Javascript
Tips and Tricks
Number one, I highly recommend that you install Firefox (if you haven't already) and then install Chris Pederick's Web Developer extension. The Outline function in this extension will be a tremendous help in figuring out the hierarchy of nested tables in the default MySpace HTML code.
And number two, remember that when you use a descendant selector to target nested tables, you're potentially (but not always) targetting all other tables nested at a deeper level. So for example, if you use 'table table table {APPLY THIS RULE SET}', you're also potentially applying the same style to tables nested four, five and six levels deep. You'll find yourself doing a lot of 'undoing' as you're writing up your MySpace layout code to make sure that you only apply styles to elements that you intend to apply them to. Hence, it will be normal to have your MySpace layout code filled with a lot of code that looks like this:
table table table {APPLY THIS RULE SET};
table table table table {UNDO PREVIOUS RULE SET};
And that's about it. The rest you'll have to learn by just diving right in and mucking about. And don't forget to check your MySpace page in several different browsers to make sure it looks the same.
Oh yeah and be prepared to go a little stir crazy.
This is par for the course.
:o)
Robert Darrell is the chief cook and bottle washer of the Iron Spider Web Design and Resource Center where he serves up a tantalizing array of tutorials on HTML and CSS.
He also provides an excellent collection of free MySpace layouts and easy-to-use MySpace overlays.
Article Source: http://EzineArticles.com/?expert=Robert_Darrell
Saturday, October 27, 2007
Myspace Scroll Box
You can use the following code as a basis for adding a scroll box to your MySpace profile. Scroll bars will appear on the box as soon as its contents are too big for it. This is acheived using the overflow property.
To use this scroll box code, simply copy and paste it into your MySpace profile page and change the values to suit
This MySpace Scroll Box Code...
<style type="text/css">
div.myspace-scroll-box {
height:100px;
width:200px;
font:16pt/20pt Verdana;
overflow:scroll;
}
</style>
<div class="myspace-scroll-box">
Enter your scroll box text here... once there's enough text, the box will grow scroll bars!
</div>
Subscribe to:
Comments (Atom)