Overcast Forecast [ANIMATED, AUTOPLAY]

Tags: goblincore, dark academia, rain, rainy, animated, gif, sound, autoplay

Description:

Credit for this layout is appreciated, but not required! Don't use the background .gif elsewhere without credit to me. Also, feel free to comment so that more people will see this layout! A goblincore/dark academia sort of theme, built off of spacehey.com/meh 's framework... with some little goodies added. Background is original art with moving raindrops. Layout includes custom scrollbar (on compatible browsers), gentle autoplaying rain noises, and a Fun Cursor! :D I've also annotated the code with some helpful places where you can change a few simple, easy things to make it more personalized to you! [If, for some reason, you want stream overlays that look like this, check my Ko-Fi!]

Preview:

Code:

<!-- (c) Layout created by Pory (https://layouts.spacehey.com/layout?id=35527) --> <style> /*Theme by https://spacehey.com/rypory !*/ /*Base code credit here goes to spacehey.com/meh !*/ /*Go to their post https://blog.spacehey.com/entry?id=1254 for their original comments. */ /*I've abridged this to be a shorter scroll to put your own text in at the bottom.*/ /*This bit helps make font work*/ @import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap'); /*can put different hex code or named colors here to change text colors!*/ :root{ --headers: black; --links: black; --text: #1e1f11; --names: black; /*this is the background. I made this myself. Credit to Canva and Clipchamp's free moving bits.*/ /*...but I animated the line rain myself ^v^*/ /*if you change this, is it even still the same theme?*/ /*now there's a little philosophy question for ya there*/ --background_image: url("https://cdn.discordapp.com/attachments/1128929048219877407/1128964516823171124/overforethemebg-min.gif"); /*this also makes the font work*/ --font-family: 'Pangolin', cursive; /*You can mess with this, check OP's comments for what they do*/ --mynamesize: 35px; --transparency: 0; --curve: 0px; --hue: 0deg; --simple_bg: gainsboro; /*CHANGE YOUR TOPICS!*/ /*Some of you read books, and might need to swap one of these out for that*/ /*I'm a horrible English major, so I game instead...*/ --topic1: "pronouns"; --topic2: "hobbies"; --topic3: "music"; --topic4: "games"; --topic5: "media"; --topic6: "etc"; /*CHANGE YOUR SECTION TITLES*/ /*button section*/ --myactions: "Be my friend:"; /*topics section*/ --mytopics: "Things I like:"; /*social media section*/ --mylinks: "Social media:"; } /*Code's OP calls the rest of this the "nitty gritty"*/ /*If you dare mess with this, see OP's original explanations*/ /*Removing comments for a while to save space*/ /*see you again for the online gif, scrollbar, and custom icons*/ h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ p, h2{color: var(--text) !important;} /* color of text */ h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */ nav label{color: var(--headers) !important;} /* color of search */ .section h4{color: var(--names) !important;} /* aboutme & want2meet headings */ .online{color: var(--links) !important;} /* color of the 'online' text */ .section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */ /*this bit changes the online gif!*/ .online img { content: url("https://media.discordapp.net/attachments/903364339464044575/1088806527378403338/42FA4B5C-9D78-4B09-9FD2-99420166D45C.gif"); animation-name: none; visibility: visible; height: 15px; width: 15px; } :root{ --box_color_and_seethru: rgba(220, 220, 220, var(--transparency));} h1, h2, h3, h4, h5, a, p, nav label, .section{ font-family: var(--font-family) !important; text-shadow: 1px 1px 10px #5c5c4d !important; } h1, h2, h3, h4, h5, p {padding-left:5px !important;} h1{ font-size: var(--mynamesize) !important; text-transform:none !important; padding-left:10px !important; } body { background-image: var(--background_image) !important; background-color:black !important; background-size: cover; background-attachment: fixed !important; } /*custom cursor! Yippee!*/ * { cursor: url('https://cur.cursors-4u.net/user/use-1/use3.cur'), auto; } .heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table, .table-section, footer{ background-color:var(--box_color_and_seethru) !important; border-radius: var(--curve) !important; padding: 8px !important; border: var(--borders) !important; } #comments, .blurbs, .blog-preview, .friends, .mood, .contact, .table-section, footer { backdrop-filter: blur(0.58px);} .table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: var(--curve) !important;} .heading{background:none !important;padding-bottom:0px !important;} .profile-pic img{ outline:none !important; border-radius: var(--curve) !important; filter:hue-rotate(var(--hue)) drop-shadow(2px 2px 5px #5c5c4d) !important; } .friends-grid img{ outline:none !important;filter: opacity(90%) !important; width:80% !important; height:80% !important; border-radius: var(--curve) !important; filter:hue-rotate(var(--hue)) !important; } .inner img{ outline:none !important; filter: hue-rotate(var(--hue)) drop-shadow(1px 1px 5px #5c5c4d) !important; border-radius: var(--curve) !important; } nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;} nav ul{background:none !important;} nav img{filter: opacity(80%) !important;} nav ul a img, .mood a img{display:none !important;} .top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;} nav img.logo{filter: brightness(0) saturate(100%) invert(1%) sepia(70%) saturate(5000%) hue-rotate(173deg) brightness(110%) contrast(100%) !important;} .url-info{display:none !important;} td {background-color:rgba(0, 0, 0, 0) !important;border-radius: var(--curve) !important;} main{border-radius: var(--curve) !important;} main{background-color:rgba(210, 210, 215, 0.5); !important;} .friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img { border: 3px solid #666661 !important; outline: none !important; box-shadow: 10px 10px 10px -10px #5c5c4d; } .icon{border:none !important;} .mood{margin-bottom:10px !important;} .blurbs{margin-top:10px !important;} .friends{margin-top:-10px !important;} .profile-info{border-radius: var(--curve) !important;} .comments-table{border-radius: var(--curve) !important;border:none !important;} .table-section{padding-bottom:7px !important;} #comments{margin-top:15px !important;padding-bottom:15px !important} .details p:last-child{color:var(--links) !important; filter: brightness(95%); } .contact, .f-row, .f-col{padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;} .contact{padding-left:2px !important;} .f-row{margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;} .f-col a{margin-left:-2px !important;padding-left:-2px !important;} .contact{padding-bottom:12px !important;} .search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 0.2) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;} button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(0, 0, 0, 0.2) !important;color:var(--headers) !important;} code{ word-break: break-all !important;} .w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .w-40 .table-section:last-child .heading::after{ content: var(--mylinks); font-family: var(--font-family) !important; text-shadow: 2px 2px 5px #5c5c4d !important; color: var(--headers) !important;font-weight: bold !important;} .w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .w-40 .table-section:nth-last-child(2) .heading::after{ content: var(--mytopics); font-family: var(--font-family) !important; text-shadow: 2px 2px 5px #5c5c4d !important; color: var(--headers) !important; font-weight: bold !important; } .w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .w-40 .contact .heading::after{ content: var(--myactions); font-family: var(--font-family) !important; text-shadow: 2px 2px 5px #5c5c4d !important; color: var(--headers) !important;font-weight: bold !important;} .blurbs .heading{display:none !important;} .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 5px #5c5c4d !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); } /*Meh's bit is over! On to more fun stuff!*/ </style> <style> /*Custom scrollbar ahoy! this only works in certain browsers*/ /*this includes every desktop browser you probably care about*/ /*but not mobile :(*/ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #e1e3e2; border-radius: 0px; width: 15px; border: 20px black; box-shadow: inset 0 0 10px #07454a; } ::-webkit-scrollbar-thumb { background: #273d31; border-radius: 0px; box-shadow: inset 0 0 10px #122119; } ::-webkit-scrollbar-thumb:hover { background: #5a786a; box-shadow: inset 0 0 10px #3c5c4d; } </style> <style> .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } /*this adds custom gifs to the button box!*/ /*gif sources: https://blog.spacehey.com/entry?id=779128*/ .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* Add to Friends */ content: url('https://media.discordapp.net/attachments/903364339464044575/1086801056899530813/4C1FE9CA-80DF-47DE-B31F-4C982A2D7A8B.gif') } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: url('https://media.discordapp.net/attachments/903364339464044575/1092148818520317992/DBD3535E-BA27-42F0-91AE-4D48461DA72D.gif') } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: url('https://media.discordapp.net/attachments/903364339464044575/1088826085803839622/33A27BBC-59BA-4CC8-AAED-5226CD156DE9.gif') } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward to Friend */ content: url('https://media.discordapp.net/attachments/903364339464044575/1088979309697441973/IMG_9948.gif') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* Instant Message */ content: url('https://media.discordapp.net/attachments/903364339464044575/1088979844806742026/6A4734E6-2FEF-40C6-A696-3C5A9F4C5D73.gif') } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* Block User */ content: url('https://media.discordapp.net/attachments/903364339464044575/1089603289760403610/50FBA659-CC68-47DF-8054-8A1EF9A6757A.gif') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* Add to Group */ content: url('https://media.discordapp.net/attachments/903364339464044575/1086800893111963658/FEC06442-B2A7-4B0D-861A-6418784690F0.gif') } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: url('https://media.discordapp.net/attachments/903364339464044575/1088985702496215100/CD7D3BA1-8CC8-48C3-83C9-3C47124E654A.gif') } /*this next bit adds the rain sound. You can swap it by changing the youtube link*/ /*be sure to grab the embed link. it's a little tricky...*/ </style> <iframe width="0" height="0" src="https://www.youtube.com/embed/eTeD8DAta4c//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"> </iframe>

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.