Modern Newgrounds Layout

Tags: newgrounds; web; internet

Description:

DISCLAIMER: Works better on PC! The modern look of Newgrounds ! That's it :) ! LOGS: - Changed the color of the headers from purple to gray - Now the Spacehey color has no background, meaning changing colors is easier! Thanks to all of you who appreciated my work! I honestly don't think I'll still be active on this website as I used to, so I would be really happy if you made and published your own modifications. No need to credit me. For any issues feel free to write me a message here (I sometimes still log in here just to listen my own playlist LOL) and I'll try the best I can do. Before saying a sort of "goodbye" I may took some time just to figure out how I can make the layout work on mobile (not guaranteeing tho).

Preview:

click on the image for a larger preview

Code:

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

<style>

:root{
  --black: #0f0b0c;
  --orange: #fda238;
  --nav-color: #202427;
  --gray: #221e1f;
  --outline: #171314;
  --separation: #1e1e20;
  --light-gray: #22252a;
  --search: #4d5052;
  --heading: linear-gradient(to bottom, #4E575E 0%,#34393D 48%,#282B30 53%,#202427 100%);
  --edit: linear-gradient(to bottom, #fda238 0%,#fd3841 100%);
  --footer: #181a1d;
}

/*THIS IS FOR main AND the main structure*/
div.container{
  width: 850px;
}

main{
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(190,190,190,0) 95%);
}

div.row.profile{
  background-color: var(--light-gray);
  border: 1px;
  border-style: solid;
  border-color: black;
  border-radius: 6px;
}

body{
  background: url(https://i.ibb.co/6Yts2wT/newgrounds-simplicity1-2-2.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position-y: -200px;
}

/*ALL ELEMENTS ON THE TOP*/

nav{
  border: 2px;
  outline: 2px;
  outline-color: black;
}

img.logo.logo-fallback{
  visibility: hidden;
}

.search-wrapper #q{
  background-color: var(--search);
  border: 1px;
  border-color: var(--search);
  border-style: solid;
  border-radius: 10px;
}

nav div.top{
  background-color: var(--nav-color);
  height: 60px;
}

nav .links{
  background-color: black;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

nav .links a{
  color: white !important;
}

.profile-pic .pfp-fallback{
  width: 120px !important;
  height: 120px !important;
  border: 3px;
  border-style: solid;
  border-color: var(--orange);
  position: relative;
  top: 10px;
  left: 3px;
}

h1, p, h4, small{
  color: white !important;
  font-family: Arial,Helvetica,sans-serif;
}

p{
  font-size: 14px;
}

a, li, h2, h3{
  color: var(--orange) !important;
}

div.heading{
  background: var(--heading) !important;
  border: 2px;
  border-bottom-color: black;
  border-style: hidden hidden solid hidden;
}

.heading h4{
  font-family: "headerfont","Pakenham","Arial Narrow",Tahoma,Verdana,Geneva,Arial,Helvetica,sans-serif !important;
  font-size: 20.1px;
  font-weight: normal;
}

p.online{
  color: #52a52a !important;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .blurbs, #comments, .friends, .general-about, .blog-preview{
  border: 2px;
  border-radius: 6px;
  outline: 2px;
  outline-style: solid;
  outline-color: black;
  box-shadow: 2px 2px 4px 0px black;
}

.inner:not(.profile-info .inner), .blog-preview{
  border-style: solid;
  border-color: var(--outline);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.col.right .inner .section{
  padding: 5px;
}


/*RIGHT COLUMN*/
div.col.right{
  width: 512px;
}

div.blog-preview{
  padding: 5px;
}

.blog-preview

.blurbs .inner div:first-child{
  border:2px;
  border-style: none none solid none;
  border-color: var(--separation);
}

.blurbs, #comments, .friends, .profile-info, .blog-preview{                                                
  background-color: var(--black);
}

.friends{
  margin-bottom: 18px;
}


/*LEFT COLUMN*/

.general-about{
  padding: 3px;
  border-style: solid solid solid solid;
  height: 165px;
  border-style: solid;
  border-color: var(--outline);
  border-radius: 6px;
}

.contact .icon{
  visibility: collapse;
  margin-left: -20px;
}

.details-table td:first-child{
  background-color: var(--gray);
}

.details-table td{
  background-color: var(--black);
}

.contact, .url-info, .col.w-40.left .table-section, .general-about{
  background-color: var(--black);
}

/*BOTTOM OF THE PAGE*/
.comments-table td:first-child{
  background-color: var(--gray);
  width: 115px;
}

.comments-table{
  border-collapse: separate;
  border-spacing: 0 10px;
}

.comments-table td:not(td:first-child){
  background-color: var(--black);
  padding: 10px;
}

.comments-table td, .comments-table{
  border-style: hidden;
}

div.comment-replies, div.comment-reply:not(.comment-replies .comment-reply:first-child){
  border:2px;
  border-style: solid none none none;
  border-color: var(--separation);
}

.comments-table td:first-child p{
  color: var(--orange) !important;
}

footer{
  background-color: var(--footer);
  border: 1px;
  border-style: solid;
  border-radius: 6px;
}

/*MORE COMPLEX STUFF*/

.friends .heading a {
  background-color: rgba(0,0,0,0.5);;
  font-weight: bold;
  font-size: 9px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 20px;
  border-radius: 3px;
}

.friends .heading a:hover{
  text-decoration-line: none;
  background-color: var(--orange);
  color: black !important;
}

.comments-table .icon{
  visibility: collapse;
}

p.report::before{
  content: url(https://i.ibb.co/gJc612j/Immagine-2023-08-09-145819-removebg-preview2.png);
  position: absolute;
}

nav .left a{
  height: 30px;
  display:inline-block;
}

nav .left a::before{
  content: url(https://i.ibb.co/9gJP2fp/ng-title-nobg2.png);
  position:absolute;
  top: 14px
}

button:not(.center button){
  background: linear-gradient(to bottom, #595554 0%,#595554 35%,#353334 65%,#353334 100%);
  color: white;
  text-align: center;
  height: 19px;
  cursor: pointer;
  font-size: 11px;
  border-top-color: rgba(255,255,255,0.5);
  border-left-color: rgba(255,255,255,0.5);
  border-radius: 3px;
  border: 1px;
}

button:hover{
  background: var(--orange);
  color: black;
}

.center button {
  background: var(--search);
  border: 1px;
  border-style: solid;
  border-color: var(--search);
  border-radius: 10px;
  height: 19px;
}

/* THE EDIT BUTTON */
.profile-info{
  border: hidden;
  background-color: #0f0b0c00;
 } 

.profile-info a {
  background: var(--edit);
  color: white !important;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 30px;
  border-radius: 6px;
  box-shadow: 2px 2px 4px 0px black;
}



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

DesolateUnity	1727462226 Using! Report Comment
SEWERMUTILATE	1725121836 Usinggg Report Comment
MrKha	1724004926 using and i love it!! :DDD Report Comment
bite the kurb	1723371447 using Report Comment
Feur	1722709371 Using!! ^_^ Report Comment
b4sil_br41nr0t	1721716948 using!! <3 Report Comment
JEREMY!!	1721629040 using! Report Comment
ayefes	1720809371 using Report Comment
Clownfrenzy!!	1719832541 USING For sure!! Report Comment
꒰🍓꒱﹒Saii ﹒⟢	1719200286 I LOVE ITTT Report Comment
leon	1717659782 using. this is cool Report Comment
eluyinct	1717257097 using Report Comment
Kaden	1715168196 SICKKK!! def using Report Comment
vixen	1711053925 this is amazing cuhhh def using it!!! Report Comment
will	1710453076 using!!!!!!!! Report Comment
Falcon15x	1701595552 This layout is incredible I'm kind of beyond words Report Comment
TXR!	1701142274 using for sure!! Report Comment
jasper_shootz	1699440307 using! Report Comment
AL13NB0Y	1699336850 Using Report Comment
𝔇𝔢𝔦	1698538009 usinggg ty Report Comment