Grunge Petals Blog CSS

Tags: red, black, grunge, darkred, blog, 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://wallpaper.dog/large/982663.jpg
⇘ Divider: https://www.clipartmax.com/png/full/294-2943352_separator-1511402728-red-separator-png.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=35241) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Arizonia&family=Quintessential&display=swap');
</style>
<style>
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url("https://i.ibb.co/5YNx4Y8/QpnTsrV.jpg");
    content: "";
    height: 300%;
    left: -50%;
    opacity:.2;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}
@keyframes grain {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

:root{
  --gray: #000; /* background color */
  --logo-blue: transparent; /* navigation background color */
  --lighter-blue: transparent; /* nav links background */
  --lightest-blue: transparent; /*sidebar background */
  --light-orange: #000; /* comments table first child background */
  --even-lighter-orange: #000; /* comments table second child background */
  --borders: none;
  --font-family: 'Quintessential', cursive;
  --header: crimson;
  --text: darkred;
  --othertext: crimson;
  --links: red;
  --hover: red;
}
body{
  background-image: url('https://wallpaper.dog/large/982663.jpg'), url('https://wallpaper.dog/large/982663.jpg');
  background-size: 30%;
  background-attachment: fixed;
  background-position: left, right;
  background-repeat: no-repeat;
  font-family: var(--font-family);
}
a{
  color: var(--links);
}
a:hover{
  color: var(--hover);
  text-decoration: underline;
}
nav{
  color: var(--links);
  border: var(--borders);
}
nav .top{
  background: var(--logo-blue);
  color: var(--header);
}

/* 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);
}
nav .links{
    text-align: center;
}
nav .links a{
  color: var(--links);
  text-shadow:none;
}

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

/* 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:0px;
  background-color: var(--lightest-blue);
  color: var(--header);
  border: var(--borders);
  font-family: var(--font-family);
}

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

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(19%) sepia(57%) saturate(4801%) hue-rotate(352deg) brightness(76%) contrast(84%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid darkred!important;
    border-radius: 3px;
    color: var(--links) !important;
}

button{
    border: 0px solid var(--links) !important;
    background-color: transparent !important;
    color: var(--links) !important;
}

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

main{
  background: transparent;
  color: var(--text);
}

footer{
  color: var(--text);
  background: var(--gray);
  border: var(--borders);
}

/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
}
/* red divider */
.edit-info:after{
    background-image: url('https://www.clipartmax.com/png/full/294-2943352_separator-1511402728-red-separator-png.png');
    height:30px;
    display: block;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 20px;
}
.edit-info img:not(.icon){
    background-image: url('https://i.ibb.co/xhm7bY7/Red-Static.gif');
    background-size: 50%;
    padding:8px;
}

/* comments table */

/* this is the border around the replies */
.comment-replies{
    border:1px solid darkred;
    border-radius: 3px;
} 
/* line in between comment replies*/
.comment-reply:not(:first-child){
    border-top: 4px double darkred;
}
.comments-table{
    border:none;
    border-spacing: 0px 10px;
}
.comments-table td{
    background-color: transparent!important;
}
.comments-table td:first-child img:not(.icon){
    background-image: url('https://i.ibb.co/xhm7bY7/Red-Static.gif');
    background-size: 60%;
    padding:5px;
    border-radius: 3px;
}
.comments-table button{
    border:none;
    background-color: transparent;
    color:crimson;
    font-family: 'Quintessential', cursive;
    font-size: 13px!important;
    font-weight: 1;
    letter-spacing: 1px;
    text-shadow: 0px 0px 4px red;
}
</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 17 of 17 comments ( View all | Add Comment )

emodastmalchian	1749805601 using !!! Report Comment
Jay	1744162186 Using thank you! Report Comment
T	1739010907 Using Report Comment
Yuki	1738535460 Using<3 Report Comment
Lady.Dis-Fortune	1735947600 Using, this is pretty nice! Report Comment
xX_V_TheLivingDexdCxrpse_Xx	1734387678 Using! Thank you very much! ^^ Report Comment
AJax FInn	1726132157 ussingg ^^ Report Comment
P0rcelainV4mp1334	1722023763 using, might change backgrounds Report Comment
vincenzo (WIP)	1718650414 using Report Comment
Dewdrop	1709468376 Using, might change Report Comment
mossings	1708232094 usingg Report Comment
˚ ཐི⋆♱Maeve♱⋆ཋྀ ˚	1705260114 Using, might change in the future though. Im not sure, but definitely using!!! Report Comment
𝑘𝑢𝑟𝑎𝑖	1704217640 using Report Comment
kuzu	1704148085 using, thx Report Comment
Boxycliff	1700671071 love it. using! Report Comment
kamo	1700008840 using! Report Comment
Ⓐ Trash Boat Ⓔ	1698112984 using Report Comment