Woodland Shade

Tags: cottagecore, woods, green, soft green, pink, clean, simple

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I have the blog version for this layout HERE

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Profile Background: https://e1.pxfuel.com/desktop-wallpaper/166/283/desktop-wallpaper-cottagecore-spring-cottagecore.jpg
⇘ Online Icon: https://64.media.tumblr.com/fdc4a2d4b2b0efd470396fed5339f436/9cd7c663e33f0456-06/s75x75_c1/17d7a3e483283ff49da2d460d7f161bf35f5b21b.gifv
⇘ URL info div: https://media.tenor.com/2LmQ0ZyvHRcAAAAC/cottage-core-butterflies.gif
⇘ Blog Preview Background: https://i.pinimg.com/originals/e5/e9/45/e5e945308b555af9ec5e2795483795e3.gif
⇘ Vines: https://i.ibb.co/C5NBsLd/vines.png

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Oranienbaum&display=swap');
</style>

<style>
/* mobile code, don't delete */
@media(max-width: 30em){
  .blog-preview:after{
    display: block;
    content:"";
    height:180px;
    margin-top:-175px;
    margin-right:30px!important;
    border-bottom:3px solid #F7FAF7!important;
    border-top:3px solid #F7FAF7!important;
    box-shadow: DarkSeaGreen 4px 0px!important;
}  
.blog-preview h4{padding-left:0px!important;}
.blog-preview p{padding-left:10px!important;}
h1{text-align: center;}
}
/* ~~~~ */
</style>

<style>

/* fonts and colors */
.icon{ font-size:11px!important;}

a{
    color: #8A8178;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
p, b, .count, nav label, nav .top, button{
    color:#314539;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
nav .links a{
    text-shadow: none;
    color:#97AF97;
}
.blog-preview p a, .section h4{ 
    color:#DBC585!important;
}
a:hover{ 
    text-decoration:none!important; 
    color:limegreen!important;
}
h1{
    color:#314539;
    font-family: 'Fleur De Leah', cursive;
    font-size: 40px!important;
    font-weight:1;
    padding-left:20px;
}
h2, h3, h4{
font-family: 'Oranienbaum', serif;
font-size: 13px!important;
letter-spacing: 1px;
color:DarkOlivegreen;
}
.mood p b{
    font-family: 'Fleur De Leah', cursive;
    font-size:18px!important;
    font-weight: 1;
}
.friends .person p{
    font-family: 'Fleur De Leah', cursive;
    letter-spacing: 1px;
    font-size: 16px!important;
    text-transform:lowercase;
}
body {
    background-color: #F7FAF7;
    background-image: url("https://e1.pxfuel.com/desktop-wallpaper/166/283/desktop-wallpaper-cottagecore-spring-cottagecore.jpg");
    background-size:50%;
}

/* nav area */
nav .top{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
}
nav .top button{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
    border:none;
}
nav .links{
    background-color: #607560;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
}

/* this is the logo color. 
To change the color go to https://codepen.io/sosuke/pen/Pjoqqp
if you need more help check my blog https://blog.spacehey.com/entry?id=5523 */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(24%) sepia(6%) saturate(4470%) hue-rotate(47deg) brightness(91%) contrast(68%)!important;
}
/* this is the search box */
[id='q']{
    border:1px solid green;
    background-color: rgba(85, 107, 47, 0.1);
    border-radius: 3px;
    color:lime;
}

main{
    background-color: #F7FAF7;
    margin-top:30px;
    border-radius:13px;
}

/* left side */
.details p{
    text-align: justify;
}
.profile-pic img{
    border-radius: 5px;
}
.mood p:after{
    display: inline;
    content:" ₊*   .:°";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
}
.online {
  font-family: 'Fleur De Leah', cursive;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 16px!important;
}
.online img{
  content: url('https://64.media.tumblr.com/fdc4a2d4b2b0efd470396fed5339f436/9cd7c663e33f0456-06/s75x75_c1/17d7a3e483283ff49da2d460d7f161bf35f5b21b.gifv');
  animation: none;
}

/* contact area */
.contact .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom: 20px;
}
.contact h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.contact{
    border:none!important;
    border-spacing: 0px 3px;
}
.contact .inner{
    padding-left:20px;
    padding-right:20px;
}

/* the url box where you can add a picture */
.url-info{
    background-image: url("https://media.tenor.com/2LmQ0ZyvHRcAAAAC/cottage-core-butterflies.gif");
    background-size: 100%100%;
    border:none!important;
    border-radius: 5px;
    height: 170px;
    margin-top:30px!important;
    margin-bottom:30px!important;
}
.url-info p{
    opacity:0.0; /* hide the url text */
}

/* the interests table */

.table-section .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom:10px;
}
.table-section h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.table-section{
    border:none!important;
    background-color: transparent;
}
.table-section .inner{
    padding:0px 10px;
}
.details-table{
    border-spacing: 0px 10px; /* adds space between each section*/
}
.table-section td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.table-section td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}


