Monday, May 28, 2012

MySpace 3.0 Workarounds

Finally, we say farewell to MySpace's "PROFILE 1.0"

Whaddya mean? We said goodbye to that old thing two years ago, didn't we? Well, yes, I thought so too...

Except that, it seems, only now have the last remaining old school MySpace diehards had their customized HTML codes overwritten and negated by MySpace, forcing them into the wonderful world of "PROFILE 3.0", whether they like it or not.

MANY OF THEM DON'T... and there has been a resumption of the old "GIVE US BACK OUR PROFILES" protests that I thought had fizzled out all those months ago, when we had that mass exodus of disgruntled users to F***book.

Well, yer old Uncle Minty is here to try to persuade you that a Profile 3.0 layout can be just as much fun as the sprawling undisciplined mess, sorry! "artistic self-expression" that you held so dear. With bells on.

But it takes a lot more work on your part. You can't rely on those "PIMP YOUR PROFILE" sites to generate all the code for you anymore (hmm... I wonder what's going to happen to all THOSE now?)

I'll hold my hand up and admit that I didn't like it at first either, as my blog archives will attest. But as I was an 'early adopter', when the ruddy thing was still in BETA, I've had a lot more time to figure it out for myself.

ONE THING I DO KNOW... The best way to create a nice Profile 3.0 layout is to START FROM SCRATCH. You can't just import all your old stuff from your Profile 1.0/2.0/whatever and expect it to look as it did before. Yes, I know it's frustrating, but there you go...
_________________

LOOK WHAT THEY'VE DONE TO MY PAGE, MA... The first thing you will have seen, on that fateful day when you woke up and saw that all the colour had drained from your pages, would have been something like this:-



This is a MySpace profile in its rawest form. This is what all those abandoned pages from two or three years ago look like now, although they probably wouldn't all have had that big pen drawing of a hairy gentlemen in the right-hand column!

However, it is that right-hand column that we shall turn to first.

MySpace have, in their wisdom(?) saved all your old HTML code for you, in that very box that they have named as "BLURBS" or maybe, if you are a 'band', as the more prosaic "BIO". If you are looking at your naked page while logged in, you will notice that, when you hover your mouse over one of the modules on the page, a white or light grey tool bar will appear on the top of it. Click on the little pencil icon on that 'blurbs' box and an editor screen will pop up.

THERE IS ALL YOUR OLD CODE...
Now I would suggest that, before you do anything else, you copy all the contents of that editor box into a notepad file and save it. A lot of it, especially the 'Pimp Your Profile' generated stuff will now, it has to be said, be completely useless. But within all that blurb is all the self-written, self-descriptive TEXT that you had on your profile previously, as well as all the embed codes for all your PICTURES and other media. You'll be wanting those if you want to put all your STUFF back on the page roughly where it was.

THE 'NEW' PAGES ARE MODULAR... Instead of locking all the bits of your page into a fixed two column layout, you can now drag 'n' drop the MODULES where you want them. You don't have to have all of the default modules on your page, you can delete them or, rather, hide them from view. If, for example, you are a band, but you have no gigs listed in your 'forthcoming events' list, then you don't want that empty box taking up real estate on your profile page. Similarly, if you are not a MySpace blogger, then why would you need that box that says "so-and-so has posted no recent blogs" on your profile? Click on its "X" and hide it from view.

In fact, with the exception of the music player and (providing you actually want them on the main page) the comments board, you may safely remove all of the modules on your page and build better replacement ones using HTML...
________________________________

INCLUDING HTML IN YOUR PAGES... I've used one of those 'abandoned' artist profiles of which I spoke earlier as a sort of TEST LAB, so that I see for myself what you CAN AND CAN'T DO when using HTML on profile pages. It's a page that I just happen to still have the password for, because it was a 'collaborative project'.

