Myspace and overlays?

[Chicky]

Okay so i'm a pathetic coder. I barely know html let alone css and as for php pah!

I'm looking to edit my myspace profile, but i don't want to use the usual myspace gen crap where it changes background colour etc. I want to make an overlay.

Now i have this .htm file

http://www.hotspots-place.co.uk/CODE.htm

which links to all the right places on my myspace profile and i basicly want to overlay ( think it's called) it over the top of my current profile. Hiding all the default comments and about me crap.

I understand it's quite a hard job but i honestly don't have a clue how hard. Any help from the forum members would be greatly apreciated.

cheers,

[voh]

Since I never saw the use of myspace, all I can offer is: "good luck!"

[HeirOfNorton]

Taking a look at myspace and how it works, I don't think it's really possible. Not without some major hacking, at the very least. Anyone who knows better do correct me if I'm wrong, but it looks like the MySpace pages are generated on the server side by code that you don't get to change. You can edit the idividual sections, and do whatever you like with the html in those, but not with the layout of the page as a whole. They do this mainly so you can't cover over the advertisements, but the upshot is that they just don't let you do it.

If I am indeed correct on this, about your only option would really be to either a) live with it, or b) get some real web-space (there are some decent free ones) and put your page on there, possibly linking to it from MySpace.

Of course, all of this was from looking at a single MySpace profile for about two minutes, so I may be writing out my arse. 

HoN

[monkey0506]

I think HoN is mostly right.  But with some CSS...I think you can over ride it.  It's really a simple bit of CSS if I'm right...but I hate to generate a little bit of customized CSS and then leave you to your HTML when most of the HTML could be converted to CSS anyway...

There's just some things in your HTML that annoy me.  So I'm fixing them...Of course it's taking me some time because I'm having to look up practially every CSS property ever because I don't really know it, just how to use it.

Just...do me a favor...indent your HTML properly next time?  It makes it so much easier to follow...

[EDIT:]

Interesting problem...there's not really a way to click the "Save" or whatever button after Previewing the new look...If you could work around that...I came up with this:

Code: ags

