idioteque's profile picture

Layout published by idioteque

published
updated

Add to Favorites

View Layouts

View Profile

Report Layout

plastic

Tags: 2000s, y2k, tabs, customizable, minimal, ummhmh

Description:

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:

Layout Screenshot
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.


Comments

Displaying 16 of 16 comments ( View all | Add Comment )

rider ^_^

rider ^_^'s profile picture

using!!! tsymmmmm ^_^


Report Comment

bear

bear's profile picture

gonna use this it's so cool!


Report Comment

#🎧 𝑨𝑳𝑺 ✮⋆˙

#🎧 𝑨𝑳𝑺 ✮⋆˙'s profile picture

SUPER SUPER COOL!!! USING!


Report Comment

Boran

Boran's profile picture

Using


Report Comment

'livia ✮

'livia ✮'s profile picture

using!!


Report Comment

saffr

saffr's profile picture

using !!!!love this sm :)


Report Comment

nouho

nouho's profile picture

the tabs on the right don't work


Report Comment



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

Taff

Taff's profile picture

using!!


Report Comment

olivia

olivia 's profile picture

will use and customize!


Report Comment

♪ COSMO/OREL ♪

♪ COSMO/OREL ♪'s profile picture

using!


Report Comment

Axelotl​

Axelotl​'s profile picture

Love this


Report Comment



thank youuuu!! ^_^

by idioteque; ; Report

𓏏 vae ╱ vaers

𓏏      vae   ╱  vaers's profile picture

:33< can someone please explain how I'm supposed to do this I'm really confused :(


Report Comment



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 ⚢

ciel ⚢'s profile picture

im obsessed w ur layouts i aspire 2 be as good at coding as u ! :3


Report Comment



using this btw

by ciel ⚢; ; Report

HEXAN LAYOUTS

HEXAN LAYOUTS's profile picture

for some reason when i use the the pink one it doesnt work, is there a step im missing ?


Report Comment



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 ⁾

⁽ Z a i i ⁾'s profile picture

using! it rlly nice!!


Report Comment



thank you!! ^_^

by idioteque; ; Report