GOAT's profile picture

Published by

published

Category: Layouts

View Blog View Profile

community build-a-blog-3: spook-o-blog

HIIIII

THIS IS A sPoOkY COMMUNITY BLOG LAYOUT THINGY WHERE WE ALL GET sCaRy aF AND cAsT dArK sPelLs ON THE OVERALL AESTHETIC...THEN THE cReEpy gHoULiSh SUGGESTIONS ARE ADDED IN BY ME AND WE ALL HAVE AN eViL cAcKLe muHaHaHa

~ GOAT XOXO

// all yr spooky suggestions will go here as code for you to use! //

<style>
main::before {
  content: "special fangz to: kaylvang, furby, xxNOT4live, -fritz, frenzi, real_life_blooper, LEXIII_is_me, xX_LAWLIGHTLOVER_Xx, squinky, NesoXIII, Corpse-princess2.0, Def3ct, Hazel && Spencer - tysm for being part of this lovely af frenrewin layout! <333";
  background: black;
  color: yellow;
  padding: 10px;
  margin-top: 10px;
  display: block;
  margin-bottom: 10px;
  border: 2px solid crimson;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

@media (min-width: 769px) {
  .row.article.blog-entry .edit-info .profile-pic img {
    max-width: 100%;
    content: url("https://i.pinimg.com/736x/d3/62/bb/d362bb7499486e25c3403b1b24d2b8e3.jpg");
    border-color: #39FF14;
    border-style: groove;
    border-width: 5px;
  }
}

.blog-entry .title, h3, .blog-entry .comments .heading h4 {
  background: black;
  color:yellow !important;
  width: fit-content;
  padding: 5px;
  border: 1px solid aliceblue;
  box-shadow: 2px 2px black; }

#bg-image {
display:none !important; }

* {
  cursor: url('https://cdn.cursors-4u.net/previews/witch-culdron-560f117f-32.webp') 32 32, auto !important;
}

