Dark Olive Theme

Tags: green, black, dark, simple, animated

Description:

Credit is appreciated but not needed!

If you like my layout please support by friending me or commenting! :)

Thank you!

- Euoni

Preview:

click on the image for a larger preview

Code:

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

<style>
a:hover{
 cursor: url('https://ani.cursors-4u.net/nature/nat-11/nat1037.cur'), auto !important;
}
* {
 cursor: url('https://ani.cursors-4u.net/nature/nat-11/nat1037.cur'), auto;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica+SC&display=swap');
</style>
<style>
@media(max-width: 600px){ 

.container{
  width:100%!important;
}
</style>

<style>
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url(https://i.gifer.com/origin/09/098a359ee79551f8a36b42338a9255cc_w200.gif);
    content: "";
    height: 300%;
    left: -50%;
    opacity:.3;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}
@keyframes grain {
 0%, 100% { transform:translate(0, 0) }
 10% { transform:translate(-5%, -10%) }
 20% { transform:translate(-15%, 5%) }
 30% { transform:translate(7%, -25%) }
 40% { transform:translate(-5%, 25%) }
 50% { transform:translate(-15%, 10%) }
 60% { transform:translate(15%, 0%) }
 70% { transform:translate(0%, 15%) }
 80% { transform:translate(3%, 35%) }
 90% { transform:translate(-10%, 10%) }
}

:root{
  --headers: black;
  --text: darkolivegreen; 
  --names: olivedrab;
  --links: darkolivegreen;
  --font-family: 'Staatliches', cursive;
  --mynamesize: 35px;
  --transparency: 0.33;
  --curve: 12px;
  --hue: 0deg;
  --simple_bg: olive;
  --topic1: "Pronouns";
  --topic2: "Hobbies";
  --topic3: "Music";
  --topic4: "Shows";
  --topic5: "Books";
  --topic6: "Fandoms";
  --myactions: "no reason not to add me ";
  --mytopics: "feeling all this rn ";
  --mylinks: "follow me on these sites";
}
h3, h4, h5, .url-info b{ color: var(--headers) !important;} 
a{color: var(--links) !important;} 
p, h2{color: var(--text) !important;} 
h1, .count, .friends a p{color: var(--names) !important;} 
nav label{color: var(--headers) !important;} 
.section h4{color: var(--names) !important;} 
.online{color: var(--links) !important;} 
.section{color: var(--text) !important;} 
.details p:last-child{color: var(--text);}
.blog-preview h4, h2, h3, h5{color: var(--headers)!important;}
}
.container{
    width:40%;
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
  color:var(--links) !important;
  letter-spacing:normal !important;
   text-shadow: 	2px 2px black !important;
   filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

body{
    background-color: black;
    text-align: center;
}

h1{
    color: #74740b;
    font-family: 'Staatliches', cursive;
    font-size: 40px!important;
    text-shadow: 2px 2px 3px darkolivegreen;
}
    .blurbs .heading{
        
    color: blue !important;
}

nav{
    background-color: transparent;
    border: none;
    text-align: center;
}

nav .top{
    color: olive;
}

nav .top, nav .links {
    background-color: transparent;
}
nav .links{
    border-top:1px solid olive;
    border-bottom:1px solid olive;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ♥";
    color: olive;
}

nav img.logo{
    filter: invert(31%) sepia(100%) saturate(338%) hue-rotate(20deg) brightness(40%) contrast(90%) !important; 
    height:30px;
}

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid olivedrab !important;
    color: olivedrab !important;
}

button{
    border: 0px solid olivedrab !important;
    font-family: 'Staatliches', cursive;;!important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color: darkolivegreen !important;
}

.online{
    margin:auto;
    padding-bottom: 5px;
    content: url(https://dl.glitter-graphics.com/pub/104/104607x61kd02dl0.gif);
}

a, p, nav label, .section{ 
    font-family: var(--font-family);	
    font-size: 13px!important;
    font-weight: 1;
}
h2, h3, h5{
    font-family: var(--font-family);
    font-size: 13px!important;
    font-weight: 1;
}

hr{
    height:1px;
    background: olivedrab;
    border: none!important;
}

.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    color: olive;
    border: var(--borders)!important;
    background-color: !important;
}
.comment-replies{border:1px solid olivedrab;} 
.comment-reply:not(:first-child){border-top: 4px double olivedrab;}
.comment-reply p{
 margin: 0;
 text-align: left;
}

td{
    background-color: transparent!important;
}

main{
    background: transparent;
    border: transparent;
    outline: none;
}

.table-section{
    border:none !important;
}

.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading{
    background-color: #74740b;
    background-size: contain;
    border: 1px solid black;
    font-family: 'Staatliches', cursive;
    font-size: 17px!important;
    font-weight: bold;
    color:black;
    text-align: center;
    text-shadow: 1px 1px 5px black;
}

.profile-info {
    background-color: transparent !important;
    border:none !important;
}

.profile-pic img{
    background-color: #4a6024;
    background-size: 30%30%;
    padding:4px;
    border: 3px solid #7f7f0a;
}
.profile-pic {
    margin:auto;
}
.friends-grid{
    text-align: center;
}
.profile .friends .person img:not(.icon){
    border-radius: var(--curve) !important;
    height:100px;
    width:100px;
}


.contact .inner a img {
 font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* add me */
	content: "✚"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* faves? */
	content: "☀"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chit chat */
	content: "☁"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forwardd */
	content: "☯"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant chat */
	content: "✉"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: "✂"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* group me */
	content: "✿"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: "❀"
}

.comments-table {
    display: block;
    height: 600px!important;
    border: 0px dotted olive !important;
    outline: none !important;
    border-radius: none;
    padding: 5px;
}
.comments-table td:first-child *{
    color: var(--text);
}
.comments-table td{
    border: 2px solid black;
    padding:10px;
    border-radius: 0px;
}

footer{
    background: transparent;
}
footer a{
    color: olive;
}
footer p{
    color: darkolivegreen;
}

.blurbs .heading {display:none;} 
.url-info {display:none;} 
.blog-preview h4 {display:none;} 
</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 19 of 19 comments ( View all | Add Comment )

Oliver	1747179036 love the black and olive contrast, using :) Report Comment
ꔛ Addiieeee ꔛ	1744560039 maybe usingg Report Comment
♡ ｡ mori ⑅ !	1727436893 plan on using ! <3 Report Comment
caz	1716003237 using!! Report Comment
ZombiesKillzXD	1707601557 Love the colors! Good job and usin Report Comment
ɹǝʌılo	1706399605 using! Report Comment
⋆𓏲 tavryn ★ ; 🖤	1697432910 USINGNNGG Report Comment
𝙆𝟏-𝘽0✮⋆˙	1693479358 using Report Comment
marcin ☆	1691682808 using !! Report Comment
ninh_ji	1679969270 using this, thank you! Report Comment
kieran ✧.*	1675618062 using ! Report Comment
atticus	1674849525 using ! love this :D Report Comment
Nick	1674801666 yes yes yes Report Comment
wheezit	1672830912 using! Report Comment
DOOMSURFF!	1669685339 it looks great! im gonna use this Report Comment
SLIM GRIMS	1667862474 love this. Will use. How do you liked to be credited anyway? Report Comment
Stuie	1651738953 Definitely gonna use this :D Report Comment
Paxton	1649586160 gonna use this :3 ! Report Comment
Coyote	1649039897 used, ty this is nice Report Comment