Tags: pink, pastel, coquette, flowers, cute, kawaii, vintage, lace, layouts
Description:
[LAST UPDATE: 10/07/2024] This is very messy and im still learning how to code, but i tried to add some text as a guide so feel free to edit or to take bits of it for your layout :D please don't remove or cover credits!
If using please leave a comment! feel free to send a friend req also and if there's anything that needs to be fixed or if you have any questions just leave them below and i'll do my best to help . . ( ᵕ ᵕ ♱)ಎ
Blog optimized code (WIP!!)
<style>
/* mobile code. don't delete */
@media (max-width: 600px) {
main{
max-width: 90%!important;
}
nav .links{
max-width: 90%!important;
align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
footer{
max-width: 90%!important;
margin-left: auto !important;
margin-right: auto !important;
}
h1{
font-size: 30px!important;
}
body{
font-size: 16px!important;
}
a{
font-size: 18px!important;
}
body:before{
background-size:40%!important;
}
.ceresites{
z-index: 9 !important;
width: 15% !important;
}
}
</style>
<style>
/* fonts */
@font-face { font-family: "hearts"; src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf'); }
</style>
<style>
/*page background */
body {
background:url('https://pbs.twimg.com/media/FA8CyU_XMAMQqZ4?format=jpg&name=240x240');
}
</style>
<style>
/* cursors (source: http://www.rw-designer.com/cursor-set/littlebunny2-mimidestino) */
a:hover{
cursor: url('https://64.media.tumblr.com/798fb85e8334ad49beadcec5e2422e1d/e607e0ffc52ca267-19/s75x75_c1/637b1c8f639ed9cb92f23b481633f804843cfa8c.gifv'), auto; /*link select*/
}
* {
cursor: url('http://www.rw-designer.com/cursor-extern.php?id=94536'), auto; /*normal select*/
}
</style>
<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet
and change the background-size in the mobile code.*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://64.media.tumblr.com/tumblr_m54k7efWWw1qid2nw.gif');
background-size: 10%;
background-repeat: no-repeat;
background-position:center;
background-color: #FEF1F0;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
<style>
a:hover{text-decoration: underline;}
h2, h3, h4, h5{color: black !important;} /* headings*/
a{color: black !important; } /* color of links */
p, b, .count {color: black !important;} /* color of text */
.profile .friends .person p{color: #e2a99c !important;} /* color of names and friends counter */
nav label{color: black !important;} /* color of search */
.section h4 {color: #c2c9a7 !important;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important; */
nav .top{
background-color: transparent !important;
border: none;
margin: 30px 0;
color: black;
}
.logout-btn, .logout-form {
font-family: hearts;
text-decoration: underline;
background-color: none !important;
border: none !important;
color: black !important;
display: inline-block;
font-size: 1.1em !important;
}
nav .links{
background-color: transparent !important;
border: 10px solid black;
border-image: url("https://foollovers.com/mat/baf/frill/fr32-015-a.gif") 9 fill round;
font-family: hearts;
text-align: center;
margin-bottom: 10px !important;
}
nav .top a, nav .links a{
background: transparent !important;
color: black;
text-shadow: none !important;
text-decoration: none !important;
font-size: 1.5em;
}
/* this is the line that appears between links in the nav bar and footer.
you can add an emoji or symbol instead of the default line it has */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
content: " ♡ " !important;
color: black;
}
/* this is the spacehey logo color. to change the color refer to https://codepen.io/sosuke/pen/Pjoqqp and replace the filter property values */
nav img.logo{
filter: invert(61%) sepia(7%) saturate(2917%) hue-rotate(315deg) brightness(111%) contrast(90%);
width: 165px !important;
height: 42px;
}
main{
background-color: white;
background-image: url('https://colorate.azurewebsites.net/SwatchColor/FFFFFF');
background-size: 1000%;
background-repeat: no-repeat;
border: 9px solid;
border-image: url("https://64.media.tumblr.com/6f0c2efb2b0902a5907c60c9d1dcad9e/9b9e0ed89a039867-11/s75x75_c1/90da82e9674eafbcc1f84f71303f353726a700b5.pnj") 8 fill round;
width:810px;
height:480px;
overflow-y: scroll;
margin: auto;
background-color: white;
}
/* blog tittle */
h1{
text-shadow: -1px 0 #7e6446, 0 1px #7e6446, 1px 0 #7e6446, 0 -1px #7e6446, 0 0;
color: white;
font-family: "hearts";
font-style: italic;
font-size:50px!important;
font-weight: bold;
text-align: center;
text-transform: lowercase;
}
/* this are the scrollbars. i recommend u do NOT edit this part if ur a coding noob (like me)!! (source: https://ishimori.crd.co/) */
::-webkit-scrollbar {
width: 16px
}
::-webkit-scrollbar:horizontal {
height: 17px
}
::-webkit-scrollbar-corner {
background: #eee
}
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
::-webkit-scrollbar-button:vertical {
height: 17px
}
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* font family for the headers, navigtion links, links, body text */
h2, h3, h4, h5{
font-family: "hearts";
font-size: 18px!important;
font-weight: semi-bold;
}
a{
font-family: hearts !important;
font-size: 14px !important;
font-weight: 1;
}
p, b, nav label, .section{
font-family: "hearts";
font-size: 16px!important;
font-weight: semi-bold;
}
/* the online text */
.online{
color: black !important;
text-transform: lowercase;
text-align: left;
}
/* the online icon */
.online img{
content: url("https://64.media.tumblr.com/85143b2850e75f47d3a511d07c9c3791/b71077d70ee5b59c-21/s75x75_c1/41f78bb60ed65f9a61da1116da92e70fcbbc404d.gifv") !important;
animation-name: none;
animation-iteration-count: infinite;
animation-duration: 2s;
}
/* your profile picture */
.profile-pic {
-webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
width: 160px !important;
height: auto;
}
/* the online symbol and text */
.online{
color: black !important;
text-transform: lowercase;
text-align: left;
}
.online img{
content: url("https://64.media.tumblr.com/85143b2850e75f47d3a511d07c9c3791/b71077d70ee5b59c-21/s75x75_c1/41f78bb60ed65f9a61da1116da92e70fcbbc404d.gifv") !important;
animation-name: none;
animation-iteration-count: infinite;
animation-duration: 2s;
}
main .left{
padding: 4px !important;
margin: 3px !important;
border-right: solid white 6px !important;
}
main .right > * {
margin: 15px auto 15px auto !important;
}
.edit-info {
background: transparent !important;
box-shadow: none;
border: none !important;
width: 100%;
padding: none !important;
overflow-wrap: break-word;
word-break: break-word;
}
.blog-entry .profile-pic img, .bulletin .profile-pic img {
-webkit-mask-image: url(https://64.media.tumblr.com/21537f823a9682455940164951cd4f70/a13f6b3efb69d983-60/s250x400/4513c30e7c3d485e14827bda68c9750d7b2d80e4.pnj);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
max-width: 140px !important;
max-height: 140px !important;
}
.icon, .award img {
display: none !important;
width: 0px !important;
height: 0px !important;
}
.article .edit-info .author-details p.links a::before{
content: url("https://64.media.tumblr.com/670f044f1a64397915f1d186aa15f094/273b4c4e0e95e923-da/s75x75_c1/57b20236c7eabe8248776f51e614a90d96c10654.gifv") !important;
}
main .right {
background: white radial-gradient(circle at 0 0, #FCEAEF 2px, transparent 0);
background-size: 4px 4px;
border: white solid 5px !important;
padding: 15px;
}
main .right > * {
margin: 15px auto 15px auto;
}
.blog-entry .kudos-btn {
background: none !important;
border: none;
padding: 0 !important;
cursor: url("http://www.rw-designer.com/cursor-set/littlebunny2-mimidestino") !important;
user-select: text;
font-family: "hearts" !important;
font-size: 1.2em !important;
font-weight: 600 !important;
text-decoration: none;
color: #c2c9a7 !important;
}
/* COMMENTS */
.profile .right .comments-table{
height:390px;
overflow-y:scroll;
display:block;
background-color: transparent !important;
border: none !important;
padding: none !important;
}
.comments-table td{
background-color: transparent !important;
border: none !important;
}
.comments-table td:first-child img:not(.icon) {
background-color: transparent !important;
border: 9px solid !important;
border-image: url(https://64.media.tumblr.com/9dfe9992a7fe8b33b574707ce2b943e7/5f3ae3c869e7ca9a-03/s250x400/a981485eb61951d58a99d20bba68b120e7794e1a.pnj) 10 round !important;
border-image-outset: none !important;
width: 90px;
max-width: 100%;
max-height: 200px;
}
.profile .right .comments-table td:nth-child(2) {
border: none !important;
}
.profile .right .comments-table td:nth-child(1) {
background-color: transparent !important;
border: none !important;
}
.comment-replies{
border: 0 !important;
border-left: 5px solid #f7f3e4 !important;
}
main:not(.right) .icon {
filter: hue-rotate(-30deg) sepia(50%) saturate(45%) !important;
transform: scale(0.7) !important;
}
button, [type="button"], [type="reset"], [type="submit"] {
background-color: #f7f3e4 !important;
border: gray solid 1px;
border-radius: 3px;
color: black;
text-align: center;
font-family: 'hearts' !important;
}
footer{
margin-top:10px;
background-color: transparent !important;
border: none !important;
text-align: center;
color: #e3dada !important;
}
footer p {
color: #c2a9a9 !important;
}
footer a {
color: #c2a9a9 !important;
}
footer .links li:not(:last-child)::after{
color: #c2a9a9 !important;
}
footer .links{
margin-top: 5px;
text-align: center;
}
</style>
<div class="ceresites" style="float: ; width: 6%; position: fixed; left: 10px; bottom: 10px; z-index: 9;"><a title="layout by @ceresites" href="https://spacehey.com/ceresites"><img style="width: 50%;" src="https://foollovers.com/mat/i-anira/k05-icon-rabbit.gif"/></a></div>
<style>
.ceresites{
padding: 5px;
bottom: 10px;
background: transparent;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
</style>
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 20 of 218 comments ( View all | Add Comment )
thuy
using
Report Comment
ilovelcf
using!!
Report Comment
June
using !! ♡
Report Comment
Wiskear
Using¡! (⌒‐⌒)
Report Comment
Wiskear
Using¡! (⌒‐⌒)
Report Comment
Wiskear
Using¡! (⌒‐⌒)
Report Comment
Pofie
usinggg
Report Comment
Angel ☆☆☆ Wolf Haley
using!!!
Report Comment
xalf
using
Report Comment
.𖥔 ݁ ˖๋ ࣭ ⭑ Chaay
using
Report Comment
ℬ𝓎𝒷𝒷★ミ★
Using ♡︎
Report Comment
ivana
usingg
Report Comment
Rina
using :)
Report Comment
Lazy
using!!!
Report Comment
Valerie loves gargoyles
using !! :3
Report Comment
hadas
using :3
Report Comment
✮ ˖° ⸜ halo / hamz.. ꕤ ・
using :3
Report Comment
lelita
usingg
Report Comment
🌸Mads🌟
Using!! Love you're pfp too!! <3
Report Comment
˚⋆𐙚。 bombon 𖦹.ᡣ𐭩˚
using :3!
Report Comment