Bela 🔊⬆'s profile picture

Published by

published
updated

Category: Blogging

My Layouts


You can find my layouts HERE

You can find my resources HERE

As a layout creator, nothing feels better than someone using my layouts, so thank you!

If you have any questions, you can ask here or in the layout comment sections. You can also friend me to send a message if you'd like.

updated: 08/01/2021   07/04/2023

I'm only going to say this here: 

If you use any of my layouts as a base, please change more than just the background color or the font. 

Using a layout as a base (to create your own layout and post it on the layouts section and claim it as your own) means you're changing everything about it to fit your own design idea or at the very least a different concept using the same style of borders, box shapes, or format of a profile. 

You can't just change the colors around and the font and then repost a layout and claim you created it. Everyone who has worked on creating various layouts can read the code others do and we can tell who's layout it is based on the code lol it's discouraging seeing someone take a layout I took hours or days creating and then just change the colors/font and then post it as theirs. 

just putting this out there so you guys are aware. :)

also! just because I say you can use my layouts as a base, doesn't mean other people creating layouts feel the same way. remember to ask first before taking a layout and reposting it as yours. 


63 Kudos

Comments

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

‧͙⁺˚*・༓☾𝖘𝖊𝖛𝖊𝖓☽༓・*˚⁺‧͙

‧͙⁺˚*・༓☾𝖘𝖊𝖛𝖊𝖓☽༓・*˚⁺‧͙ 's profile picture

hii im using your purple neon layout but the profile background doesnt appear :( im scared i did soemthing wrong..


Report Comment



I think it's because it's an imgur picture. Imgur blocked spacehey so any pictures loading from imgur don't show up. The picture is still up on imgur though, you can save it to another website like img.bb just replace the url

by Bela 🔊⬆; ; Report

Nehiri

Nehiri's profile picture

Hello!!! I'm using your black and gray layout and I was wondering how I could change the names of interests! I can't seem to figure out where in the code i'm supposed to put it :(


Report Comment



sorry for the late reply! here's the code:


:root{
--topic1: "Hobbies";
--topic2: "Bands";
--topic3: "Tech";
--topic4: "Fandoms";
--topic5: "Scenes";
--topic6: "Writers";
}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing: normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}

by Bela 🔊⬆; ; Report

no worries! already figured it out tho lol

by Nehiri; ; Report

cherubsReunion

cherubsReunion's profile picture

in your neon fun layout, may i ask how you managed to put the entire profile into a scroll box? its rlly cool and i have ideas for stuff liek it :')


Report Comment



sure! the code is this:



.container{
width: 100%;
}
main{
width:800px;
height:500px;
overflow-y: scroll;
margin: auto;
}



after that I set the navigation background color to transparent. have fun creating layouts :)

by Bela 🔊⬆; ; Report

tysm!!!!! youre the sweetest

by cherubsReunion; ; Report

bonez

bonez's profile picture

hii!! im using your red/black layout (it is so epic thank u). I wanted to reach out because I really wanna put images on the sides of the screen like this person has here https://spacehey.com/thatonespy but i cant figure it out for the life of me!! I am not familiar with coding at ALL and i have been google searching what code to insert but i think im struggling with where in the code to put it. Either way if you're able to help I'd super appreciate it!! ty for all u do :3


Report Comment



also idk if it matters but i wanna put images like this https://i.kym-cdn.com/photos/images/original/001/879/084/63d.gif on the side of screen like in the corner or smth idrc as long as its there yknow

by bonez; ; Report

I have the code in this layout. If you need further help let me know :)

by Bela 🔊⬆; ; Report

to make another image one the left side just make another div and title it something else like for example div class="leftsideimage" and in the code, instead of right:0; change it to left:0;

by Bela 🔊⬆; ; Report

i think i got it thank u sm for the help!!

by bonez; ; Report

you're welcome :)

by Bela 🔊⬆; ; Report

reese ʕ •ᴥ•ʔ ☆彡

reese ʕ •ᴥ•ʔ ☆彡's profile picture

Hey im trying to edit the color of the logo in ur cute pink layout u made :( it’s not the right color no matter what i do!! Also whenever i try editing the search bar/buttons color it just disappears! Thank u in advance <3


Report Comment



I have a blog to help you with this! Just look under the section that says "Changing the Spacehey Logo" https://blog.spacehey.com/entry?id=5523

by Bela 🔊⬆; ; Report

Thank you!! Do u have any advice for changing the color of the search bar and button? Any time i try to change the colors it makes them disappear

by reese ʕ •ᴥ•ʔ ☆彡; ; Report

yeah np :)