main {
  background: url(https://i.pinimg.com/originals/07/50/dc/0750dc264a0f9e301047da1783c6f3f4.gif) !important;
  background-size: 300px !important;
  background-color: #00ec5c5c !important;
  background-position-x: -40px !important;
}

html:after {
  animation: grain 20s steps(10) infinite;
   background-image: url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExaGY4cG1lZzRsdjV2d2tkcHF2b2M2dmRkdDV3b240d2trbTl3d2l6YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/Rv0CKi1Gw1CUR2QzDU/giphy.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.3;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}

@keyframes grain 
  70% { transform:translate(0%, 15%) }

body::before {
  position: fixed;
  z-index: 9999;
  top: 0px;
  content: url(https://i.postimg.cc/76zpr6Fh/cornerspiderweb.png);
  margin-bottom: 30px;
  margin-left: 30px;
  left: -30px;
  pointer-events: none;
}

body::after {
  position: fixed;
  z-index: 9999;
  bottom: 10px;
  content: url(https://i.pinimg.com/originals/1b/1b/b9/1b1bb99f2369cc7309f9856a4bbe5677.gif);
  margin-bottom: 30px;
  margin-left: 30px;
  display: block;
  float: right !important;
  right: 10px;
  pointer-events: none;
}

body {
background: url(https://i.postimg.cc/B68rDzM1/spooky.jpg) !important; }

p, b, a, h1, h2 {
  color: red !important; }

p {
  background: black;
  width: fit-content;
  padding: 3px;
  font-weight: bold;
}

.col.right {
  background: url(https://i.postimg.cc/3RsNbVkF/webz.jpg);
}

.myspace-header .top-nav {
background: url(https://i.ibb.co/tTMyb7rF/halloween.jpg);
background-size:contain; }

.comments-table td:first-child img:not(.icon) {
content: url(https://media.tenor.com/5Rzrpiw93NAAAAAM/spooky-season-skeleton-dance.gif) !important; }

.comments-table td {
  background: url(https://i.postimg.cc/Ss6bkvZ8/deth.jpg) !important;
  background-size: 300px !important; 
  background-position: -50px !important; }

.blog-entry .kudos-container {
  position: relative;
  margin: 24px 0;
  padding: 18px;
  background:
    radial-gradient(ellipse at bottom, #29441288, transparent 75%),
    #090c08;
  border: 2px solid #83b842;
  border-bottom: 4px solid #8d1923;
  border-radius: 12px 12px 20px 20px;
  color: #e7f0d8;
  font-family: Georgia, serif;
  animation: haunted-kudos 5s ease-in-out infinite alternate;
}

.blog-entry .kudos-container::after {
  content: "🕸";
  position: absolute;
  top: -16px;
  right: 12px;
  font-size: 32px;
  pointer-events: none;
}

.blog-entry .kudos-display {
  margin: 0;
}

.blog-entry .kudos-label {
  color: #baff72;
  font-weight: bold;
  text-shadow: 0 0 8px #78ff4466;
}

.blog-entry .kudos-label::before {
  content: "🎃 ";
}

.blog-entry .kudos-count {
  color: #ff843e;
  font-size: 24px;
  text-shadow: 0 0 12px #ff651955;
}

.blog-entry .kudos-star {
  color: #baff72;
  text-shadow: 0 0 7px #90ff55;
}

.blog-entry .user-kudos-info,
.blog-entry .kudos-container .login-prompt {
  color: #c4d3b4;
  white-space: normal !important;
}

.blog-entry .kudos-container > div:last-child {
  flex-wrap: wrap;
  max-width: 100%;
}

.blog-entry .kudos-btn {
  padding: 8px 14px;
  background: #18250f;
  border: 1px solid #92c957;
  border-radius: 5px;
  color: #d5ffac;
  font: bold 13px Georgia, serif;
  transition: background .2s, box-shadow .2s;
}

.blog-entry .kudos-btn:hover:not(:disabled) {
  background: #344d19;
  box-shadow: 0 0 14px #8aff4855;
}

.blog-entry .kudos-btn.remove-btn {
  background: #2c1013;
  border-color: #ad424b;
  color: #ffd0d4;
}

.blog-entry .kudos-btn:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: 3px;
}

.blog-entry .kudos-btn:disabled {
  background: #20251c;
  border-color: #59634e;
  color: #909b84;
  cursor: not-allowed;
}

@keyframes haunted-kudos {
  from {
    box-shadow: 0 0 8px #80ff3322, inset 0 -5px 14px #690b1722;
  }
  to {
    box-shadow: 0 0 22px #80ff3344, inset 0 -5px 20px #690b1755;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-entry .kudos-container {
    animation: none;
  } }

html::before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://images.steamusercontent.com/ugc/1812137801290095041/FA2FE52FAF2DB8EF257E3B0C3C5CE1506ED99A7A/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

.cb-like-icon {
  font-size: 0px !important; }

.cb-like-icon::before {
  font-size: 16px;
  content: "🎃";
}
</style>

what this is

okay so whoever wants in on this - we're going to make a friendrewind blog layout. we're going to do that and we're going to do it together, as a lovely lil team.  :vampire:

how it works

simply drop a comment with suggestions of what part of the blog you want to change the aesthetics of (be as detailed as possible pls!) and i will endeavor to implement it as best as i can :wizard:

the end result

probably an absolutely chaotic mess but in the best possible way - it will definitely be fun and it'll also be a chance for some of you to get some understanding on how to create your own css layouts in future :mummy:

Kudos: 74

Comments

Displaying 59 of 59 comments ( View all | Add Comment )

pinkprincess

pinkprincess's profile picture

(edited) Report

Im pretty late I know but this is so stinkin cute!!:meow:

𝐒𝐩𝐞𝐧𝐜𝐞𝐫

𝐒𝐩𝐞𝐧𝐜𝐞𝐫's profile picture

Report

Saved the best name for last I see 😉

JKJK thank you for the credits even though I only asked for the like button to be edited lol this turned out super cute!

GOAT

GOAT's profile picture

Report

thank you so much to everyone who took part!  sadly, this thing is over now and i won't add in any more suggestions but the code to use on your own blogs is updated, and i've also included a credit box right above the <main> html tag - feel free to check that out!  anyway happy halloween everypony and pls enjoy your lovely community made spooky blog layout!  :DDD

𝐒𝐩𝐞𝐧𝐜𝐞𝐫

𝐒𝐩𝐞𝐧𝐜𝐞𝐫's profile picture

(edited) Report

Okay, I can't even lie, this is a cute blog profile layout! Love it!!!

Can we have the like button something spooky?



how about jack o lantern likes? 🎃

by GOAT; ; Report

Yesssss I love it!!!

by 𝐒𝐩𝐞𝐧𝐜𝐞𝐫; ; Report

Hazel

Hazel's profile picture

Report

Can it be possible to add a loading screen??

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url('https://images.steamusercontent.com/ugc/1812137801290095041/FA2FE52FAF2DB8EF257E3B0C3C5CE1506ED99A7A/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>



nvm i managed to squeeze ur spooky skull in there!

by GOAT; ; Report

YEEAAHH THANK YOU

by Hazel; ; Report

Def3ct

Def3ct's profile picture

Report 

<br />.blog-entry .kudos-container {
  position: relative;
  margin: 24px 0;
  padding: 18px;
  background:
    radial-gradient(ellipse at bottom, #29441288, transparent 75%),
    #090c08;
  border: 2px solid #83b842;
  border-bottom: 4px solid #8d1923;
  border-radius: 12px 12px 20px 20px;
  color: #e7f0d8;
  font-family: Georgia, serif;
  animation: haunted-kudos 5s ease-in-out infinite alternate;
}

.blog-entry .kudos-container::after {
  content: "🕸";
  position: absolute;
  top: -16px;
  right: 12px;
  font-size: 32px;
  pointer-events: none;
}

.blog-entry .kudos-display {
  margin: 0;
}

.blog-entry .kudos-label {
  color: #baff72;
  font-weight: bold;
  text-shadow: 0 0 8px #78ff4466;
}

.blog-entry .kudos-label::before {
  content: "🎃 ";
}

.blog-entry .kudos-count {
  color: #ff843e;
  font-size: 24px;
  text-shadow: 0 0 12px #ff651955;
}

.blog-entry .kudos-star {
  color: #baff72;
  text-shadow: 0 0 7px #90ff55;
}

.blog-entry .user-kudos-info,
.blog-entry .kudos-container .login-prompt {
  color: #c4d3b4;
  white-space: normal !important;
}

.blog-entry .kudos-container > div:last-child {
  flex-wrap: wrap;
  max-width: 100%;
}

.blog-entry .kudos-btn {
  padding: 8px 14px;
  background: #18250f;
  border: 1px solid #92c957;
  border-radius: 5px;
  color: #d5ffac;
  font: bold 13px Georgia, serif;
  transition: background .2s, box-shadow .2s;
}

.blog-entry .kudos-btn:hover:not(:disabled) {
  background: #344d19;
  box-shadow: 0 0 14px #8aff4855;
}

.blog-entry .kudos-btn.remove-btn {
  background: #2c1013;
  border-color: #ad424b;
  color: #ffd0d4;
}

.blog-entry .kudos-btn:focus-visible {
  outline: 2px solid #fff0a8;
  outline-offset: 3px;
}

.blog-entry .kudos-btn:disabled {
  background: #20251c;
  border-color: #59634e;
  color: #909b84;
  cursor: not-allowed;
}

@keyframes haunted-kudos {
  from {
    box-shadow: 0 0 8px #80ff3322, inset 0 -5px 14px #690b1722;
  }
  to {
    box-shadow: 0 0 22px #80ff3344, inset 0 -5px 20px #690b1755;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-entry .kudos-container {
    animation: none;
  }
}<br /><br />


maybe a spooky kudos bar? 

by Def3ct; ; Report

spookin af <33

by GOAT; ; Report

Corpse-princess2.0

Corpse-princess2.0's profile picture

Report

Can we add something that changes all out pictures in the comments to something silly n spooky >.< ??



i gotchu fam :alienfinger:

by GOAT; ; Report

HEHEHEHEH -  ITS SO ADORABLE X33

by Corpse-princess2.0; ; Report

and spooky! :DDD

by GOAT; ; Report

GOAT

GOAT's profile picture

Report

many thanks to everyone who has participated so far!  i'll be wrapping things up on the 29th, and this blog will have a header crediting everyone who took part! :hearts:



I CANT WAUT TO USE THIS FOR MY NEXT BLOG. :meow:

by kaylvang 𓍢ִ໋❀; ; Report

there's still one more week of spookin this thing up tho!  :star:

by GOAT; ; Report

NesoXIII

NesoXIII's profile picture

Report

Maybe candies falling on the page as an overlay? After all, halloween = candies too :banana:

If it's not scary enough maybe bats somewhere on the blog? (๑˘︶˘๑)✧



well the best falling candy thing with transparency i could find was gummy worms...so that's what we're going with!  the bat is on the way too! 

by GOAT; ; Report

and there are the bats!

by GOAT; ; Report

Omg I love gummy worms (the sour ones are the best)! Thankssss <3

by NesoXIII; ; Report

squinky

squinky's profile picture

Report

can we make this da cursor?: https://www.cursors-4u.com/cursor/hol58



we certainly can! :witch:

by GOAT; ; Report

Stephen (he/him)

Stephen (he/him)'s profile picture

Report

Can you add a spiderweb at the top of the screen and a black cat on the bottom?? :3



ofc, but hold tight - gotta go do the work thing!  i'll be on this later today! :star:

by GOAT; ; Report

spiderweb is go - i''ll add the cat in now :kitty:

by GOAT; ; Report

and there's the spooky black cat <3

by GOAT; ; Report

𝐋𝐄𝐗𝐈𝐈𝐈_𝐢𝐬 𝐦𝐞<𝟑

𝐋𝐄𝐗𝐈𝐈𝐈_𝐢𝐬 𝐦𝐞<𝟑's profile picture

Report

𝐇𝐨𝐰 𝐝𝐨 𝐈 𝐜𝐡𝐚𝐧𝐠𝐞 𝐢𝐭 😔



I think u just give them suggestions and they add them

by Stephen (he/him); ; Report

ya - the concept is the community of fw comes together, suggests things to add to the layout and i then add it in!  go wild...but also go SPOOKY!  :meow:

by GOAT; ; Report

real_life_blooper

real_life_blooper's profile picture

Report

EEEEK this is so rawrsome!!! i need 2 update my profile (ToT)



but is there anything you wanna add in to THIS layout?  anything weird n spoOoOky??? :vampire:

by GOAT; ; Report

Fren🌟Zi

Fren🌟Zi's profile picture

(edited) Report

I’m not good as coding but maybe make this the blog row background?


It’s ok if not I can think of something else



tada :3

by GOAT; ; Report

Woa cool!

by Fren🌟Zi; ; Report

:ohyeah:

by GOAT; ; Report

i think bats are vying for control of the background now! XDD

by GOAT; ; Report

-fritz-

-fritz-'s profile picture

Report

this will change your pfp to a spoooooky demon

@media (min-width: 769px) {
  .row.article.blog-entry .edit-info .profile-pic img {
    max-width: 100%;
    content: url("https://i.pinimg.com/736x/d3/62/bb/d362bb7499486e25c3403b1b24d2b8e3.jpg");
    border-color: #39FF14;
    border-style: groove;
    border-width: 5px;
  }
}


you got it! :vampire:

by GOAT; ; Report

XxNOT4live

XxNOT4live's profile picture

Report

Make the text red.



what ALL of it???? :o

by GOAT; ; Report

there u go xoxo

by GOAT; ; Report 

p {
  background: black;
  width: fit-content;
  padding: 3px;
  font-weight: bold;
}

also adding this in, so the comments are readable :3

by GOAT; (edited); Report

furby

furby's profile picture

Report

can we get this image as the comment section bg? 


ofc tho i'll have to edit it and create some opacity, so the comments themseves will legible so uhhh

brb <33

by GOAT; ; Report

how's that for ya :gasp:

by GOAT; ; Report

og grim reaper is up without opacity now xoxo

by GOAT; ; Report

THANK U!

by furby; ; Report

no - thank YOU!  this lil project would be nothing without u fab ppl gettin involved :daydream:

by GOAT; ; Report

kaylvang 𓍢ִ໋❀

kaylvang 𓍢ִ໋❀'s profile picture

Report

SPOOOKY TIME

I LOVE THIS IDEA.:wizard:


Can you make this the blog header?




dya mean like that with the nav header :meow:

by GOAT; (edited); Report

or did ya want it like below the nav bar but above the blog content :o

by GOAT; ; Report

Dealers choice!!!:witch:

by kaylvang 𓍢ִ໋❀; ; Report

then it'll be the nav header :p

hope ya like it! :wizard:

by GOAT; ; Report

TY Goat xoxo:hearts:

by kaylvang 𓍢ִ໋❀; ; Report

np! :star:

by GOAT; ; Report

GOAT

GOAT's profile picture

Report

i'll start things off for ya ofc with a spooky bg xoxo