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??
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:
By contrast, here’s a box that has a big padding value and a small margin:
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:
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:
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:
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.