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 39 comments ( View all | Add Comment )

Safi Starie	1764583014 using Report Comment
EDGY GIRL	1753328508 Using Report Comment
Ari-Casino	1749550166 USING!!!!!!!111 Report Comment
Foureyes	1744402113 using!! Report Comment
⊹˚₊‧꒰ა𓆩✧𓆪໒꒱ ‧₊˚⊹	1743043113 usingmail.com Report Comment
mintsouhp	1741724591 usiNG Report Comment
VULPES	1739583101 usingr Report Comment
CHEESEBURGER	1738531432 USING!! Report Comment
★†_Ani_Magizar_†★	1738374421 USING!! Report Comment
Torture	1736267867 using Report Comment
Danny	1736266073 USING !!! :D Report Comment
DoubleABees	1733282678 using!! Report Comment
Sonya!!	1732040200 using Report Comment
DesolateUnity	1727462226 Using! Report Comment
SEWERMUTILATE	1725121836 Usinggg Report Comment
MrKha	1724004926 using and i love it!! :DDD Report Comment
Filosofem	1723371447 using Report Comment
Feur	1722709371 Using!! ^_^ Report Comment
JEREMY!!	1721629040 using! Report Comment
꒰🍓꒱﹒Sam ﹒⟢	1719200286 I LOVE ITTT Report Comment