(HINT: I created the background first, and then used that as the basis of my colour scheme, utilising a handy 'color-picker' plug-in for Firefox called RAINBOW. When you're styling pages, you will always find yourself jotting down a lot of RGB/HEX code as you go along!)



THINGS YOU CAN'T INCLUDE

1) You can't use CSS to style your page. This is probably the main argument 'against' that folks use when they say "Profile 3.0 is not customizable". It's surely a deliberate ploy by MySpace to stop those third-party "PIMP YOUR PROFILE" CSS generators from working (in the name of 'security'). The upshot is, there's simply nowhere for the script to go anymore. If you want to 'pimp' your pages in a way that lets everyone else see the styling and not just you, then you have to work within the limitations of good old-fashioned HTML. Sorry folks, welcome to the dark ages.

2) You can't divide your HTML into <head> and <body>. There's no sneaking scripts onto your page that way, oh no! the MySpace robots will see right through that ploy and remove any 'offending' code, substituting little rows of dots where the code used to be. If you're not careful, that includes everything between the tags.

THINGS YOU CAN INCLUDE

You might not be allowed to express yourself in the form of a Cascading Style Sheet, but you can include just about any kind of customization within the HTML tags of the page elements themselves. It just gets a little more repetitive, as you have to apply changes to each <div> or block of text individually, rather than create a master style for everything (Hahaha, welcome to my world! This is how we did things back in the 'good old days'!)

So, instead of having a CSS script that says something like:-
div, span, table {
       font-family:Arial;
       font-size:12px;
       }
you are going to have to insert the following bit of formatting BEFORE each of your text blocks:-
<div style="font-family:Arial; font-size:12px;">
and then END the text block with </div> to indicate that the styling no longer applies from that point on. Easy peasy, it's exactly the same language, just a slightly different regional dialect!

In fact, you can use that <div> tag to include a whole bunch of styling scripts, that not only change the font, but can fill in a background with a colour or pattern, or add drop shadow effects to the text or the <div> itself. "Here's one I made earlier..."


That HTML box, when viewed via its editor window, contains this (extra spacing and line-breaks added for clarification):-
<div style="background-color:#0d2f5c; padding:12px; text-align:justify; opacity:.60; box-shadow:5px 5px 5px rgba(0,0,0,0.8);">
<p style="font-size:14px; color:#ffffff; text-shadow:1px 1px 1px rgba(0,0,0,1);">
<strong>
All of this music was....bla bla bla...
bla bla bla... yours Mintilly)
</strong>
</p>
</div>
Notice that I've included, within the <div> tag, scripts for background colour (specifying an RGB/HEX colo[u]r), padding (puts a margin around the text), text alignment (you can justify the text, centre it, or range left or right, just like this here word processor), opacity (makes the entire contents of the <div> slightly see-through) and box-shadow (yes, you guessed it! it applies a drop shadow effect to the box). After that there is a further <p> (paragraph) tag, containing instructions about font size and font colour, and adding a subtle drop shadow to the text itself. You will have already specified a default typeface for your page via the MySpace "Customize Your Profile" editor. But if you want to use a different font for just this box, then you can include that too. In theory, that style="" can include anything that would normally (nowadays, in the real world) be done using CSS! You can also include style="" scripts within the tags for IMAGES. This way you can give your pictures borders or drop shadows (as you will have noticed, I like those!), or even make them semi-transparent.

Once you've styled one <div>, you can duplicate the tags from one to another, using good old CUT & PASTE, for near-CSS-like consistency. Or be a complete HTML ANARCHIST and have a different style in every box!

BUT DON'T FORGET TO CLOSE ANY TAGS THAT YOU OPEN!!! If you don't, then the HTML is incomplete and nothing will work on the page. You should 'nest' all your tags on a first in, last out basis as you see from the example.
<div>
  <p>
    <strong>
    All of this music was....bla bla bla...
    bla bla bla... yours Mintilly)
    </strong>
  </p>
</div>
Your code doesn't go entirely unnoticed by the SpaceRobots though. It does get scanned and autocorrected to fit the syntax of their own version of HTML. If, like me, you're accustomed to using <b> and <i> to mean 'bold' and 'italic', then you'll notice, if you revisit your code, that they have 'corrected' this to <strong> and <em>, which are now considered more 'compliant'. No biggy.
_________________________________

