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

ghouletta	1776115506 using Report Comment
Polilla	1774212700 using Report Comment
maxian13	1771155979 using :P Report Comment
stupidellaaaaa	1767902755 using! Report Comment
feryrl	1767406289 using Report Comment
feryrl	1767406257 using Report Comment
feryrl	1767406257 using Report Comment
NICKYBOO⭐️	1767017163 Using!! Report Comment
⋆˚꩜｡ Xinyei 𝜗ৎ⋆˙⟡	1766665445 Usingg Report Comment
FL0RID	1766188783 using Report Comment
4b3y_t@lk5	1766163199 usingg !! Report Comment
Briar	1765227227 Using Report Comment
Briar	1765227225 Using Report Comment
MegiSonika	1764934233 Using! Report Comment
Anna	1764498084 using Report Comment
zookid	1764217808 it isnt changing my theme after i click the eye :( help? Report Comment
Cee	1764124743 using! Report Comment
azkei	1763816601 using! <3 Report Comment
Unknown Pseudoartist	1763627864 Hi! I'm not using your layouts, but your info about where and how to add the code (for both profile and blogs) was quite useful to just make my own from scratch, since I have my own basic HTML/CSS knowledge but it's not that clear and intuitive where to add that. So just manted comment to say thank you for that :) Report Comment
bl00d4ngle.k1ss	1762350789 using! <33 Report Comment