Violet Layout Blog CSS

Tags: violet, cyber, fuchsia, black, 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=92329) -->

<style>
@font-face{font-family: "SpellweaverNodes-JRwXx"; src: url("//dl.dropbox.com/s/0tm4gs9n6ica91k/DecepticonGraffiti-p3wy.ttf");}
@font-face{font-family: "CyberpunkSealion-Mj8p"; src: url("//dl.dropbox.com/s/rzlijqx4xhy94fx/CyberwarRegular-7BX0E.ttf");}
</style>

<style>
/* separate from the other fonts so it loads correcty */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Share+Tech+Mono&display=swap');
</style>

<style>
body {
    background-color: black;
    background-image: url('https://images.alphacoders.com/132/1328375.png');
    background-attachment: fixed;
    background-size: 100%100%;
}
nav .top, nav .links {
    background-color: transparent;
}
nav .links a {
    text-shadow: none;
}
nav .links {
    margin-bottom: 10px;
}
nav img.logo {
    filter: brightness(0) saturate(100%) invert(75%) sepia(64%) saturate(1058%) hue-rotate(264deg) brightness(98%) contrast(91%)!important;
}
main {
    background-color: transparent;
}

/* fonts and colors */

a{
    color: violet!important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px!important;
    font-weight: 1;
    text-transform: lowercase;
}
p, b, nav label, .count, nav .top, button {
    color: DarkViolet!important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px!important;
}
h2, h3, h4{
    color: DarkViolet!important;
    font-family: 'Major Mono Display', monospace;
    font-size: 15px!important;
    font-weight: 1;
}
.icon {
    font-size: 11px!important;
}
button {
    border: none;
    background-color: transparent;
}
[id='q'] { /* search box */
    background-color: #221144;
    border: none;
    color: #3322cc;
}
/* your profile picture box */
.edit-info{
    background-color: black;
    border-radius: 20px;
    border: 3px solid orchid;
    box-shadow: 0px 0px 10px Fuchsia;
    padding: 10px;
}
.profile-pic img{
    border-radius: 10px;
}
/* blog title */
.blog-entry .title{
    background-color: black;
    border-radius: 20px;
    border: 3px solid orchid;
    box-shadow: 0px 0px 10px Fuchsia;
    color: orchid!important;
    font-family: "CyberpunkSealion-Mj8p";
    font-size: 20px!important;
    font-weight: 1;
    text-align: center;
    padding: 10px;
}
.blog-entry .content{
    background-color: black;
    border-radius: 20px;
    border: 3px solid orchid;
    box-shadow: 0px 0px 10px Fuchsia;
    margin-bottom: 10px!important;
    margin-top: 30px!important;
    padding: 10px;
}
.kudos{
    background-color: black;
    border-radius: 20px;
    border: 3px solid orchid;
    box-shadow: 0px 0px 10px Fuchsia;
    padding-left: 10px;
}

/* the comments section */

DIV[id='comments'] > DIV > P{
    background-color: black;
    padding:10px;
    border-radius: 10px;
    border: 3px solid orchid;
}
.comments .heading{
    background-color: black;
    border: 3px solid orchid!important;
    border-radius: 15px;
    margin-top:20px!important;
    margin-bottom:10px;
    box-shadow: 0px 0px 10px Fuchsia;
}
#comments .inner {
    /* if you don't want a scrollbox just delete the height and overflow */
    height: 600px;
    overflow-y: scroll;
    padding-bottom: 20px;
    padding: 10px;
}
.comments-table {
    background-color: #cc22ff!important;
    border-spacing: 0px 3px;
    border: 1px solid #000066;
}
.comments-table td {
    background-color: #221144!important;
    border: none;
}
.comment-replies {
    border-radius: 20px;
    border: 1px solid #000066;
    margin: 20px;
}
footer {
    background-color: transparent;
}

/* the scrollbar styles */

::-webkit-scrollbar {
    width: 16px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background-color: #000066;
    border-radius:20px;
}
::-webkit-scrollbar-thumb {
    background-color: #001188;
    border-radius: 10px;
    box-shadow: 0px 0px 4px #cc22ff;
}
::-webkit-scrollbar-thumb:hover {
    background: magenta;
    box-shadow: 0px 0px 4px #cc22ff;
}
::-webkit-scrollbar-button {
    background-color: #221144;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    height: 16px;
    width: 10px;
}
/* you can go to https://icons8.com/ for more arrow icons */

::-webkit-scrollbar-button:start:decrement {
    /* the up arrow */
    background-image: url('https://img.icons8.com/fluency-systems-regular/48/C850F2/sort-up.png');
    border-radius: 10px 10px 0px 0px;
}
::-webkit-scrollbar-button:end:increment {
    /* the down arrow */
    background-image: url('https://img.icons8.com/fluency-systems-regular/48/C850F2/sort-down.png');
    border-radius: 0px 0px 10px 10px;
}
</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.