Traditional Christmas 1.1

Tags: christmas, traditional, muted, earth tones, red, green
Description:

An update to my Traditional Christmas layout!
Changes:
added code for blogs/bulletins
changed logo color
removed text shadow from nav bar
changed the pinned blog and alert images to decome
added emoji to the contact table
merged the mood with the general-about
(mostly) fixed the comments table
As always you're free to edit this as much or as little as you want! Merry Christmas if you celebrate and Happy Peppermint Mocha Season if you don't. :D
Preview:

click on the image for a larger preview
Code:

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

<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;
}

.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;
}

nav .links a{

text-shadow: none!important;}

/* 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);
}

.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: darkolivegreen !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;
    text-shadow: none!important;
}

.logo {filter: brightness(0) saturate(100%) invert(7%) sepia(71%) saturate(7493%) hue-rotate(15deg) brightness(98%) contrast(115%);}

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);
   margin-bottom: 0px;
}

/*============= 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);
    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 0 0 0;
}

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

td {
    background-color: transparent!important;
}

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

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

.friends, .blurbs, .edit-info {
    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;
    border-collapse: collapse;
}

.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: 0px;
    height: 0px;
}

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

::-webkit-scrollbar-thumb {
    background: oldlace;
    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);}
.profile h1 {background: oldlace; }
img
{
border-radius: 4px;
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>
<style>
li.active .icon, nav .links:first-child::before{ 
    content:url('https://64.media.tumblr.com/b13317721b64112a3d81edfee3978578/e06cdad67757c507-16/s75x75_c1/c0374c47d43f25a713a5e06182774934980b9a61.gifv'); }

.pinned {
    content: url('https://64.media.tumblr.com/5d41a0780ffb3b2e192df4b74941f25b/ef3b7d403b2bcd2e-32/s75x75_c1/b8ede31c878a463c11510f5d487724a8f4910d25.gifv');
padding-right: 3px;
    height: 13x;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after {
    content: " 🎄 ";
}

.url-info p{
    opacity: 0.0;
}
.url-info{
background: url("https://render.fineartamerica.com/images/rendered/default/print/8/8/break/images/artworkimages/medium/3/snoopy-celebrate-christmas-with-woodstock-paulin-yuliana-wulandari.jpg");
background-size: 100%;
background-position: center;
height: 175px;}

.url-info{
display: none!important;
}
/* 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: "⛄"
}

.comments-table td:first-child{
 border-right: none!important;
}

.comments-table tr:first-child{
 border-top: var(--borders)
}

.comments-table td{border-top: none!important;}



.left{margin-left: 0!important; padding-left: 0!important;}
.right{margin-right: 0!important; padding-right: 0!important;}

.mood{margin-top: 0px!important; border-top: none!important; border-top-left-radius: 0px!important; border-top-right-radius: 0px!important;}
.general-about{ border-bottom: none!important; border-bottom-left-radius: 0px!important; border-bottom-right-radius: 0px!important; height: 176px;}

.profile-pic{margin: 4px 15px 8px 4px!important;}

.comments-table{
border-top: 2px solid burlywood !important;
}
</style>

<style>
/*this is all the stuff for blogs!*/
.comments, .content, .edit-info {
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
    background: oldlace;
}

.content{
  padding: 7px!important;
}

.edit-info{
 padding: 5px!important;
}

.edit-info img{
 margin: none!important;
}

.content{
 margin-top: 15px;
}

</style>
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 2 of 2 comments ( View all | Add Comment )
💫AudreyStar💫
1700749057
Using!
Report Comment
RATCHET ♥
1700650905
HI USING THIS IS REALLYCUTE!!!
Report Comment