So having, somewhere near the top of this page, suggested that you scrap all the modules on your page and replace them with HTML ones, here's how you do it.

1) You remembered to copy all your stuff into back-up text files, right?

2) Delete individual modules by hovering over their popout toolbars and clicking on the "X". You will be asked "Are you sure...?". You are, trust me. You can always put them back again later.

3) Click on that button at the top of the page that says "CUSTOMISE" (it might be spelled with a "zee" where you are?). A bar will appear with further buttons that say "LOOK & FEEL" and "MODULES & MARQUEE". We want the latter.

4) A further "MODULES" button reveals this...



As you can see there are icons for all the different types of module that can go on a profile page. I happen to believe that "Just because you can, doesn't mean you should". The great thing about Profile 3.0 is that it's kind of like a 'proper' website, with an 'index' page and then sub-pages for all your content. You are not forced to wear everything on the front page anymore. There's a menu down the left-hand side of the page that takes visitors to your stuff. So choose wisely and organise.

5) In the top left of that lightbox is an icon that says HTML BOX. As far as I've been able to determine, you can add as many of those to your page as you like.

6) Create a new HTML box on your page. Hover over its toolbar and then click on that little pencil icon. There is your HTML editor. At this point, you can cut and paste back some of that old 'blurb' that you saved in a text file and START CUSTOMISING IT! Try out the HTML tips I've suggested above, but also borrow a copy of "HTML For Dummies" (or something similar) from the library and pick up a few tips from there. Better still, buy second-hand copies of any good books for ready reference (I still consult my copy of "HTML: A BEGINNER'S GUIDE" nearly everyday). Once you are familiar with the syntax, you can slip in all sorts of funny, quirky little things into your code.

7) Here's another very handy tip... Make your pictures (and Youtube clips) FIT the width of the column by  including width="100%" (i.e. specify the width as a percentage rather than size in pixels) somewhere within the <img> tag. If you also delete any height="" references (which will lock the height regardless of what you do to the width, resulting in squashed or stretched pictures), the images will then be in their original aspect ratio, but at the maximum size the column will allow. Arrange your pictures so that the big ones go in the wider left-hand column and the smaller ones go in the narrower right-hand column, that way they will be displayed to their best advantage.
_____________________________

One last(?!?) thing... Creating your own HTML boxes is also the best (nay, the only) way to include hyperlinks within your text. This seems a bit more complicated, but it's really only the equivalent of highlighting a bit of text in your word processor and then telling it to create a link. This is really useful if you want to create a customized module that contains a table of links to all your favourite sites or blogs.

Before each piece of 'linked' text you need to include the tag
<a href="http://***insert the URL here***" target="_blank">
then you enter the text itself...
...and then close it with
</a>
<a> stands for 'anchor', by the way. I hope I'm not stating "the bleedin' obvious" too much when I point out that you have to type in a real web address in place of that blue bit! The target="_blank" nicety is just a way of telling your browser to open a NEW window or tab, rather than opening the linked page in the SAME window, thus navigating away from MySpace. If you don't put that closing </a> after your text, it won't work as a link! It's a good idea to keep a paper record of any links you create, as the MySpace robots automatically turn all of your real URLs into those daft "MSplinks" instead. Should you wish to go back and edit them later, it's nigh on impossible at a glance to figure out which is which! Wot larks, eh?

Now fly my pretties! Try it out for yourselves.



2 comments:

  1. AH-HAHAHA! An actual easy-to-follow instruction guide! Why in the world doesn't THEIRSPACE give us these? Concise, fun, easy to follow & implement~~~deep appreciation for the work & teaching, Minty! Onto more HTML ANARCHY!!!

    ReplyDelete
  2. Look,over ONE MONTH LATER and I'm still struggling! Not because of your excellent instructions, oh no no no, but my own feeble attempts at comprehension. That has been lacking due to un-named ailments of the seizure type. However, I will prevail!
    Thank you for all of your help & patience!

    ReplyDelete