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

> ꪜⅈꪀᥴꫀꪀ𝕥 / ꪀꪮ𝕣𝕥ꫝ ⁽ᵛⁱⁿⁿʸ⁾ <	1764598193 USINGGGGGG Report Comment
Timothy	1762826915 the background image is broken i believe Report Comment
ミ★ 𝘕𝘢𝘺𝘢 ★彡	1762450704 Using! Report Comment
🌈💗 𐙚CutePinkKitty!♡𐑂💗ฅ^>⩊<^ ฅ	1733191212 Using! ^w^ Report Comment
Janina	1732467297 usinggg Report Comment
koko	1730827027 usinggg >.< Report Comment
sage ⚢	1730604401 using!! Report Comment
💫AudreyStar💫	1700749057 Using! Report Comment
RATCHET ♥	1700650905 HI USING THIS IS REALLYCUTE!!! Report Comment