Traditional Christmas

Tags: christmas, traditional, muted, red, green

Description:

A traditional christmas layout for your spacehey page, complete with falling snow and a custom online now gif! :D Feel free to edit it as much or as little as you want.

I've updated this layout! Find the new version and the change log here!

The original layout was by Bela, though after a good 6 months of edits and a coat of christmas paint it doesn't really look like it anymore. I still want to credit her and her amazing layouts though.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 96haato (https://layouts.spacehey.com/layout?id=24809) -->

<style>

/* cursors */

a:hover /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol377.cur), auto !important;} /* End https://www.cursors-4u.com */
* /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol377.cur), auto !important;} /* End https://www.cursors-4u.com */
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swapp');
</style>
<style>
:root {
    --headers: saddlebrown;
    --text: brown;
    --names: saddlebrown;
    --links: darkolivegreen;
    --hover: goldenrod;
    --borders: 3px solid maroon !important;
    --background_image: url("https://whiteheartrainbowsoul.neocities.org/spaceheyhost/christmas-fireplace-background.jpg");
    --font-family: 'Sorts Mill Goudy', serif;
    --curve: 5px;
    --simple_bg: oldlace;
}

main .left {
    padding-right: 20px;
}

.url-info {display: none !important;} /* to hide the url */
.blurbs .heading{display: none !important;} /* to hide the blurbs heading */

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
a {color: var(--links) !important;} /* color of links */
a:hover {color: goldenrod !important;} /* color of links on hover */
p, h2 {color: brown !important;} /* color of text */
h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p {color: var(--hover) !important;} /* color of names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double darkolivegreen;} /* line in between comment replies*/
.count {color: goldenrod;}


/* text decoration */

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    text-decoration: underline;
    text-decoration-style: dashed;
}

.logout-btn:hover, .logout-btn:active {
    text-decoration: underline;
    text-decoration-style: dashed;
}

nav .top a:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
}

nav .links a:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
}

/* font family */

h2, h3, h4, h5, a, p, nav label, .section {
    font-family: var(--font-family) !important;
    font-size: 12px!important;
}

/* padding and margin */

.blurbs {
    margin-top: 10px !important;
    margin-bottom: 30px !important
}

.friends {
    margin-top: -10px !important;
    margin-bottom: 30px !important
}

.profile-info {
    border-radius: var(--curve) !important;
}

.comment-replies {
    border: 2px solid goldenrod;
}

.comments-table {
    border-radius: var(--curve) !important;
    border: none !important;
}

.table-section {
    padding-bottom: 7px !important;
    margin-top: 30px!important
}

#comments {
    margin-top: 5px !important;
    padding-bottom: 5px !important
}

.details p:last-child {
    color: var(--links) !important;
    filter: brightness(95%);
}

.mood {
    margin-top: 20px;
}

/* background image */

body {
    background-image: var(--background_image) !important;
    background-color: oldlace !important;
    background-size:  contain;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
    background: oldlace;
    margin-bottom: 30px;
    border: var(--borders);
    border-radius: var(--curve) !important;
}

nav .top {
    background: oldlace;
}

nav .top a {
    color: darkolivegreen!important;
}

nav .links {
    background: transparent!important;
    text-align: center;
}

nav img.logo {
    filter: invert(39%) sepia(8%) saturate(1395%) hue-rotate(58deg) brightness(95%) contrast(88%); !important}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " | ";
    color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid goldenrod !important;
    color: darkolivegreen !important;
    border-radius: 0px !important;
}

button {
    border-radius: 0px !important;
    border: 0px solid #ff66b6!important;
    font-family: var(--font-family) !important;
    background-color: oldlace !important;
    color: darkolivegreen!important;
}

/*============= online icon  ===================*/

.online {
    content: url(https://whiteheartrainbowsoul.neocities.org/spaceheyhost/tree.gif);
}

/*============= profile name ===================*/

h1 {
    padding-left: 20px !important;
    font-family: 'Gotu', sans-serif;
    font-size: 25px !important;
    margin-top: -10px!important;
    color: var(--links)!important;
}
h1{
    font-family: var(--font-family);
    font-weight: 1;
    border: var(--borders);
    background-color: oldlace;
    padding:5px;
    text-align: center;
    border-radius: var(--curve) !important;

}

/*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: oldlace;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    background: oldlace;
    padding: 20px;
    margin-bottom: 40px!important;
}

main {
    background: transparent;
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none!important;
margin: 0 1em 0 0;
}

.friends-grid img {
    outline: none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid burlywood;
}

.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.friends, .blurbs {
    background: oldlace;
}

.mood, .contact, .blog-preview {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}

.mood, .blog-preview {
    text-align: center;
    background: oldlace;
    border: var(--borders) !important;
}

.table-section {
    border: var(--borders) !important;
    background-color: oldlace!important;
    border-radius: var(--curve) !important;
}

.heading {
    background: transparent!important;
    padding-bottom: 4px !important;
    background-size: 100%!important;
    text-align: center;
    border: none!important;
}

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    outline: none !important;
    border: none!important;
}

.comments-table td {
    background-image: url('') !important;
    background-size: cover;
    border: 2px solid burlywood !important;
}

.comments-table td:first-child img {
    /* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: oldlace;
}

</style>
<style>
/* Force scrollbars onto browser window */

/* Scrollbar styles */

::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}

::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px dotted darkolivegreen;
}

::-webkit-scrollbar-thumb {
    background: saddlebrown;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
    background: maroon;
}
/*======misc========*/

.profile .general-about {
    background: oldlace; 
    margin: 0 0 0 0; 
    border:  var(--borders);
    border-radius: var(--curve) !important};
.profile h1 {background: oldlace; }
img
{
border-radius: 5px;
border: none !important;
}

/* customizable snowflake styling */


.snowflake {


  color: oldlace;


  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>
<div class="snowflakes">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
</div>

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 15 of 15 comments ( View all | Add Comment )

Leo!	1703417263 usingg! :3 Report Comment
Orin	1702585161 Using (Very well made btw) Report Comment
no one you know	1701982522 usin! Report Comment
-ˋ⭐‧˚⋆Skylar₊｡˚ˎ˗	1701811603 Using <3 Report Comment
robin!!	1701434238 probably using :3 Report Comment
ceexz	1700313345 probs using!! so cool Report Comment
jayjay ( ≧ᗜ≦)	1699919578 using Report Comment
Jess	1699294772 Using!! Report Comment
amelia (^_-)≡☆ (#1 izombie fan)	1699216157 might use >.< Report Comment
◟ ♪ sonic ︵︵	1698976807 using!! Report Comment
Ansalawit	1694452409 Using! Report Comment
sakurita	1670452298 great! Thanks a lot <3 Report Comment
Giz	1670198550 using!! :3c Report Comment
☆Moon☆	1669529276 Using thisss Report Comment
Andrew	1669438864 This is so cute! Using for now Report Comment tysm! <3 by 96haato; 1669497916; Report