« Helping each other Forum

What layout is this?

Untitled7-20240409200335I’ve been trying to figure out what layout this is and who made it. I’ve searched almost every keyword i could think of and looked through all of the layout sections. Could anyone help me out with who it’s by? 


Report Topic

3 Replies

Sort Replies:

Reply by Gluma

posted

Is the pic from a user that has the layout, an example from the layout's post, or is it a replication? If it's from a user, you can try asking the person themselves, even if it's been years since they were last online (rip). There's also a chance that the user is the one who made the layout but just never made a layout post, which there's not much you can do if they don't respond (rip). If it's from the layout's post, I'd reverse-image search the pic you used since it supposedly already exists somewhere online (unless the post was deleted or something rip). In fact, I did do a quick image search and while I found similar-ish layouts, I didn't find any layout posts that were exactly that.

While I don't have the answer you're looking for, I'll say that the layout looks simple enough to replicate! If you're willing, you can teach yourself the basics of profile coding (there's already a lot of blogs that talk about that here) and try to code it yourself. It looks like you just need to put red borders on a lot of sections :O there's some layout posts that use the hanging skeleton so you could just snatch the image link from those, too


Permalink Report Reply

Reply by 4cidburn

posted

thanks! i’ve seen about two people with this layout and i’ve looked almost everywhere. i found code for the hanging skeleton but it’s two instead of one. i appreciate the input! i’ll definitely look into some basic coding stuff for my profile to try and replicate this. if you could link some blogs that’d be really helpful! i’m entirely new at something like that. 


Permalink Report Reply

Reply by Gluma

posted

I think this blog post has a lot of good links for coding stuff, especially with profiles! You can also post any questions you have about HTML stuff in the HTML Group here! The group also has a page with some basic coding stuff, along with a profile diagram to help you code the more intricate details of your profile!

I'll also note that the thing that seems the most difficult to replicate is the borders :0 I didn't notice it at first but, with the exception of the pfp border (which seems to be just a simple solid red border), the layout uses groove and ridge borders. I have no idea how they made the shadow of the border close to the color black :/ maybe it's a color thing, idk.

Still, here's some useful code that can help you get started:

<style>

main {

background-color: black; *changes, well, background color of your profile (DOES NOT CHANGE THE LEFT AND RIGHT GRAY AREAS; use body{background-color: insert color here;} FOR THOSE AREAS)*

color: white; *changes text color of profile*

border: 2px ridge red !important; *the border around entire profile*

}

.profile-pic img {

border: 2px solid red !important; *border around profile image*

}

a {

color: red; *changes link color in profile to red instead of blue*

}

.profile .table-section td {

background-color: black; *blue parts of interest table are now black*

color: white; *table text is now white, though you can take it out since the main text is set to white anyway I think*

border: 1px groove red; *border around each individual section in interest table*

}

table, th, td {

border: 3px groove red; *border around entire interests table*

}

.table-section .heading {

border: 3px groove red; *border around interests header*

}

.contact .heading {

border: 3px groove red: *border around contacts header*

} *note: I have no idea how they separated the header from the box itself :/*

.contact .inner a img {

    font-size: 0;

}

.contact .inner a img:before {

    font-size: 1em;

    display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

content: ">" *changes Add to Friends icon*

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

content: ">" *changes Add to Favorites icon*

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

content: ">" *changes Send Message icon*

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

content: ">" *changes Forward to Friend icon*

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

content: ">" *changes Instant Message icon*

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

content: ">" *changes Block User icon*

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

content: ">" *changes Add to Group icon*

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

content: ">" *changes Report Profile icon*

}

</style>

asterisk comments can be deleted when copying this! also, you can change the "2px" into a bigger/smaller border width by simply increasing/decreasing the number. I tried to replicate the image but idk if I got the border sizes correct

The groove colors may not be the right color but, like I said, I have no idea how the person got the groove/ridge shadows to be black so...¯\_(ツ)_/¯ I'd definitely suggest asking the people who have the layout where they got it from!

If there's anything off with the code I wrote, feel free to change it and/or message me about it! I wasn't able to properly test them out on my profile because apparently whenever I re-paste my original code back, my profile gets fucked up :,) so my apologies if anything goes awry!


Permalink Report Reply