<style type = "text/css">
  body {
    background-color: rgb(0,0,0);
    color: rgb(153,153,153);
    overflow-x: hidden;
    }

  a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    }

  a:link {
    color: rgb(153,153,153);
    }

  a:visited {
    color: rgb(102,102,102);
    }

  a:hover, a:active {
    color: rgb(204,204,204);
    }

  div.NathansProfile_Background {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 105%;
    background-image: none;
    background-color: rgb(0,0,0);
    }

  div.NathansProfile_Friends {
    height: 236px;
    width: 120px;
    overflow-y: show;
    overflow-x: hidden;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(0,0,0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    position: relative;
    top: -90px;
    }

  div.NathansProfile_MySpace {
    background-color: rgb(229,229,229);
    color: rgb(0,51,153);
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    }

  div.NathansProfile_MySpace div a.text {
    font-style: underlined;
    }

  div.NathansProfile_MySpace_Copy {
    color: rgb(0,0,0);
    font-style: underlined;
    }

  img, a:link img, a:visited img, a:hover img {
    border-style: none;
    border-width: 0px;
    }

  table.NathansProfile {
    width: 73%;
    border-style: solid;
    border-width: 0px;
    padding: 0px;
    border-spacing: 0px;
    background-color: rgb(255,255,255);
    margin-left: auto;
    margin-right: auto;
    }

  td.NathansProfile_AboutMe, td.NathansProfile_Music {
    width: 21%;
    text-align: center;
    }

  td.NathansProfile_BlankSpace {
    width: 2%;
    }

  td.NathansProfile_Friends {
    height: 450px;
    }

  td.NathansProfile_Links {
    width: 21%;
    height: 79;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    }

  td.NathansProfile_Pics {
    width: 34%;
    margin-left: auto;
    margin-right: auto;
    }
</style>
<div class = "NathansProfile_Background">
  <div>
    <table class = "NathansProfile">
      <tr>
        <td colspan = "5">
          <img src="http://img.photobucket.com/albums/v54/oversizedchicken/lgogog.gif" width="720" height="53">
        </td>
      </tr>
      <tr>
        <td class = "NathansProfile_Links">
          <p>
            <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=7196208">Add</a><br />
            <a href="http://comments.myspace.com/index.cfm?fuseaction=user.homeComments&friendID=7196208&Mytoken=bcafe2d6-75a5-48f9-b4ae-bbc9c422615b">Comments</a><br />
            <a href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=7196208">Message</a><br />
            <a href="http://comments.myspace.com/index.cfm?fuseaction=user&circuitaction=viewProfile_commentForm&friendID=7196208&name=Nathan&MyToken=50f5aa99-67e3-4ea6-93f1-593d9ff6e367">Comment</a>
          </p>
        </td>
        <td class = "NathansProfile_AboutMe" rowspan="4">
          <p><img src="http://img.photobucket.com/albums/v54/oversizedchicken/meemem.gif" width="43" height="22"></p>
          <p>I wanna be a web designer. No, seriously.</p>
          <p>I'm a creative guy; I do a lot of artwork, mainly digital media. I've been playing the drums for some three and a half years now.</p>
          <p>I'm in love with the most beautiful girl in the world.</p>
          <p>I really wish I could see my old school friends a lot more, I try but I'm very busy with college and things at the moment. There's so many friends that I really do love to pieces but they just don't know.</p>
          <p>That's about it really. x</p>
        </td>
        <td class = "NathansProfile_BlankSpace" rowspan="4">
          &nbsp;
        </td>
        <td class = "NathansProfile_Music" rowspan="4">
          <p><img src="http://img.photobucket.com/albums/v54/oversizedchicken/mymusic.gif" width="116" height="22"></p>
          <p>I like a wide range of music, contrary to most people's beliefs. I'm a great fan of the cure thanks to my girlfriend and her dad. I also really appreciate bands such as The Pixies, Sonic Youth, Radio Head and the like.</p>
          <p>I've always been a great Nirvana fan, as many people know. This has not left me and I can't get enough of the man himself when I'm in the right mood.</p>
          <p>I also really like my metal, there's far too many bands to list but I've been listening to In Flames and Ill Nino at the moment.</p>
        </td>
        <td class = "NathansProfile_Pics">
          <div align = "center">
            <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=7196208&MyToken=50f5aa99-67e3-4ea6-93f1-593d9ff6e367">
              <img src="http://img.photobucket.com/albums/v54/oversizedchicken/mememe.gif" width="160" height="120" />
            </a>
          </div>
        </td>
      </tr>
      <tr>
        <td rowspan="3">
          <div align="center">
            <img src="http://img.photobucket.com/albums/v54/oversizedchicken/kurtnote.gif" width="113" height="535">
          </div>
        </td>
        <td>
          <div align="center">
            <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=7196208&MyToken=50f5aa99-67e3-4ea6-93f1-593d9ff6e367">Pics</a>
          </div>
        </td>
      </tr>
      <tr>
        <td height="41">
          <div align="center">
            <img src="http://img.photobucket.com/albums/v54/oversizedchicken/friends.gif" width="118" height="26">
          </div>
        </td>
      </tr>
      <tr>
        <td class = "NathansProfile_Friends">
          <div align="center" class = "NathansProfile_Friends">
            <p>
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=7508430"><img src="http://myspace-463.vo.llnwd.net/00418/36/49/418419463_s.jpg" width="80" height="100"></a>
              <br />
              <a href="http://myspace-463.vo.llnwd.net/00418/36/49/418419463_s.jpg">Amy</a>
            </p>
            <p>
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=27826148"><img src="http://myspace-551.vo.llnwd.net/00502/15/55/502895551_m.jpg" width="80" height="80"></a>
              <br />
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=27826148">Steve</a>
            </p>
            <p>
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=12254445"><img src="http://myspace-679.vo.llnwd.net/00521/97/64/521514679_m.jpg" width="80" height="80"></a>
              <br />
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=12254445">Tom</a>
            </p>
            <p>
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=9939994"><img src="http://myspace-081.vo.llnwd.net/00525/18/01/525931081_m.jpg" width="80" height="80"></a>
              <br />
              <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=9939994">Kell</a>
            </p>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class = "NathansProfile_MySpace">
    <div align="center">
      <a class = "text" href = "http://viewmorepics.myspace.com/misc/about.html?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">About</a>&nbsp;|&nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/index.cfm?fuseaction=misc.faq&z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">FAQ</a>&nbsp;| <a class = "text" href = "http://viewmorepics.myspace.com/misc/terms.html?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Terms</a>&nbsp;| &nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/misc/privacy.html?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Privacy</a>&nbsp;| &nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/misc/safetytips.html?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Safety Tips</a>&nbsp; |&nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/misc/contact.cfm?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Contact Myspace</a>&nbsp;| &nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/misc/promote.html?z=1&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Promote!</a>&nbsp;| &nbsp;<a class = "text" href = "http://viewmorepics.myspace.com/misc/advertise.cfm?&Mytoken=E5785C2D-F998-7506-9A8A127F4F5630D28687895" target = "_blank">Advertise</a>
    </div>
    <br />
    <a href="http://www1.myspace.com/">
      <div align="center" class = "NathansProfile_MySpace_Copy">
        &copy;2003-2006 MySpace.com All Rights Reserved.
      </div>
    </a>
  </div>
</div>

I was just going to put it in the About Me section...but like I said...there's no way to click the Submit button to save it.  And then I'm also not 100% sure the alignment worked either...it should have forced the entire thing to be shifted as far up and to the left as it could be (and still be shown)...but...

Anyway...if this helps...good.  If it doesn't...I had fun screwing with it anyway.

[EDIT:]

I updated the code, so it should work.  Thanks for helping me get that sorted out.  I feel so much better now.    Oh...and I added a little blurb at the end with the MySpace bottom link and copyright bar...I figured that way they can't say you covered their links.  Let me know what happens!

[EDIT:]

Oh egads!  There's still something lurking off to the side!!!  I'll see about getting it fixed.

[EDIT:]

I changed the width of the background div to 105%...it stretches the page some, but it covers everything that way.  At least it does in the empty profile I created using an alternate email address of mine.  If it's too short, try altering the line:

Code: ags

div.NathansProfile_Background {
/* ... */
  width: 105%;
/* ... */
}

To a different width.

[EDIT:]

I updated the code so that the horizontal scrollbar is disabled.  If you want to re-enable it, remove thie line:

Code: ags

body {
/* ... */
  overflow-x: hidden;
/* ... */
}

[EDIT:]

Updated the code so your friends are in their own little scrollable section.  Well...I gotta RUN!!! NOOOWWW!!!

[Chicky]

Hey Monkey.

Thanks for that! The reason the html is so messy is all down to dreamweaver, like i said i'm pathetic at writing anything in notepad so that's the best way for me as im mainly interested in the graphic side of things.

As for myspace, to submit what you do is make a bookmark which has the url 'javascript:document.forms[1].submit()' (experiment with forms[1] [2] or [3] untill it works. You can then submit your html without the need of the button. just incase anyone if reading this thread who has the same problem.

Anyway, i really apreciate the help pal i'll try out the code later and see how it goes.

[Chicky]

Hey again Monkey.

So the overlay does work quite nicely but because if the width of the thing it doesnt cover up all the myspace crap underneath. How would i go by making a black whiteness behind the overlay to cover up the myspace stuff?

thanks again.

[Renal Shutdown]

Can you set all the myspace crapola to all be one color? IE, white background, white text, etc?

[monkey0506]

@Spleen...if you added all the CSS code to do it...yes...yes you could.  But they have a lot of pseudo-classes implemented...so it would take...a while to find and properly set all of them.

@Chicky...I thought just using "position: absolute;" would do it.  I needed to set "top: 0px;" and "left: 0px" as well so it will align to the very top left pixel.  And I'll go ahead and add a div behind everything at 100% width to do the black background layover (I'll edit the previous code in a few minutes).  Thanks for the javascript link idea.  I never would have thought of it.

[EDIT:]

I updated the code.  And it should work now.  So the joy floods over me.

I'm going to add you on my profile okay?  I'm the face-scan guy.  You'll know me.

[EDIT:]

I just noticed a couple of things:

a) You clearly don't like to edit your posts.
2) You asked for a "black whiteness" to cover the excessive MySpace crap...o.0

