Black layout

Tags: simple, black, gray, bela

Description:

✧ feel free to change it up to your style.

✧ if you have any questions, comment below or in this blog post.

✧ copy and paste the code to your "about me" section.

✧ you can copy and paste the code here or here to preview it before you add it to your profile.

✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

remember that it's against spacehey rules to hide the spacehey logo, search bar, or logout buttons in the navigation.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=1393) -->

<style> 

/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com , https://custom-cursor.com , https://www.cursors-4u.com
============⚠️==========*/

/*=== cursors ===*/
a:hover{
    cursor: url('https://cur.cursors-4u.net/cursors/cur-10/cur966.cur'), auto;
}
* {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-10/cur970.cur'), auto;
}
</style>

<style>

/*=== font style ===*/
@font-face { font-family: "ElegantTypewriter-L3Pa3"; src: url('//dl.dropbox.com/s/uw4ksded848qvrq/ElegantTypewriter-L3Pa3.ttf'); }
@font-face { font-family: "IMFeDPsc28P"; src: url('//dl.dropbox.com/s/u1nn1w6mox63rej/IMFeDPsc28P.ttf'); }
</style>

<style>

/*=== layout details ===*/

:root{
     --headers: Darkgray;
     --text: DarkGray;
     --names: Gainsboro;
     --links: DimGray;
     --hover: whitesmoke;
     --borders: 4px inset #221F1F !important;
     --background_image: url('https://i.pinimg.com/originals/4f/07/61/4f07618e6737f672bedccccd4ed06f16.jpg');
     --font-family: "ElegantTypewriter-L3Pa3";
     --curve: 0px;
}

.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px double var(--links);} /* line in bewtween comment replies*/
.count{color:Gainsboro;}

/*=== text decoration ===*/
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
.logout-btn:hover,
.logout-btn:active{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .top a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}
nav .links a:hover{
    text-decoration: underline;
    text-decoration-style: wavy;
}

/*=== font family ===*/
a, p, nav label, .section{
    font-family: var(--font-family) !important;	
    text-shadow: 0px 0px 0px black !important;
    font-size: 14px!important;
}
h2, h3, h4, h5, DIV.mood > P:nth-child(1) > B, P:nth-child(2) > B{
    font-family: "IMFeDPsc28P";
    text-shadow: 0px 0px 0px black !important;
    letter-spacing: .3px;
    font-size: 16px!important;
}

/*=== padding and margin ===*/
.icon{border:none !important;}
.blurbs{margin-top:10px !important;margin-bottom:30px !important}
.friends{margin-top:-10px !important;margin-bottom:30px !important}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:5px inset var(--links);}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;margin-top:30px!important}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
.mood{margin-top:20px;}
.blog-preview{margin-top:30px;}
.mood, .blog-preview{margin-bottom: 30px;}
.table-section, .blurbs, .friends{margin-bottom: 30px !important;}
.friends{margin-top: 10px!important;}

/*=== background image ===*/
body {
    background-image: var(--background_image) !important;
    background-color: black ;
    background-repeat: repeat;
    background-size: contain;
}

/*=== navigation ===*/
/*=== change logo color at https://codepen.io/sosuke/pen/Pjoqqp ===*/
nav{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top {
    background: rgba(0,0,0,0.0);
}
nav .top a{
    color: var(--links)!important;
}
nav .links {
    background: transparent!important;
    background-size: 100%100%!important;
    text-align: center;
    font-size: 14px;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%) hue-rotate(10deg) brightness(96%) contrast(89%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ⋮ ";
    color: var(--text);
}

/*=== color the search bar and button ===*/
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 2px solid var(--links) !important;
    color:DarkGray !important;
    border-radius: 10px !important;
}
button{
    border-radius: 10px !important;
    border: 0px solid DarkGray!important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--links)!important;
}

/*=== online icon and color ===*/
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(0%) saturate(0%)
    hue-rotate(10deg) brightness(96%) contrast(89%); !important;
}

