mariobros406

Here's a video that explains exactly what's going on in more detail.

Here's the code:
/*
Scratch Dark (by andrewjcole)
Navbar changes (edited by GrannyCookies, by jTron)
*/

body {
background: rgba(0, 0, 0, 0.84);
}

*{background-color:transparent}
pagewrapper {
background-color:#333;
}
/* Scratch dark CSS */
/* links */
h1, h2, h3, h4 {
font-weight: 700;
line-height: 32px;
color: #fff;
}
.activity-stream .actor a {
color: #CEA230 !important;
}
.button {
background-image: -webkit-linear-gradient(top,#A5A5A5,#000000) !important;
border-width: 0px !important;
}
#comments .highlighted {
background-color: #5E5E5E !important;
}
#comments .more-replies {
border-top: 1px solid #424242;
margin-left: 60px;
border-bottom: 0;
cursor: pointer;
text-align: center;
margin-top: -45px;
height: 45px;
background: #424242;
position: relative;
box-shadow: 0 -25px 20px -10px #424242;
}
#comments .more-replies .pulldown {
color: #1aa0d8;
border: 1px solid #000000;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top: 0;
padding: 0 5px 2px;
height: 20px;
display: inline-block;
background: #8B8B8B;
top: -1px;
position: relative;
}
.box .box-content {
background: #424242;
border-top: 1px solid #e0e0e0;
position: relative;
}
ul#tabs a{
color: #000000 !important;
}
a.right {
color: #000000 !important;
}
a.right:hover {
color: #000000 !important;
}
p {
color: #fff !important;
}
.notification-feed ul.unread {
padding: 0px 5px;
border-radius: 5px;
background-color: #797979 !important;
}
div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active {
color: #000000 !important;
}
.button {
background-image: -webkit-linear-gradient(top,#99CD4E,#7EA840) !important;
border-width: 0px !important;
}
.button:hover {
background-image: -webkit-linear-gradient(top,#7EA840,#99CD4E) !important;
color: white !important;
}
span#owner {
color:black !important;
}
a#djangobbwrap {
color:black !important;
}
/* search */
#topnav form.search input {
border-radius: 5px !important;
background-color: gray !important;
}
/* no favorites, projects etc */
.empty-field {
background-color: #000000 !important;
border: 1px solid #000000 !important;
}
a {
color: #CEA230 !important;
text-decoration: none;
text-shadow: none;
}
/* footer */
#footer {
background-color: #000000 !important;
color: white;
opacity: 0.8;
}
.empty-field {
text-align: center;
background-color: #d9edf7;
border: 1px solid #bce8f1;
border-radius: 5px;
color: #9B9B9B !important;
}
div#footer a {
color: white !important;
font-weight: bold;
}
/* top nav */
div#pagewrapper #topnav {
background-color: #333333 !important;
}
div#pagewrapper #topnav a{
color: #000000 !important;
}
div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li {
border: none !important;
}
body {
color: #fff;
line-height: 1.5385em;
text-shadow: 0 1px #000000;
}
.box {
background:#494949 !important;
}
/* hover */
div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover {
background: #000000 !important;
}
div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover {
background: #000000 !important;
}
div#pagewrapper #topnav a {
color: #FFA039 !important;
}
/* sign in box */
/* arrow */
div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after {
border-bottom-color: #7EA840 !important;
}
/* box */
div#pagewrapper #topnav ul.account-nav .sign-in .popover {
background-color: #7EA840 !important;
border-color: #000000 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu {
background-color: #000000 !important;
}
div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider {
border-top: 2px solid #000000 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open {
background-color: #000000 !important;
}
/* video */
div#pagewrapper .homepage-banner .video {
border-radius: 10px !important;
background-color: #000000 !important;
}
div#pagewrapper li {
transition: all .5s !important;
}
#topnav form.search .glass {
background: url("http://www.dreamtemplate.com/dreamcodes/web_icons/gray-classic-search-icon.png") no-repeat 9px center;
width: 26px;
height: 23px;
position: absolute;
border: 0;
border-right: 1px solid #ccc;
padding-left: 0px;
padding-right: 0px;
opacity: .8;
border-radius: 0;
}
/* box tops */
div#pagewrapper .box {
background: #000000 !important;
border: 0.5px solid #7EA840 !important;
}
.box .box-content .inner {
padding: 5px 20px;
background-color: #424242 !important;
}
/* title */
div#pagewrapper .intro .title {
color: #000000 !important;
font-weight: bold !important;
}
/* show more replies */
#comments .more-replies .pulldown {
color: #000000 !important;

}
.djangobb th {
background-color: #000;
}

.tc2, .tc3, .tcmod, #postpreview, .forminfo, .blockmenu .box, #adstats dd {
background-color: #424242;
}

MathWizz

Change the background of #pagewrapper instead of body.

mariobros406

MathWizz wrote:

Change the background of #pagewrapper instead of body.
YES! THANKS!

MegaApuTurkUltra

I'll be interested in your theme when it's complete! Please share on the AT forums

mariobros406

MegaApuTurkUltra wrote:

I'll be interested in your theme when it's complete! Please share on the AT forums
Alright, I will