BLOG CSS for Black and gray layout

Tags: black, gray, bela

Description:

preview the blog here

Copy the code below and Paste it into your blog above your content.

You can add the css before writing your blog content, or afterwards.
I find it easier to add it after you have your blog content if you plan to add more styling or if you want to edit the CSS code.

Here is a quick how-to if you need it:

If you still need help, check out my blog for more info or questions or comments ~

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

Nostalgia	1711957677 using !! tyy :) Report Comment
mandala314	1711335436 Using ty Report Comment
s0dabra1n	1711206683 usando, graciassssssssssssss Report Comment
siponic	1711048819 usinggg Report Comment
damo	1710013687 how can i add music ?): Report Comment
lottie	1709844120 using with mods! thank you Report Comment
Will	1708676508 Thank you!! Report Comment
vicious	1706849124 nice! Report Comment
maoen	1706372769 using!! Report Comment
Kimluna	1706304303 Usando<33 Report Comment
Chaaotic	1705883950 using Report Comment
Ro'splace	1705873248 usando <3 Report Comment
Lee	1704331931 using! Report Comment
cevityl	1702899785 using !! Report Comment
hzel	1702649122 using >:3 Report Comment
zoindexter	1702062536 will use!! Report Comment
Void	1701308443 Thanks for this! I edited the fonts to make them more readable for me, but this was just what I was looking for! Report Comment
xtalkr	1700629233 using tyy :DD Report Comment
Annoying Orange	1699652886 using :D Report Comment
♱𝕯𝖆𝖗𝖐𝖋𝖗𝖔𝖘𝖙 𝖙𝖍𝖊 𝖘𝖜𝖔𝖗𝖉𝖘𝖒𝖆𝖓♱	1692573651 Using! Report Comment