Whispers in the Mist Blog CSS

Tags: black, 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/NL0q5jQ/ad.jpg

[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=35482) -->

<style>
/* font */

@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&family=Qwigley&family=Tangerine&display=swap');

:root{
  --gray: #fff; /* background color */
  --logo-blue: transparent; /* navigation background color */
  --lighter-blue: transparent; /* nav links background */
  --lightest-blue: rgba(0,0,0,0.1); /*sidebar background */
  --light-orange: rgba(0,0,0,0.1); /* comments table first child background */
  --even-lighter-orange: rgba(0,0,0,0.1); /* comments table second child background */
  --borders: none;
  --font-family: 'Qwigley', cursive;
  --header: #410E0A;
  --text: #410E0A;
  --othertext: #410E0A;
  --links: #410E0A;
  --hover: #410E0A;
}

/*custom cursor */

a:hover{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur613.cur'), auto!important;
}
*{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur610.cur'), auto!important;
}

/* ---- */

body{
  background-color: var(--gray);
  background-image: url("https://i.ibb.co/NL0q5jQ/ad.jpg");
  background-size: 100%100%;
  background-attachment: fixed;
  font-family: var(--font-family);
}

a{
  color: var(--links);
}
a:hover{
  color: var(--hover);
  text-decoration: none;
}
.icon{
    font-size: 12px;
}
.kudos, DIV[id='kudos'] > FORM [type="submit"]{
    color:var(--links);
    text-shadow: 1px 1px 4px #000;
}
a, p, b, .count, nav label, .author-details h4, .kudos{
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
h1{
    font-family: 'Monsieur La Doulaise', cursive;
    font-size: 40px!important;
    text-shadow: 1px 1px 3px #000;
    font-weight: 1;
}
h2, h3, h4{
    font-family: 'Tangerine', cursive;
    font-size: 25px!important;
    text-align: center;
}
nav{
  color: var(--links);
  border: var(--borders);
}
nav .top{
  background: var(--logo-blue);
  color: black;
}
nav .links{
    text-align: center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: " | ";
  color: var(--header);
  font-size: 25px;
}

nav .links a{
  color: var(--links);
  text-shadow:none;
}

nav .links a:hover{
  color: var(--hover);
}

/* change the color at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(0) saturate(100%) drop-shadow(1px 1px 3px #000)!important;
    height:30px!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent!important;
    border:none!important;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
    color:#410E0A!important;
}
nav button{
    background-color: transparent;
    border:none;
    color:#410E0A!important;
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
/* this is where you edit your blog entry */

.blog-entry .comments .heading{
  border-top: 2px solid var(--othertext); /* this is the line that appears under the kudos */
}

.blog-entry .title{
  padding:10px;
  background-color: var(--lightest-blue);
  color: var(--header);
  border: var(--borders);
  font-family: var(--font-family);
  border-radius: 3px;
}

.blog-entry .content{
  padding: 10px;
  background-color: var(--lightest-blue);
  border: var(--borders);
  border-radius: 3px;
}

.count{
  color: var(--links); /* kudos color */
}

main{
  background: transparent;
  color: var(--text);
}
/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
  text-align: center;
  border-radius: 3px;
}
.edit-info img:not(.icon){
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
    margin-top:10px;
}

/* comments table */

.comment-replies{
    border:none;
    box-shadow: 0px 0px 5px black;
    border-radius: 10px;
    margin:10px;
}

.comment-reply:not(:first-child){
    border-top: 1px dotted black;
}

.comments-table{
  border: var(--borders);
  background-color: transparent;
  border-spacing:10px;
  padding:5px;
}

.comments-table td:first-child{
  background: var(--light-orange);
  border: 1px solid #000;
}
.comments-table td{
  background: var(--even-lighter-orange);
  border:none;
  padding:9px;
  box-shadow: 0px 0px 10px black;
  border-radius: 10px;
}
.comments-table td:first-child img:not(.icon){
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
}
footer{
    background-color: transparent;
}
footer p, footer a{
    color:#B9B9B7!important;
}
</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 )

⁺˚⋆｡°✩sal✩°｡⋆˚⁺

1738448121

using

Report Comment

Neela

1737572583

usin + love ur workk

Report Comment