BLOG CSS for Black and gray layout

Tags: black, gray, bela

Description:

this is the BLOG code not the layout code

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://external-media.spacehey.net/media/sP-nZ-DI-uLMBWnf3R262xBHUau1K6mVIWpPKCpBUnEs=/https://wallpapercave.com/wp/wp2686927.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=31917) -->

<style>

/* font */

/* @import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap'); */



:root{
  --gray: #000; /* background color */
  --logo-blue: #000; /* navigation background color */
  --lighter-blue: #000; /* nav links background */
  --lightest-blue: #000; /*sidebar background */
  --light-orange: #000; /* comments table first child background */
  --even-lighter-orange: #000; /* comments table second child background */
  --borders: 2px solid gray;
  --font-family: "Courier New", cursive;
  --header: whitesmoke;
  --text: whitesmoke;
  --othertext: whitesmoke;
  --links: gray;
  --hover: white;
}

/*custom cursor */

* { 
    cursor: url('https://external-media.spacehey.net/media/sZ-P8ITxDc5WDNkzy36iwDJfiskIQVR4ATUA-0x68DJo=/https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur'), auto; 
}
a:hover {
    cursor: url(https://external-media.spacehey.net/media/swuFkRTJOkp9EVgnjIKDNJXhawLZMRjOSm2nYy1BmAcE=/https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur), auto;
}

body{
  background-color: var(--gray);
  background-image: url('https://external-media.spacehey.net/media/sP-nZ-DI-uLMBWnf3R262xBHUau1K6mVIWpPKCpBUnEs=/https://wallpapercave.com/wp/wp2686927.jpg');
  background-size: contain;
  font-family: var(--font-family);
}

a{
  color: var(--links);
}

a:hover{
  color: var(--hover);
  text-decoration: none!important;
}
nav{
  color: var(--links);
  border: var(--borders);
}
nav .top{
  background: var(--logo-blue);
  color: var(--links);
}

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

.blog-entry .content{
  padding: 10px;
  background-color: var(--gray);
  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(100%) sepia(0%) saturate(0%) hue-rotate(216deg) brightness(103%) contrast(103%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: var(--borders)!important;
    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);
}

/* comments table */

.comment-replies{
  border: 1px solid gray;
}

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

table.comments-table{
  border: var(--borders);
  background-color: #000;
  border-spacing: 7px;
  padding:5px;
}

.comments-table td:first-child,
.music-table td:first-child{
  background: var(--light-orange);
  border: 1px solid gray;
}
.comments-table td,
.music-table td{
  background: var(--even-lighter-orange);
  border: 1px solid gray;
  padding:9px;
}

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

gustavo brumatti	1742845972 using Report Comment
skellie_t0n	1742287248 using tysm !! Report Comment
Rachel~	1742045629 using <3 Report Comment
praga	1741381393 using! Report Comment
nocturnal_nat	1741335996 using~ Report Comment
LlyrMontgomery	1740974614 Using! thanks- Report Comment
Monotism	1740041178 Using! Report Comment
im_faithh TAKE TWO	1739977782 using <3 Report Comment
skirmisher	1738733923 thanks mate Report Comment
Bobo/T(NOT MOBILE FRIENDLY.)	1738596062 Using Report Comment
Lt. Gir	1738254959 Using. it looks great. Thanks! Report Comment
Sid Mondo	1738148580 Using ! Report Comment
Edit	1737854320 using! Report Comment
MATrat :3	1736802769 using this!!! Report Comment
Tomk@	1735280100 usinhg, tjank you! Report Comment
⋆˚࿔ ✟ 𝗷𝗲𝗹𝗹𝘆 ﾒ˚⋆	1734934784 using !! Report Comment
lunabye	1734889173 using thanks lot!! Report Comment
dro?!?	1734487756 using ty! Report Comment
Salcito	1733362560 using Report Comment
Katie	1733173200 using Report Comment