Woodland Shade Blog CSS

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

Description:

Copy the code that's in the box below and test it out in the Blog Editor.

You can see a live version of this blog HERE

I have the profile version for this layout HERE

Here is a quick how-to video if you need it ◄

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 —
⇘ Blog Background: https://i.ibb.co/xLX8sCf/de.jpg
⇘ Edit Info Background: https://i.pinimg.com/originals/8a/8b/2c/8a8b2c7f63ca6dab0ba8a3ef6e3dd543.jpg
⇘ 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=34939) -->

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

<style>

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

a, P.publish-date, .author-details b{
    color: #8A8178!important;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
p, b, .count, nav label, button, nav .top,  nav .top a{
    color:#314539!important;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
nav .links a{
    text-shadow: none;
    color:#97AF97!important;
}
a:hover{ 
    text-decoration:none!important; 
    color:limegreen!important;
}
/* blog title */
.blog-entry .title{
    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;
}
.comments-table td:first-child 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://i.ibb.co/xLX8sCf/de.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:10px;
    border-radius:13px;
}

/* profile picture box */

.profile-pic img{
    border-radius: 5px;
}
.edit-info{
    border:2px solid white;
    border-radius:10px;
    background-color: lightgreen;
    background-image: url('https://i.pinimg.com/originals/8a/8b/2c/8a8b2c7f63ca6dab0ba8a3ef6e3dd543.jpg');
    background-size: cover;
    background-position: left;
    padding:10px;
    outline:3px solid DarkSeaGreen;
    outline-offset: 5px;
}
.author-details{
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    padding:2px;
    text-align: center;
}
/* this is the line that appears under the kudos */
.blog-entry .comments .heading{
  border-top: 2px solid DarkSeaGreen;
}
/* 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 11 of 11 comments ( View all | Add Comment )

silly sailor whale	1778182356 haiii just a question how do you put it in your actual blogs Report Comment
iiamnoqh	1768297960 cómo hago para solo tener la letra del nombre? Report Comment
Abell	1763472262 using Report Comment
snoopi	1752334793 usingg Report Comment
Olga Pintare	1748670291 Using! (a bit edited but mostly the same) Report Comment
gabi ࣪⟡	1748531750 using! Report Comment
Marsxuniverse	1746807275 using Report Comment
༻٭Apolline٭༺	1745831140 using <3333 Report Comment
Cassandra's Alternative Acc	1741532682 using Report Comment
Taro (˃̣̣̥ᯅ˂̣̣̥)	1729736730 Using tysm!! <3 Report Comment
FAE‼️	1717828382 Using ^^ Report Comment