Industry guru Dave Taylor answers free tech support questions about a wide variety of business and technical topics, including blogging, Google AdSense, MySpace, Sony PSP, Apple iPod, Mp3 players, management, Linux, SEO, Mac OS X, Facebook, Twitter, LinkedIn and Microsoft Windows.

Still befuddled? Get immediate live tech support with SupportSpace!

Create boxed text in a MySpace Profile?

I was reading through some of your myspace help and it's great. thanks so much for letting me tweak my background without having to slap a bunch of stupid adverts on for your site! :) While I was reading your profile on myspace [dave's profile on myspace], I noticed you had a nice effect with some text that you somehow put into a box. How did you do that??

Dave's Answer:

Thanks for the kind words, and oh, I know exactly what you mean by the price you pay for using a third party tool to tweak your MySpace profile! I have seen so many profiles that are not only visually wicked cool, but are also covered in adverts and promos for the tools. I'm sure that those folk don't want the ads distracting from their own profiles, but ...

Anyway, yeah, I have a bit of a sneaky advantage because I know what's called CSS (Cascading Style Sheets) very, very well because, well, I wrote a book on the subject (Creating Cool Web Sites with HTML, XHTML and CSS). :-)

Fortunately, the basic concept is easy to explain once you realize that your basic Web page is built up of boxes. Lots of boxes. Boxes that contain paragraphs of text, boxes that contain those paragraph boxes, boxes that are navigational menus, and so on. Even the Google AdSense ads on this page: those are in a box too.

Every box has two important characteristics too, its margin and padding. The former specifies the amount of space between the "edge" of the box and the material around it, and the latter defines the space between the "edge" of the box and the material within it..

Let me demonstrate. Here's a box with a word that has a big margin and small padding:

This is with a teeny padding value, 1 pixel.

By contrast, here's a box that has a big padding value and a small margin:

This is with a pretty big padding value, 25 pixels.

Hopefully you can see the difference?

Good. Now to specify these, you want to use a <div> tag, which lets you specify a "style=" value and then whatever CSS styles you want. The box above? I specified a border that was a 1 pixel wide solid black line with border: 1px solid black (easy, eh?), a background color of gray with background-color:#ccc, and even slipped in changing the type in the box to be bold with font-weight:bold. Put it all together and it looks like this:

<div style="border: 1px solid black;background-color:#ccc;font-weight:bold;margin:5px;padding:25px;">
This is with a pretty big padding value, 25 pixels.</div>

Kinda geeky tweaky, I admit, but you are welcome to use this as a model for your own text box AND you can get a quick rundown on those cryptic color codes here: hex color values).

Now, finally, here's how I did the box in my own profile:

<div style="font-size:120%;font-weight:bold;border:3px solid #339;padding:5px;text-align:center">
I also have tons of
<a href="http://www.askdavetaylor.com/about_myspace.html" target="_blank">
MySpace Help</a> on my site!!</div>

and it looks like this:

I also have tons of MySpace help on my site!!

Nice, eh? Hope that helps you out with adding similar material to your MySpace Profile (or, if you're a blogger, your weblog entries: this very same CSS trick will work just fine in a blog, as this entry demonstrates rather neatly!)

While you're here, I encourage you to check out all the MySpace Help I have here on this blog, and you can also become my friend by checking out my MySpace profile.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

on myspace, i have a band, and i created a image link for peoaple to click on to direct them to my music. under the example image, i want to put the code for it insude if a text box. but, i dont want this code to show up as a image link, just the code. help me! i would want the text box to be this color:

#66FFFF

the rest of the font stuff id ont care about.

Posted by: nick at April 8, 2007 6:12 PM

this is more of a question than it is a comment.

I am REALLY new to myspace, I think my page is decent so far, but I have tried to add some text to my 'about me' section, but after i type it in, it all runs together, how do I make each line seperate?

Posted by: Marty at April 12, 2007 8:37 PM

Nick, you can create text boxes like you're talking about with this:

<div style="background-color: #6ff;">
all your code and stuff
</div>

Marty, you need to inject <br> sequences into your writing: each will give you a "line break": string two together, like this <br><br> and you'll get a blank line.

Posted by: Dave Taylor at April 13, 2007 1:21 AM

i cant see the affects on myspace background on my pc,or no ones elses what is wrong.

Posted by: janet at April 28, 2007 9:47 AM

cxan any1 help meplz i need thecodefing to make my writingquite big can any1 tell me plz email me x

Posted by: cally at May 2, 2007 10:27 AM

I had a similiar problem to Nick, i tryed the method you suggested to Nick, but in the box the banner still appears in photo form as apposed to HTML form. Is there anyway you could create the complete HTML formula of the table for me, so it is white with black border and displays the HTML code instead of the picture?

Reguards,
Jon

Posted by: Jon at May 19, 2007 12:30 PM

I want to center my profile

the 2 colums into 1 long one

without changing my colors

thx

Posted by: mekkar at May 20, 2007 2:07 AM

i am making my own layout site on myspace and i need to put the codes into a text box but everytiem i try nothing shows ive even tried the code u ahve on here can u plz help me out with this ive been trying to get this to work for quite some time ok

Chantel

plz and thank you ;}

Posted by: chantel at June 5, 2007 7:09 PM

Okay so I erased everything on myspace and I just want to have one box that is centered and has information about my business. How do I get about me back or how do I create such a box?

Posted by: Kelly R at July 15, 2007 3:23 PM

I am trying to create a text box in my about me section so that it has a black background, white "small fonts" text (I should be able to adjust the text size myself), but every time I try to ajust the width and hight of the box, nothing happens. This is the code I am trying to work with at the moment:

[form method="post" action="script name"][textarea type="text" STYLE="color: #FFFFFF; font-family: Small fonts; font-weight: normal; font-size: 8px; background-color: #000000;" size="100px" maxlength=100px"]
[/textarea]
[br]
[/form]

If possible, I would like to be able to change the way the scroll bar looks.

Posted by: Sarah at July 25, 2007 2:38 PM

Hi, I need help on how to make my tables in myspace partially transparent. I have my own pic as my background and want to be able to see it through the tables but still be able to keep a light color for the background of the tables so that the text is easily readable on them. Help me please!

Posted by: Jes at February 26, 2008 3:02 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!