Black layout

Tags: simple, black, gray, bela

Description:

If you have any questions, please go to my blog here.

Image Credits —

⇘ Body Background: https://i.pinimg.com/originals/4f/07/61/4f07618e6737f672bedccccd4ed06f16.jpg

⇘ Nav and other boxes background: https://cdn.wallpapersafari.com/80/17/TZxt1s.jpg

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

Bebel	1743518487 using ig Report Comment
𝖘𝖒𝖔𝖑𝖈𝖔𝖔𝖐𝖎ɛɛɛ	1743460607 using!! tysm for making this, its so gorg Report Comment
NathanielVamp	1743278732 Eu adorei muito! Obrigado ^^ Report Comment
M.4.3	1743242095 using Report Comment
Macy	1743192781 Using Report Comment
Nebb	1743107183 Using Report Comment
Marleyanne	1743072257 using Report Comment
☆Jolene☆	1742962878 I can't wait to use it for my blogs when I write at night so the screen is all black!! Thank you so much☆☆☆ Report Comment
Harley.Q	1742700545 Absolutely brilliant. I love how clean it looks. Will be using this. Thank you. Report Comment
natalie	1742666941 using Report Comment
Vico	1742490516 using! Report Comment
LinneaGK	1742487938 Using!! Report Comment
Beadb	1742482306 Using Report Comment
𝕰𝖉𝖆	1742400949 using Report Comment
averi	1742091270 using!thanks Report Comment
s0n0r@ schw@rz	1742075436 using Report Comment
s.andy	1742069944 Usandooo Report Comment
charlie	1741953188 using :3 Report Comment
asu	1741872615 using Report Comment
praga	1741869181 using Report Comment