a really squeezed layout with tabs and easy customization ~
design wise, it's inspired by early 2000s little sites! the name itself comes from the direct inspiration, a radiohead fansite, "greenplastic" (specifically the 2000 version). i loved the simplicity of the design, and i started doing something inspired by it... and ended up coming up with a way of doing a tab-based layout using hover states!!!!! mayhaps there's a better way to use them... but this time it was playing around a bit
features:
tabs !!! hover over the tabs on the right to see other sections. let the mouse out of the section itself to close it
design customization! you can change colors and the corners roundings to your likings. there's also an option for a banner image (short & wide images preferred), and background image (tiled / repeating images are preferred)
take a look at the first lines of code, the comments explain everything. i've also made a few premade themes for you to use if you're lazy! i might or might not add more themes as time goes by
buggy stuff:
not mobile friendly... i'm gonna work on a future layout which includes tabs, and regular view when on mobile!
this thing is not entirely responsive. depending on the device, the scaling might be off. again, i'm still learning so i'll make sure next time it'll be 100% responsive!
please don't be afraid to ask me about something that you see as off. i love to help, and i'll fix it as soon as humanly possible!
templates
IMPORTANT: you need to paste one of these codes AFTER the main layout, otherwise it will not work. also, it will override any changes you've done in the code itself
click on their name to expand
plastic - black/grunge
<style>
:root {
/* background of page itself */
--backgrounds-color: rgba(0, 0, 0, 0.8);
/* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */
--accent: black;
/* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */
--banner: url(https://images2.imgbox.com/ef/f5/Y47D9sv8_o.png);
/* the background color. if you have a background image, this color is used for the shadow on the credits text */
--body-background-color: black;
/* the background image, inside the parentheses. leave the parentheses empty for no image */
--background-imagege: url(https://images2.imgbox.com/ef/f5/Y47D9sv8_o.png);
/* border radius for the main page! in px - 0px for no corner-rounding */
--border-radius: 10px;
/* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */
--title-border-radius: 0px;
/* general font color, also used for links */
--font-color: white;
/* font color used on titles only */
--title-font-color: white;
/* color of borders */
--border-color: darkgray;
}
</style>
plastic - pink/melody
<style>
:root {
/* background of page itself */
--backgrounds-color: white;
/* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */
--accent: pink;
/* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */
--banner: url(https://images2.imgbox.com/93/3f/xHpR3bP2_o.png);
/* the background color. if you have a background image, this color is used for the shadow on the credits text */
--body-background-color: lightyellow;
/* the background image, inside the parentheses. leave the parentheses empty for no image */
--background-imagege: url();
/* border radius for the main page! in px - 0px for no corner-rounding */
--border-radius: 16px;
/* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */
--title-border-radius: 6px;
/* general font color, also used for links */
--font-color: hotpink;
/* font color used on titles only */
--title-font-color: hotpink;
/* color of borders */
--border-color: hotpink;
}
</style>
plastic - black/red
<style>
:root {
/* background of page itself */
--backgrounds-color: black;
/* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */
--accent: darkred;
/* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */
--banner: url();
/* the background color. if you have a background image, this color is used for the shadow on the credits text */
--body-background-color: black;
/* the background image, inside the parentheses. leave the parentheses empty for no image */
--background-imagege: url(https://images2.imgbox.com/55/d8/FW07dmLn_o.png);
/* border radius for the main page! in px - 0px for no corner-rounding */
--border-radius: 0px;
/* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */
--title-border-radius: 0px;
/* general font color, also used for links */
--font-color: white;
/* font color used on titles only */
--title-font-color: white;
/* color of borders */
--border-color: red;
}
</style>
plastic - blue/sky
<style>
:root {
/* background of page itself */
--backgrounds-color: white;
/* accent color - used for banner, titles, tabs, scrollbars, and link hover colors. */
--accent: lightblue;
/* the banner image, inside the parentheses. leave the parentheses empty for no image. short, wide pictures look better */
--banner: url();
/* the background color. if you have a background image, this color is used for the shadow on the credits text */
--body-background-color: lightcyan;
/* the background image, inside the parentheses. leave the parentheses empty for no image */
--background-imagege: url(https://images2.imgbox.com/5e/73/xWInCa7c_o.png);
/* border radius for the main page! in px - 0px for no corner-rounding */
--border-radius: 0px;
/* border radius for the little titles! in px - 0px for no corner-rounding - lower values recommended */
--title-border-radius: 0px;
/* general font color, also used for links */
--font-color: blue;
/* font color used on titles only */
--title-font-color: #255fff;
/* color of borders */
--border-color: blue;
}
</style>
rules:
edits to the main code or code mashups are okay, keep in mind the code itself is minified (compressed so it doesn't take much space). you can unminify the code to make it readable and editable using https://unminify.com/
reupload is okay. idc! credits are not neccessary... the layout's code itself has credits on the far left bottom corner ... you can also delete that from the code if you think it looks ugly okay
Preview:
click on the image for a larger preview
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Oh that's really weird... Normally these kind of bugs happen when someone tries to merge two layouts (like, pasting two different layout codes at once) Check your profile code and make sure there aren't layout codes conflicting! It's recommended to only use one
To be honest I looked at the code in your profile's source, and it looks a lot different than the original code itself... It's split into multiple tags for some reason? It's a little confusing to troubleshoot it like this... Have you tried deleting it (Just the code, not your profile content !) and then copy-pasting it freshly?
no, I was using this before they removed the tabs T_T. they removed the tabs because it just didn’t work. I can link you a profile that has this exact same problem with the original unedited version of ur layout
Oh, so I'm guessing you're trying to see tabs from mobile? Most of my layouts aren't really usable on mobile... I checked the profile you linked on PC and it works fine...
I actually made this based on hover states, so when you HOVER over the tabs with your mouse they show up... There's actually no hover states on mobile, just clicks (taps) and these tabs don't really respond to clicks or taps, and I can't do that from the way they're structured, (they're divs, a non-clickable HTML element, unlike links that respond to 'clicked' states)
There's a way to make them clickable, if I create new elements as links and make them functional by click, and I was planning to do this very same thing with my second try of a tabs-based layout... But I need time
So the last thing might be the browser. I think Firefox hasn't implemented the CSS :has selector yet, and although I'm not completely sure if I used a :has selector, I probably did... I use Chrome for everything I code, so yeah...
There's a way to make it work on Firefox, enabling the CSS :has selector option in the browser flags. A quick Google search will bring you instructions on how to do it
I also use chrome as well. Looking at other peoples profiles and trying to do the hover thing on the tabs don’t work. Clicking on it doesn’t do anything either. This isn’t just a me problem, my other friend had this same problem and that’s why I asked then to change your layout entirely
i'm sorry!! the layout code i uploaded didn't have the style tags... that was my fault >_< it should work now if you copy and paste it! so sorry for that again...
Add to Favorites
View Layouts
View Profile
Report Layout
Comments
Displaying 16 of 16 comments ( View all | Add Comment )
rider ^_^
using!!! tsymmmmm ^_^
bear
gonna use this it's so cool!
#🎧 𝑨𝑳𝑺 ✮⋆˙
SUPER SUPER COOL!!! USING!
Boran
Using
'livia ✮
using!!
saffr
using !!!!love this sm :)
nouho
the tabs on the right don't work
Oh that's really weird... Normally these kind of bugs happen when someone tries to merge two layouts (like, pasting two different layout codes at once) Check your profile code and make sure there aren't layout codes conflicting! It's recommended to only use one
by idioteque; ; Report
Yeah still no ):. I checked another persons profile and their tabs didn’t work either.
by nouho; ; Report
To be honest I looked at the code in your profile's source, and it looks a lot different than the original code itself... It's split into multiple tags for some reason? It's a little confusing to troubleshoot it like this... Have you tried deleting it (Just the code, not your profile content !) and then copy-pasting it freshly?
by idioteque; ; Report
Yeah, I had my friend fix some things up for me and remove the tabs entirely. So it’s based on yours but not the original.
by nouho; ; Report
I don't know if I understand but If they removed the tabs for you... then it makes sense that the tabs don't work anymore? @_@
by idioteque; ; Report
no, I was using this before they removed the tabs T_T. they removed the tabs because it just didn’t work. I can link you a profile that has this exact same problem with the original unedited version of ur layout
by nouho; ; Report
Please do !! Would love to fix this it's a very weird issue @_@
Either way, I'm planning on doing a similar layout soon with tabs and all... I've learned quite a bit more since I made this
by idioteque; ; Report
https://spacehey.com/profile?id=2013817
if u need more lmk but I’m on mobile and don’t feel like compiling links X_x
by nouho; ; Report
https://spacehey.com/profile?id=2013817
if u need more lmk but I’m on mobile and don’t feel like compiling links X_x
by nouho; ; Report
Oh, so I'm guessing you're trying to see tabs from mobile? Most of my layouts aren't really usable on mobile... I checked the profile you linked on PC and it works fine...
I actually made this based on hover states, so when you HOVER over the tabs with your mouse they show up... There's actually no hover states on mobile, just clicks (taps) and these tabs don't really respond to clicks or taps, and I can't do that from the way they're structured, (they're divs, a non-clickable HTML element, unlike links that respond to 'clicked' states)
There's a way to make them clickable, if I create new elements as links and make them functional by click, and I was planning to do this very same thing with my second try of a tabs-based layout... But I need time
by idioteque; ; Report
No, I’ve been on my laptop this whole time.
My other friend who has a windows computer told me the tabs don’t work for them either.
by nouho; ; Report
So the last thing might be the browser. I think Firefox hasn't implemented the CSS :has selector yet, and although I'm not completely sure if I used a :has selector, I probably did... I use Chrome for everything I code, so yeah...
There's a way to make it work on Firefox, enabling the CSS :has selector option in the browser flags. A quick Google search will bring you instructions on how to do it
by idioteque; ; Report
I also use chrome as well. Looking at other peoples profiles and trying to do the hover thing on the tabs don’t work. Clicking on it doesn’t do anything either. This isn’t just a me problem, my other friend had this same problem and that’s why I asked then to change your layout entirely
by nouho; ; Report
†﹕ arze ◞
using!!
olivia
will use and customize!
♪ COSMO/OREL ♪
using!
Axelotl
Love this
thank youuuu!! ^_^
by idioteque; ; Report
𓏏 vae ╱ vaers
:33< can someone please explain how I'm supposed to do this I'm really confused :(
Copy and paste to your your profile
by JstUrHope; ; Report
:33< I'm aware but it doesn't work for me for some reason
by 𓏏 vae ╱ vaers; ; Report
Oh ok sorry
by JstUrHope; ; Report
i'm sorry!! the layout code i uploaded didn't have the style tags... that was my fault >_< it should work now if you copy and paste it! so sorry for that again...
by idioteque; ; Report
:33< oh it's okay! thank you for fixing lol ^_^ your layouts are awesome btw!!!
by 𓏏 vae ╱ vaers; ; Report
ciel ⚢
im obsessed w ur layouts i aspire 2 be as good at coding as u ! :3
using this btw
by ciel ⚢; ; Report
HEXAN LAYOUTS
for some reason when i use the the pink one it doesnt work, is there a step im missing ?
nvm got it to work!! using !
by HEXAN LAYOUTS; ; Report
oh :D i'm glad it worked! thank you so much <3
by idioteque; ; Report
⁽ Z a i i ⁾
using! it rlly nice!!
thank you!! ^_^
by idioteque; ; Report