/* the search wrapper and button */

nav label{
color: white; /* this is for the Search Users: text */
}

.search-wrapper input[type=text] {
background-color: transparent;
border: 1px solid white;
color: pink; /* this is for the text when you type inside the search box */
}

button{
border: 1px solid white;
font-family: "arial";
background-color: transparent;
color: white;
}

by Bela 🔊⬆; ; Report

Tysm 💜💜

by reese ʕ •ᴥ•ʔ ☆彡; ; Report

yuugen

yuugen's profile picture

hello ! I'm using your yellow box shadow layout (love it <3) but for some reason when I pin a blog post, the box that contains the post glitches and I can't seem to find a way to fix it :( it's happening on my profile right now. thank you in advance !!


Report Comment



sorry for getting back to you late. try adding this code to your profile:


.blog-preview p a{
box-shadow:none!important;
border:none!important;
}

by Bela 🔊⬆; ; Report

it worked, thank you !!

by yuugen; ; Report

VSJ

VSJ's profile picture

Hi! Your starry nights layout is beautiful! I was tinkering with it by adding new gif but things went awry. How can I replace topmost starry night gif with another without messing it up? Simple replacement wouldn't work. Thank you :)


Report Comment



in the nav:before code just replace the bold part with the url of an image

background-image: url('url-goes-here');
if you still have issues let me know!

by Bela 🔊⬆; ; Report

Alas i have been trying that. Tried it again now. Any gif url except one you used gives a blank. :(
I must be making some silly mistake.

by VSJ; ; Report

do you mind sharing what image you chose?

by Bela 🔊⬆; ; Report

Gif

Say i wanted this one for example. What needs to be done? Once i learn maybe i can tinker the rest myself!

Thanks in advance. :)

by VSJ; ; Report

Sunflower★Zombie

Sunflower★Zombie's profile picture

hi ! i'm using your forest and frame layout (its very pretty) and im struggling to make my about me text color match the lighter text colors everywhere else on the profile. and i can't figure out how to show my links on the screen either !


Report Comment



I don't know if you're still having this issue, but all the colors look okay to me on my screen. Let me know if you still need help tho! :)

by Bela 🔊⬆; ; Report

hey ! yeah i had a friend help with the colors ty tho !

by Sunflower★Zombie; ; Report

Blaise ♱

Blaise ♱'s profile picture

Hi! I'm using your red layout and changing the colors to black and white; I was wondering how I would change the About Me text color? I can't find it anywhere in the code.


Report Comment



nevermind i eventually figured it out lol

by Blaise ♱; ; Report

Speak!

Speak! 's profile picture

how do I add links to the "view my" section. Y'know the section underneath the profile that lists: forum topics and bulletins. That one! I want to add more links to that.


Report Comment

BunnaBee

BunnaBee's profile picture

hiiiiii
i am in LOVE with your fairy layout I'm just not a huge fan of the particular picture of the fairy
could you give me some advice on how I find my own picture and add it in place of the pink one? that's literally the one and ONLY thing id change about it
<3


Report Comment



Under the .fairy code you can change the background image to any you want. I think any png image would look better since it'll make it stand out more. You can search google for images like "fairy png" and pick any image you like :)

by Bela 🔊⬆; ; Report

Thank you <3

by BunnaBee; ; Report

corvads

corvads's profile picture

Hai!! I literally started learning HTML like 4 hrs ago lawl...how do I make the borders around my blurbs ToT


Report Comment



Around the entire blurbs area its

.blurbs but around the individual sections it woul be like

.blurbs .section:nth-child(1) for the about me and

.blurbs. section:nth-child(2) for the who I'd like to meet

by Bela 🔊⬆; ; Report

fentanyl <3

fentanyl <3's profile picture

Hey! On your black layout, I was wondering how I would get a box behind the profile picture, name, and online area similar to the boxes around the rest of the things (sorry if I explained this terribly). Thanks <3


Report Comment



sure thing, you can change the padding-bottom to a lower number if you don't want the box too long. the code to copy is this:



.general-about .details{
border: var(--borders);
padding-bottom: 70px;
padding-right: 5px;
text-align: right;
background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
background-size: cover;
}
.profile-pic{
padding:10px;
}

by Bela 🔊⬆; ; Report

awesome! thanks

by fentanyl <3; ; Report

Ash ᕕ(⌐■_■)ᕗ ♪♬

