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

Stella	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
sebas !!	1762021513 using !! ^^ Report Comment
Silvia	1758444326 Using Report Comment
ashfay	1758055235 Thank you! I changed the background, though. I like the colors of the theme, or rather the contrast. Report Comment
lake	1756762019 using!! thank you! Report Comment
⋆˚࿔DizzyLizz⋆˚࿔	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
r0ttingheart	1753697547 using Report Comment
nlsonsprings	1753354559 thank you! Report Comment
Shu1ch1☆	1753238461 Using! Report Comment
_mariiszx	1753148796 Using Report Comment
☆sebby [bucky barnes obsessor]☆	1753102452 using!<3 Report Comment
acetrainerleo	1752261986 usinggg Report Comment
Nightmare	1751272529 will use <3 Report Comment
Ida Nakahara	1751050613 Usiiinggg Report Comment