CttCore-Woods Blog Layout

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

Description:

this is the blog css for the CttCore-Woods layout.

this is ONLY for blogs.

I have the profile css layout here

check out my blog for more info or questions or comments ~

Here is a Black and White CSS Template for you to use to make your own blog layout! :)

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

Johna

1699546894

Hello! The bottom instructions said to paste this code into the "about me" section, but that doesn't seem to work for the blog layout. Should I be adding this code somewhere else? This design is awesome btw - thanks sm for sharing it!

Report Comment