Report Blog Entry
part 2 of adapting old myspace layouts. this time, i tried a div overlay one!!!
the way div overlay works (from what i can tell) is like, well, an overlay. it attaches to whatever blurb you put the code in, over the profile code. then you make other elements invisible or void their display property in order to clean stuff up. as this is spacehey, however, we (i) must remember three things: not to void the nav, not to void the footer, and not to void the contact table. i don't wanna get in trouble, lolz.
for this test, i chose a simple single-column layout. only one text box, meaning you can organize it however you want. add the photo yourself, add the name yourself, add whatever info about yourself you want... you'll also have to add links by yourself (to blogs, friends, etc.). it scrolls, too, so you can write / add as much as you want. no limit.
as you could tell by the original image below, it seems myspace was more lenient. i had to figure out how to keep the footer, contact box, and nav mostly gracefully (which was the bane of my existence as you'll soon read). this is also the case for other similar div overlay layouts, that are this basic.
but first, taking care of actually cleaning stuff up. you can't stick display:none on main or blurbs, since that'll make everything disappear (and/or remove contact, which isn't good). so, bits and pieces. and in the cases that display:none didn't remove enough, changing the background, opacity, and size would be the next best bet.
next was using z-index to array the elements on top / behind each other in ways that would keep them accessible. and finally, using translations to make sure everything lined up well. the layout tester looked fine, but actually putting it into spacehey was a bit of a pain. had to translate it over and over again. but that's not so bad.
you can see on the left side of the original, dedicated spaces for links. the original writer mapped the links onto those areas, but as we had to keep nav, it was sort of useless. not to mention, those links are not the same as the ones in our contact box or nav-- there aren't even enough of them. so instead, i put the contact box there.
finally, here are before and after pics.
ok, well. it's not that graceful, but i think it turned out well. though maybe i could move nav to the right a little more, i think. it doesn't look that great on mobile either (but looks so good in the app??? for once lolz), but at the very least what's necessary is accessible and it's usable. also, i am now interested in trying more div overlay layouts. they were the most posted on the site, hundreds more pages worth than any other type. and they are the most flexible due to redoing everything, so i'm very curious.
thanks for reading! if any of this was interesting or helpful to you, i'll be glad. if not, then... i appreciate your interest anyway :)
have a lovely rest of your day!
- eugene
06/07/2025 edit: looking back on both, i find it pretty interesting just how specific these writers made their codes. the borders of specific sides, background properties even for just a solid color, the same properties for every single type of text. it's interesting to me.
another thing i've been thinking about was whether or not it's possible myspace had a navbar and footer and stuff that just weren't showed in the screenshots? sometimes its nav links show in a column along the side. i used to think that was just some sort of glitch or error due to the gap in time between now and then, but then i thought about it for a bit longer... i'm still assuming such is not possible, though, because other than that the previews show the layouts exactly as they were in the photos (without ads, lolz). idk.
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
koi
ahhh part 2, let's gooo!!! this was such a fun read ㅠㅠ i rly love seeing how u break everything down. i never realized how surgical you have to be with what to hide and what to keep (it must've been hard trying not to nuke everything, LOL). also it's cool how specific old coders were… like down to side borders and every tiny text property?? idk... it's just v cool to see how they really put care into their lil digital corners and it shows. like, it was theirs :]
ur layout looks mad cute btw, can’t wait to see more overlay experiments!! pls keep posting! >:D yesh yesh!
glad to hear it koi!!!! :D and ugh, i do wish it was easy enough to just edit a few lines of code. but with all of this work, the end is super rewarding!!!
totally agree with all the specificity. in general, web design has come so far in such a relatively short amount of time! (i'd say it's pretty cool if most sites nowadays weren't so boring...) also sorta fun fact (unless u already know, then oops sorry!!!): when border-radius wasn't a thing, people would just make rounded border pngs, and align them to the wanted boxes. i remember when i first started poking at blogger / blogspot code, i went in and deleted every single rounded corner png because it just wasn't needed. how interesting, to have to make so many images in all different colors and angles for something that seems so simple now. and i like that idea you added on, how all of this shows how much care people put into these layouts. and even this site only scratches the surface, i feel. only myspace, but there's millions of other similar social sites and even just people's own personal sites before it became harder to host one! i hope that comes back stronger someday.
i will!!!!!! >:3
(also i think u might find this particularly cool-- while i was looking through layouts to try, i noticed dbsk, shinee, and bigbang had a lot of layouts! the same goes for a good chunk of vkei artists. and i saw one kat-tun one. lolz.)
by meatbuuuuuns; ; Report
i'm so sorry for that huge paragraph omg ㅠㅠ
by meatbuuuuuns; ; Report
it's actually fun when u really put the work into the themes, so i can totally understand how rewarding it must feel once you're done with it :3
also, true!! there has been development, but nowadays everything feels so bland and boring...... yikes... i swear it should be the opposite with all the tools we have now...
wait that's actually so cool omg... the rounded corner pngs???? i actually had no idea people used to do that xD that’s real dedication fr. wow... deleting them all must’ve taken so much time ㅜㅜ but it’s also kinda satisfying to think about LOL. but!! it’s been really cool seeing more people get into making their own sites again-- feels like that spark’s slowly coming back with this gen, and i hope it keeps growing! :0
(wait really!? omg yesss!! i should definitely check out the themes! i thought it was mostly anime ones on that site. thank u for telling me, i’ll def take a look and hopefully get some inspo for future reference >:])
(haha no need to apologize! if anything, i should be thanking you for sharing such a cool piece of info! m(_ _)m)
by koi; ; Report
nara
aww what a cute layout! u did an amazing job!! ^^
thank u nara!!! :D
by meatbuuuuuns; ; Report
ow
HOLYyy
this is so playful this needs more kudos
thank you so much!!! ^^ i knew when i saw it i had to try it, it’s so adorbs. something about 2000s era graphics with citrus just makes them so perfect.
by meatbuuuuuns; ; Report