And as for this DreamWaffer thing...I actually dislike most HTML editors I have used.  I have mainly used some text-based ones for syntax coloring...but those just got on my nerves in the end.

I have used MS FrontPage 2003, and it actually helped me align some things correctly before...but other than that, I like to work with the code myself.  Kind of like the way I prefer the scripts in AGS over the interaction editor.  Just preference...

[Chicky]

Hey Monkey, you're ace. Thankyou VERY much. I've disabled both horizontal scrolling and vertical now. I'm currently fiddling about with the height and width of things so my profile looks right in both IE and firefox. Only problem now is that the yahoo advery banner covers my banner, bugger!

Seriously though, you've helped me understand css a lot more. Hopefully in time i will be able to do this stuff myself!

[monkey0506]

I guess the happiness is mutual then.  And you've inspired me to help my friends with their profiles.  Glad to have helped you.

[Chicky]

Sorry pal but, check your pm's

[monkey0506]

I've got it figured out, I just have to work out some positioning issues.  And just a thought...you might not want to disable vertical scrolling, because in lower resolutions you can't see all of the text (such as 800x600 which is what I use (not necessarily by choice mind you)).

And actually as long as you allow vertical scrolling I think I've got it worked out the way you wanted so I can edit the code now.

[EDIT:]

I have to go...but just so you can have it, here's the link to the CSS Reference page.