Black Sidebar Stencil

Tags: crashtestdummy, black, dark, sidebar, custom, simple, layout, stencil

Description:

Simple black quick loading layout. With sidebar, Stencil text, and grey wifi online emblem. Designed to be custom with fast loading. URL codes only used for font and online icon. Everything else is hard codes with CSS HTML code.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2957) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text&display=swap');
/* bg img/transparent bg */


html {
background: #000000;
}
body, footer, .top {
background: rgba(0,0,0,0) !important;
color: white;
}
main {
background: #00000066 !important;
backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius:25px;
	padding:25px;
	color:#FFFFFF;
}

input {
border: 1px white solid;
border-radius: 4px;
padding: 4px;
background-color: rgba(255,255,255,0.7);
}
nav .links {
background-color: #696969;
}

/* header->sidebar */
@media(min-width:810px) {
nav {
float: left;
width: 190px;
}
main {
float: right;
width: calc(100% - 190px);
position: relative;
z-index: 10;
}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(-20px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 40px 0;
position: relative;
border-radius: 4px 0 0 4px;
width: 90px;
}
nav .links li::after {
content: "" !important;
}
}

/* friends list */
.friends-grid {
display: flex;
flex-wrap: wrap;
}
.person {
display: flex !important;
flex-direction: row-reverse;
padding: 1px !important;
margin: 4px !important;
width: unset !important;
background-color: lightblue;
}
.person p {
margin: 0 1px !important;
}
.person img {
max-width: 20px !important;
margin: 0 !important;
}
.blurbs {
margin: 0;
}


/* biggify */
@media(max-width:810px) {
nav .links {
text-size:20px;
}
}

/* fix img width */
.col.right img {
max-width: 100%;
}

/* fix ONLINE indicator */
.online {
font-size: smaller;
}

.profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
.heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: transparent !important;
        color: #2a2a2a !important;
        border-bottom: 2px solid;
    }

h1, h2, h3, h4,h5,a, p, nav label, .section {color: white;}

* {
        font-family: 'Big Shoulders Stencil Text', cursive;
    }

.profile-info h3 a {
	color: #FFF;
}


.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}
.comments-table tr td:last-child {
	height: 250px;
	display: block;
	overflow-y: scroll;
}
.comments-table td, .music-table td {
	background: none;
	color: #000;
}
.comments-table tr {
	border-bottom: 1px solid #000;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}
.details-table td:first-child {
    background: transparent;
    font-weight: normal;
    color: #00000066;
    padding: 0;
    vertical-align: inherit;
}
.details-table td {
     background: transparent;
}

.profile .left h1 {
	text-transform: capitalize;
	font-size: 2.5rem;
	color: #FFF;
	text-shadow: 3px 3px 0 #696969;
	font-family: 'Big Shoulders Stencil Text', cursive;
}

.profile-pic {
        border-radius: 500px;
        overflow: hidden;
}
</style>

<style>

.left .contact {
border: 0;
background: #000000;
}

.profile .contact .heading h4 {
font-size: 0;
}

:root {
       --hover: #696969;
}

a:hover{color: var(--hover) !important;}
    
    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;
}


.profile,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
    
  .profile .blurbs .section h4 {
	color: grey;
	font-size: 1rem;
} 

#q, button {
color: 	white;
background-color: black;
border: 1px solid 	white;
font-family: inherit;
}



.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: "\2795"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2b50"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\1F4ac"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\23e9"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\1F4f1"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\274c"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\1F465"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\1f5e3"
}


.profile {
    font-family: 'Big Shoulders Stencil Text', cursive;
	text-shadow:  grey;
}
.profile .left h1 {
	
    font-family: 'Big Shoulders Stencil Text', cursive;
	line-height:1em;
	
}
.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'Big Shoulders Stencil Text', cursive;
	line-height:1em;
	text-shadow: 0 0 7px grey;
	font-size: 1.3rem;
	
}

.online{content:url(https://i.imgur.com/MpVYhNf.png);
    width: 55px;
    height: 55px;
}

<style>
</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 4 of 4 comments ( View all | Add Comment )

33	1702124629 thankss Report Comment
Toria	1637037182 I love the simplicity of this, however I attempted to customize the font and every time I did it wouldn't work. I was wondering if there was a way to request a custom for my profile? I thought I was doing this right but I'm apparently I'm a little... out of touch :( Report Comment What Font? by Paganinjedi; 1644236569; Report
camegube	1636803452 ur the GOAT :) Report Comment It's actually me I do the layouts anonymous and to separate them from my real profile... Thank you by Paganinjedi; 1644236491; Report
JRM	1636759530 can you do one with the sidebar at the top? Report Comment