/*=== profile name ===*/
h1{
    padding-left: 30px !important;
    font-family: "IMFeDPsc28P";
    font-size:30px !important;
    margin-top: -10px!important;
    color: DarkGray!important;
}

/*=== profile info ===*/
.profile-info{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-top: 30px;
}
.profile-info .inner{
    font-weight: bold;
    text-align: center;
}

/*=== contact ===*/
.contact {
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add to friends */
	content: "✢"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "⇢"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "☏"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "⤇"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "✎"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "⌧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "⇔"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "⊗"
} 


/*=== images ===*/
main{
    background: transparent;
    padding: 6px 0px;
    background-size: 100%;
    background-position: center;
}
.profile-pic img{
    outline:none !important;
    border: var(--borders)!important;
    filter:drop-shadow(0px 0px 0px black)!important;
}
.profile .friends .person img{
    border-radius: 10px;
    border: var(--borders) !important;
    filter:drop-shadow(0px 0px 0px black) !important;
}
.friends-grid{
    text-align: center;
}
.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
}
.inner img{
    outline:none !important;
    filter: drop-shadow(0px 0px 0px black) !important;
    border-radius: var(--curve) !important;
}

/*=== interest table background color. replace transparent with any color to see the change ===*/
td {
    background-color: transparent!important;
}
hr{
    border: 2px inset #221F1F;
    background: #221F1F;
}

/*=== boxes ===*/
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.friends, .blurbs{
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
}
.mood, .blog-preview{
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.mood, .blog-preview {
    text-align: center;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border: var(--borders) !important;
}
.table-section{
    border:var(--borders) !important;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
    border-radius: var(--curve) !important;
}
.heading{
    background:transparent!important;
    padding-bottom: 4px !important;
    background-size:100%100%!important;
    text-align: center;
    border:none!important;
}
.comments-table td {
    background-image: url('') !important;
    background-size: cover;
}
.comments-table td:first-child{
    background: url('')!important;
    background-size: 50%!important;
}
.comments-table td:first-child img {
    border: var(--borders);
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}

/*=== footer ===*/
footer{
    color:red;
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: url('https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg');
    background-size: cover;
}
</style>

<style>
/*=== Scrollbar styles ===*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 1px;
    border: 5px inset DimGray;
}
::-webkit-scrollbar-thumb {
    background: DimGray;
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: DarkGray;
}
</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 142 comments ( View all | Add Comment )

Bruh Moment2469	1661557719 Thanks I love this theme lol Report Comment
Grace	1660706966 love this Report Comment
Ash	1659466035 nice + simple! thnx! Report Comment
Ryan ♡ ♡ ♡	1658858090 live laugh love this this Report Comment
P1R4T3	1658293779 Awesome! Report Comment
Aquandria	1657933286 Cool theme. Love this! Report Comment
darknight241	1657175447 i made myself a modified version of this theme... thx! cool theme Report Comment
'brook'	1656384691 Thanx!! Report Comment
Reverend Kade	1656213077 Love this! Report Comment
Wall_Spider	1655594868 Love this! Tysm for sharing Report Comment
c l e m <3	1655083393 i luv it sm!1!1!1 thx u its awsome Report Comment
Gem	1654815022 loveeee! using :)) Report Comment
minase	1654417829 using!! Report Comment
txnka	1654232883 Im using! Report Comment
mythos	1652721048 bro this is so nice def gonna use this Report Comment
barbielikegingerale	1652666462 so then is the about me box un-useable now? I wanna put stuff about me in there :( /nm Report Comment you can still use it, but if you have any issues let me know! by Bela; 1652831129; Report how do e use it? do we just put the normal stuff n there after the code? by barbielikegingerale; 1652923843; Report
resisttemptation	1651950571 using Report Comment
Stephanie Q.	1651398441 Love this layout Report Comment
Ælvis	1651384858 Amazing :> Report Comment
sam_the_hunter	1650827202 How do I change the color of the spacehey logo? Report Comment change logo color at https://codepen.io/sosuke/pen/Pjoqqp by Bela; 1650916858; Report