/* the right side 
.profile-info says "SoSo is your friend"
or "edit profile" */
.profile-info{
   display: none;
}

/* the blog-preview */

/* this is the image above the blog posts */
.blog-preview:before{
    display: block;
    content:"";
    background-image: url("https://i.pinimg.com/originals/e5/e9/45/e5e945308b555af9ec5e2795483795e3.gif");
    background-size: 100%100%;
    border:5px solid #F7FAF7;
    border-radius: 13px;
    outline:3px solid DarkSeaGreen;
    outline-offset: 5px;
    height:150px;
    margin-top:10px;
    margin-left:5px;
    margin-right:5px;
}

/* this is the green line next to the blog titles */
.blog-preview:after{
    display: block;
    content:"";
    height:170px;
    margin-top:-178px;
    margin-right:35px;
    box-shadow: DarkSeaGreen 3px 0px;
}

/* this is some styling before the blog titles. 
you can delete this code if you don't want 
anyhting to appear infront of the blog titles*/
.blog-preview p:before{
    content: "°:. *₊";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
    display: inline-block;
    margin-right:5px;
}

/* adding some indents*/
.blog-preview h4{padding-left:10px;}
.blog-preview p{padding-left:25px;}

/* blurbs area */
.blurbs .heading{
    background-color: transparent!important;
}
.blurbs h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.section h4{
    border:none;
}
.blurbs .inner{
    padding:0px!important;
    margin:20px;
    margin-top:0px;
}

/* about me section */
.section:nth-child(1){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding: 5px;
}
/* who I'd like to meet section */
.section:nth-child(2){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding:5px;
}

/* friends area */
.friends .heading{
    background-color: transparent!important;
}
.friends h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.friends-grid{
  text-align:center;
  padding:0px!important;
}
/* the comments table */

.comments-table{
    border-spacing: 0px 10px; /* adds space between each section*/
    border:none;
    padding:0px 10px;
}
.comments-table td{
    border:none;
}
.comments-table button{
    background-color: transparent;
    border:3px solid DarkSeaGreen;
    border-radius: 5px;
    margin:3px;
}
/* side where friends profile pic appears */
.comments-table td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.comments-table td:first-child img{
    border-radius:5px;
}
/* side where comments appear */
.comments-table td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}

/* .comment-replies is the entire box where friends reply to comments and 
.comment-reply targets a single comment */

.comment-replies{
    border: 3px solid rgba(143, 188, 139, 0.5);
    border-radius: 5px;
    margin:10px;
}
/* the vine image between comment replies */
.comment-reply:not(:first-child):before{
    display: block;
    content:"";
    background-image: url("https://i.ibb.co/C5NBsLd/vines.png");
    background-size: 30%;
    height: 30px;
    width: 100%;
    margin-top:-30px;
}
.comment-reply{
    border:none!important;
}

footer{
    background-color: transparent;
}

/* scrollbar styles */

::-webkit-scrollbar {
    width: 1px;
    height: 4px;
}
::-webkit-scrollbar-track {
    border: 1px solid DarkSeaGreen;
}
::-webkit-scrollbar-thumb {
    background: DarkSeaGreen; 
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</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 20 of 45 comments ( View all | Add Comment )

marlena ⋆˚✿˖°	1782146871 Hi!! i tried using this layout but the background was not appearing. I'm not sure if it was just my laptop but it doesn't load. Its a super cute theme but I'm sad the background doesn't work :( Report Comment
Byul!	1779730045 Using!! Report Comment
liv	1777268999 using Report Comment
Moon_pi_panda	1776130024 Love the vibe! thank you for the work and sharing! Report Comment
Appl3	1774202450 Usingg!🩷🩷 Report Comment
Kiwi	1773292712 Using! Report Comment
Julia	1771727504 estou usando Report Comment
Bruna 𝄞⨾𓍢ִ໋	1769103147 using !! Report Comment
Niki	1768089627 Imma use this! It is perfect! Tyyyy Report Comment
jackie	1763927489 using! thank you <33 Report Comment
jackie	1763927488 using! thank you <33 Report Comment
samaria	1760125563 beautiful layout!! Report Comment
Lumi	1751665879 I adore this so much!! thank you!! Report Comment
Onyx	1750118707 I love this so much! Using💗 Report Comment
xX_Be4uty_Qu33n_Xx	1749613886 Using! Thank you so much! Report Comment
Olga Pintare	1748669524 Using! (I changed some images, but everything is mostly the same) Report Comment
Xiaomao	1748019051 using Report Comment
amunet ⋆˚꩜｡𓇼	1745084293 using :) Report Comment
majorofda534	1744660168 using!! Report Comment
Ray レイ	1744465784 I LOVE THIS AND I WILL BE USING THIS Report Comment