Ash ᕕ(⌐■_■)ᕗ ♪♬'s profile picture

Hi! On your pink layout, I keep having a blue “aura” around the navigation links. I’m not great at code but I couldn’t see anything in your HTML about it, so maybe it’s leftover from Spacehey’s base HTML or something? It is the same color as the base, a light blue. Can you help?


Report Comment



It's a new update to the links but it's buggy, so sometimes it doesn't show up. to remove it the code is:

nav .links a{
text-shadow: none!important;
}

by Bela 🔊⬆; ; Report

Worked perfectly, thank you so much! <3

by Ash ᕕ(⌐■_■)ᕗ ♪♬; ; Report

Hehe still tweaking my page; is there somewhere I can edit the div that includes the “status” stuff? Like what you would enter on spacehey.com /editstatus. The CSS previewer thing doesn’t really include that section, and the changes I make to the “last login” thing affect my Online button. Thank you so much for your help <3

by Ash ᕕ(⌐■_■)ᕗ ♪♬; ; Report

Kris

Kris's profile picture

Hi! This is probably a completely unhelpful question, but do you have an advice for editing code to work on different sites? I kind of just *assumed* it'd be a one to one fit when I tried to use your Black and White layout on AniRoleplay. It was not.


Report Comment



Well each website has different rules when editing the layout. Some let you add in extra code like JavaScript. Spacehey doesn't allow that, hence why ppl can't add music players on their profiles and other things like that.

From looking at the aniroleplay site, it looks like they use a different css stylesheet than Spacehey. For example, to edit the friends comments on spacehey the code would look something like this:



.comments-table td{
background-color: gray!important;
}



on aniroleplay the code looks like like this:



table.friendscomments{
background-color: gray!important;
}


so it's a different way of writing the code but its still similar. A good example to show you is this profile I was looking at https://www.aniroleplay.com/view_profile.php?member_id=559270. When you go to this profile, right click and click Inspect. You should be able to see the side window pop up with the code. You can search for the
tags this person used to edit the profile.

by Bela 🔊⬆; ; Report

kiyohiro

kiyohiro's profile picture

hey there! i'm confused about adding a cursor, specifically this one:https://www.cursors-4u.com/cursor/2010/03/01/moi-dix-mois-white-decagram.html
i replaced the .cur link which did replace the cursor, but it didn't have the arrow in the corner. how do i get that to stay intact?

thanks!


Report Comment



sorry for the late reply! the arrow in the corner is black, so it won't show with a black background. if you switch the background to a white one, you'll see that it does appear.

by Bela 🔊⬆; ; Report

No worries! And thanks!

by kiyohiro; ; Report

sarah anne

sarah anne 's profile picture

I love the black layout, but I’m having an issue changing the font. I like it but found one using the link in the layout for google fonts, and I tried replacing the code with the new font but it won’t work. it’s been so long I forget what I’m doing lol


Report Comment



in the google fonts site, make sure you're selecting the @ import code. If you're putting the entire code that's there, you have to put the style tags separate from each other. You can't put style tags inside other style tags. if you keep having issues let me know! ^^

by Bela 🔊⬆; ; Report

thank you!!

by sarah anne; ; Report

I just tried again and made sure to use the @ import code, as well as gone through and changed the font family throughout but it just makes the font a sort of Times New Roman and idk why lol

by sarah anne; ; Report

RedDot

RedDot's profile picture

Hi! I wanted to use your Black and Grey Layout, I set it as you told how to but my profile picture is not inside the box behind it, how can I set it so it fits the box? I would really appreciate your help! :3


Report Comment



In the code .general-about .details change the padding-bottom from 20px to 70px :)

by Bela 🔊⬆; ; Report

omg! thank you so much! :3

by RedDot; ; Report

kate

kate's profile picture

hi! i was wondering if u have the code/css to get rid of the 'about me' and 'who i'd like to meet' sections?


Report Comment



yeah its .section h4 {display: none;}

by Bela 🔊⬆; ; Report

what if i only wanted to hide the Who i want to meet, but keep the About me?

by Seren; ; Report

check out this blog hidden things

by Bela 🔊⬆; ; Report

alaura skye

alaura skye's profile picture

hi, how can i increase the font sizes for my profile info (interests, etc.)?


Report Comment



font-size: 12px;

by Bela 🔊⬆; ; Report

you just have to make sure the profile-info (or other sections) don't already have a set font-size.

by Bela 🔊⬆; ; Report