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

⋆˚࿔Spicy_vinta⋆˚࿔	1754929563 using Report Comment
Zukich	1754312888 Imma try it out thanks Report Comment
yungbonz	1754158678 using!, thank you so much! Report Comment
Peace/Eli	1753887426 using!! Report Comment
Alex✩₊˚.⋆☾⋆⁺₊✧	1753697547 using Report Comment
nlsonsprings	1753354559 thank you! Report Comment
Shu1ch1☆	1753238461 Using! Report Comment
_mariiszx	1753148796 Using Report Comment
⦻earlysunsetsareformuggings⦻	1753102452 using!<3 Report Comment
acetrainerleo	1752261986 usinggg Report Comment
Nightmare	1751272529 will use <3 Report Comment
Ida Nakahara	1751050613 Usiiinggg Report Comment
Cody	1750903227 using Report Comment
kkolg	1750635694 using!! :D Report Comment
shan13	1749460921 usinggg Report Comment
Doll	1748948995 using tqvm <3 Report Comment
poolnoom	1748178949 using :) tysm! Report Comment
Xuma/Void	1744712664 Using Ty!! Report Comment
ImHavingCrisi_s (16)	1744650529 using! Report Comment
beren	1743686365 using,thanks Report Comment