adapting an old myspace layout to spacehey

hey! it’s eugene. been a while since i’ve uploaded a blog post that isn’t related to paramore or my random monthly doings, but i thought this one could be especially interesting here, so.

createblog is a site that’s been brought up a few times here before, a site where people shared codes, graphics, tutorials, etc. for old social platforms. but the items that were most popular were layouts for myspace. i wondered how easy it would be, to adapt a layout originally made for myspace to spacehey. what were the differences between the two, how could the time apart have affected the way it’s coded? plus, if something ever happened to the site (it hasn’t been updated in over a decade, it seems), then many of the codes could become lost media. so perhaps this way, there is a chance of saving them for now and the future. 

(i also saw a blog post on here talking about the site before, which mentioned that inputting the codes didn’t work very well. but surely, there must be some way...!!!)

there are three types of old layouts on there: standard (sometimes referred to as 1.0), div overlay, and 2.0. i found standard to be my best (read: easiest, ahaha) bet at adaptation, since it was pure css. div overlay’s a bit too complicated for me at the moment, changing parts around on top of having to change the tags. 2.0 is also very different from standard in terms of structure, so i didn’t think i’d fare well with that either.

i picked out an ipod-inspired layout from 2005 for my first trial; seemed simple enough. the only things they really edited were the background colors of some sections, and the font. and added a little header. also edited the scrollbar. but simple enough.

the few things i didn’t keep were the scrollbar (my browser doesn’t show them, so i couldn’t see the changes to be made, though admittedly that is also laziness on my part) and the font. the font the writer chose was tahoma, and i… don’t like it much. so i changed the font to courier. i also added style edits to the footer and logo, since the original layout didn’t have such. 

interesting things i noted during the process:

• almost everything is tagged as some sort of text form. usually denoted with a color, and a number. meanwhile, we have h1, h2, h3, h4, heading; those sort of tags. we also have root, if you use it.
• i removed a lot of code that way. some elements i could all stick together, or put into root instead. 
• hex codes were only the numbers and letters. wonder why that changed.
• a lot of active link (a) tags. 
• there were multiple tables. like, just the word / tag table up to 4x. their codes were very similar, and i don’t know what corresponded to which.
• bold, italic, underline, and strikethrough all had their own lines of style code. i know that’s still a thing, but i don’t see it much so i thought it was cool.

a lot of other layouts changed the style of the contact table with a background image. the image had the necessary text on it, and then they’d make the icons and text within the table transparent. the link would remain. it looks weird since the link doesn’t look like it responds to hovering, but it’s also sort of cool. i think it’s because of the whole thing of web friendly fonts.

i also learned about standard cursor css styling through this, without having to upload a png. there’s a lot more of them than i anticipated.

finally, here’s before and after pics. i wish i had a better photo of the before version, but the live preview is broken. so that’s all we have. the border around general-about looks weird if you’re offline or looking at your own profile, but it’s fine like this. 

and one last extra note— i wanna take this ~blog opportunity~ to share one of my fave layout resources: the html group’s layout diagram. i’ve found that some tags don’t work (for whatever reason), but overall it’s helped me a lot. 

well, that’s it~ i don’t really know what else to do with this information, so i thought i’d at least share it. hope you found it interesting! thanks for reading. have a great day :3

• eugene