Published by yukii

published 1724059001
updated 1724059337

Category: Blogging

View Blog View Profile Report Blog Entry

if you need help with layout, opening music, opening screen, snowfall, or blinkies and gifs here you go!!!

recently joined and i was super excited to customize my profile. this was the main reason i wanted to join spacehey. i saw a lot of tiktoks of people customizing and putting cool stuff on their spacehey and i honestly really wanted to do that. i spent like 14hrs making my profile(ㅠ﹏ㅠ) which was super sad. ive never coded in my life so this was an experience for sure. i had a lot of problems during the making of my layout but i eventually figured it out so pretty happy bout that( ˶ˆᗜˆ˵ ). the main issues that i had was on the opening screen, intro music, gifs, and blinkies. i spent a LOT of time researching how to edit my layout and do all this modifications but tbh most of the things the people said sucked booty and didnt work ૮(˶ㅠ︿ㅠ)ა. but if this blog can help anyone ill be pretty flipping happy ദ്ദി(｡•̀ ,<)~✩‧₊ the first step is to figure out your layout, for this i 100% recommend going to layouts and picking one that you want that similar to your theme. when you have your layout copy it and instead of pasting it on your abt me go to Spacehey layout editor. than paste the layout on the css or the about me it (really doesnt matter) and from there on you can start editing it to make it your own unique layout!!! if anyone is having problems with music, blinkies, gifs, snowfall, and opening screens dont worry i got you ٩(^ᗜ^ )و ´- here they are!!!

opening screen:

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('insert gif here');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

snowfall:

</div>

</div>

</div>

</div>

</div>

</div>

<style>

/* customizable snowflake styling */

.snowflake {

color: #fff;

font-size: 1em;

font-family: Arial, sans-serif;

text-shadow: 0 0 5px rgba(0,0,0,0.7);

}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

music:

</iframe>

blinkies and gifs:

and if anyone wants my layout here it is:

<style>

body {

background:url(https://i.pinimg.com/564x/f7/ef/39/f7ef398ed7a4de1a5c186c8905101bed.jpg);

}

.profile {

background:url(https://i.pinimg.com/564x/f7/ef/39/f7ef398ed7a4de1a5c186c8905101bed.jpg);

color:#background.jpg;

text-shadow: 0 0 9px black;

}

.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview {

border-style:Double;

border-width:6px;

border-color:#background.jpg;

text-shadow: 0 0 9px black;

background:#ffb0d2;

}

/* contact icons */

.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 {

/*add to friends */

content: "♡"

}

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

/* add to favorite */

content: "♡"

}

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

/* send a message */

content: "♡"

}

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

/* foward to friend*/

content: "♡"

}

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

/* instant message */

content: "♡"

}

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

/* block user */

content: "♡"

}

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

/* add 2 group */

content: "♡"

}

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

/* report */

content: "♡"

}

footer {

border-radius: 15px;

background-image:

url("https://i.pinimg.com/564x/30/d7/5d/30d75d46ac044b57bb100e0fa9779484.jpg"));

color:White;

}

.online{

content: url();

}

nav .top {

background: url("https://i.pinimg.com/564x/30/d7/5d/30d75d46ac044b57bb100e0fa9779484.jpg");

}

:root {

--logo-blue: #ffe4ef;

--darker-blue:white;

--lighter-blue:#8e0d3e;

--even-lighter-blue:#8e0d3e;

--lightest-blue:##3c0130;

--dark-orange:White;

--light-orange:#8e0d3e;

--even-lighter-orange:black;

--green:black;#ff0090

}

div.ah.df.dg.dh {

border-radius: 0 0 10px 10px;

}

div.b4.ah.dx.dy.dz.e0 {

border-radius: 10px 0 0 0;

}

</style>

ㅤ

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

</div>

<div>

</div>

<style>

.friends .heading{ font-size:0; }

.friends .heading:before{ content: "my friends!! ♡ "; font-size:.8rem; font-weight:bold;

color:White; }

}

.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "comments ✧ "; font-size:.8rem; font-weight:bold;

color:White; }

}

.profile .table-section .heading h4 { font-size:0; }

.profile .table-section .heading h4:before{ content: "my interests & my socials!! ◎[▪‿▪]◎"; font-size:.8rem; font-weight:bold;

color:White; }

}

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "say hi!! ʕ·ᴥ·ʔ"; font-size:.8rem; font-weight:bold;

color:White; }

}

.blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "about me ≧◡≦"; font-size:.8rem; font-weight:bold; color:White; }

}

* {cursor: url(https://toppng.com/public/uploads/preview/view-cursor-on-t-shirt-cat-cursor-11563234286jqid2b8cj4.png), url(https://cur.cursors-4u.net/anime/ani-1/ani195.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/11/07/blinking-hello-kitty-4.html" target="_blank" title="Fast Blinking Hello Kitty"><img src="https://cur.cursors-4u.net/cursor.png" alt="Fast Blinking Hello Kitty" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://tenor.com/view/playboi-carti-carti-lil-uzi-lil-uzi-vert-playboi-gif-21180177.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

Published by yukii

if you need help with layout, opening music, opening screen, snowfall, or blinkies and gifs here you go!!!

Comments