Dark Theme

Alright i just partly made a quick theme. I just got this addon and wanted to see what it was capable of. i've never even used RSS feeds before but I could get used to it. Alright so i checked out some of your guys themes and then i went over to a free css theme site and grabbed a bunch of codes off of theirs and they all sucked. But one of them in particular was okay. Now the themes i was testing out were just layouts because i didn't bother to upload any of the pictures that came with them. So I uploaded the backround and header of the one that seemed good and the backround looked sick but that header sucked. So i made my own header from scratch in photoshop and changed it up. It looks so nice i'de figured i would share it. Let me remind you theirs a lot of extra bs in the code that i havnt had a chance to go through and get rid of but it doesnt make a difference that it's there. all the extra code goes towards the layout for the free template. i only take credit for the header. feel free to re-edit and post any changed just credit my header if you use it. if not then it's all yours. if anyone wants to get rid of the useless stuff thats in it go ahead.
 
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Header by RUNARMY0f1
*/

body {
    margin: 0;
    padding: 0;
    background: #000000 url(http://i27.tinypic.com/fwr6vc.jpg) repeat top left;
    text-align: justify;
    font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #7F7772;
}

h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-weight: normal;
    color: #549900;
}

h1 { font-size: 44px; }

h2 { font-size: 18px; }

h3 { }

p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
}

ul, ol { }

blockquote { }

a { color: #F71476; }

a:hover { text-decoration: none; }

a img {
    border: none;
}

img.left {
    float: left;
    margin: 7px 30px 0 0;
}

img.right {
    float: right;
    margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
    float: left;
    line-height: normal;
}

.list1 li img {
    margin: 0 30px 30px 0;
}

.list1 li.alt img {
    margin-right: 0;
}

#wrapper {
}

/* Header */

#header-wrapper {
}

#header {
    width: 960px;
    height: 65px;
    margin: 0 auto;
    background: url(http://i31.tinypic.com/hs1ims.jpg) no-repeat left top;
}

/* Menu */

#menu {
    float: left;
    width: 650px;
    height: 50px;
    background: url(images/img02.jpg) no-repeat left top;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 5px;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: block;
    float: left;
}

#menu a {
    display: block;
    float: left;
    height: 32px;
    margin-right: 3px;
    padding: 18px 30px 0px 30px;
    background: url(images/img07.gif) no-repeat left top;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
    height: 50px;
    color: #000000;
}

#menu .first {
    background: none;
}
/* Search */

#search {
    float: right;
    width: 310px;
    height: 50px;
    background: url(images/img03.jpg) no-repeat left top;
}

#search form {
    float: right;
    margin: 0;
    padding: 14px 30px 0 0;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
}

#search-text {
    width: 200px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
}

#search-submit {
    height: 21px;
    margin-left: 10px;
    padding: 0px 5px;
    background: #000000;
    color: #FFFFFF;
}

/* Page */

#page {
    width: 920px;
    margin: 0 auto;
    padding: 40px 20px 0px 20px;
    background: #000000;
}

/** LOGO */

#logo {
    width: 960px;
    height: 120px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-align: center;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
}

#logo p {
    text-transform: lowercase;
    font-size: 13px;
    color: #757575;
}

#logo h1 {
    padding-top: 10px;
    font-size: 48px;
}

#logo a {
    text-decoration: none;
    color: #757575;
}

#logo h1 a {
    text-decoration: none;
    color: #FFFFFF;
}

#banner {
    padding-bottom: 20px;
}

/* Content */

#content {
    float: left;
    width: 580px;
}

/* Post */

.post {
    background: url(images/img08.gif) repeat-x left bottom;
    margin-bottom: 45px;
}

.post .title {
    height: 30px;
    color: #FFFFFF;
}

.post .title a {
    text-decoration: none;
    text-transform: capitalize;
    font-size: 30px;
    color: #FFFFFF;
}

.post .date {
}

.post .meta {
    margin-left: 2px;
    padding: 2px 30px 2px 16px;
    background: url(images/img10.gif) no-repeat left 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
}

.post .meta span {
    display: block;
    margin-top: -10px;
}

.post .meta a { }

.post .entry {
    padding: 10px 0;
}

.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
    padding-left: 17px;
}

/* Sidebar */

#sidebar {
    float: right;
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
}

#sidebar li ul {
    margin: 0px 14px;
}

#sidebar li li {
    margin: 0;
    padding: 12px 0px;
    background: url(images/img05.gif) repeat-x left bottom;
}

#sidebar li li a {
    padding: 0px 0px 0px 20px;
    background: url(images/img06.gif) no-repeat left 2px;
    font-weight: normal;
    color: #B3B2B2;
}

#sidebar li li a:hover {
    color: #FFFFFF;
}

#sidebar p {
    margin: 0;
    padding: 0px 14px;
}

#sidebar h2 {
    height: 30px;
    margin: 0 0 10px 0px;
    padding: 6px 0 2px 14px;
    background: url(images/img04.jpg) no-repeat left top;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
}

#sidebar p {
    line-height: 200%;
}

#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: bold;
}

/* Calendar */

#calendar {
}

#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
}

#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
}

#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
}

#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
}

#calendar tfoot #prev {
    border-top: 1px solid #24130F;
}

#calendar .pad {
    border-bottom: 1px solid #24130F;
}

#calendar #today {
    background: #24130F;
}

/* Footer */

#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
}

#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
}

#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
}

#footer a {
    color: #E5FFC4;
}
 

Re: Dark Theme

This is great, thanks! I was looking for a fix for the glaring white.

Re: Dark Theme

To the guy who wanted to change the 'Glaring white'.
I changed the backgroung of the article section to make it black. Looks pretty sweet
Code is below
"With respect to Runarmyof1 for creating the CSS theme it's really cool. Especially love the header. All iv done is just found a background and added into this theme, I thought it looked great and so implemented it in."
 
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Header by RUNARMY0f1
*/

body {
    margin: 0;
    padding: 0;
    background: #202020;
    text-align: justify;
    font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #7F7772;
}

h1, h2, h3 {
    margin: 0;
    text-transform: uppercase;
    font-weight: normal;
    color: #549900;
}

h1 { font-size: 44px; }

h2 { font-size: 18px; }

h3 { }

p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
}

ul, ol { }

blockquote { }

a { color: #F71476; }

a:hover { text-decoration: none; }

a img {
    border: none;
}

img.left {
    float: left;
    margin: 7px 30px 0 0;
}

img.right {
    float: right;
    margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
    float: left;
    line-height: normal;
}

.list1 li img {
    margin: 0 30px 30px 0;
}

.list1 li.alt img {
    margin-right: 0;
}

#wrapper {
}

/* Header */

#header-wrapper {
}

#header {
    width: 960px;
    height: 65px;
    margin: 0 auto;
    background: url(http://i31.tinypic.com/hs1ims.jpg) no-repeat left top;
}

/* ---------------------------  Article  ------------------------ */

/* Article container can have "starred", "read", and "collapsed"
   attributes. The first two are self-explanatory while "collapsed"
   means that the article's content is folded (headlines view) */
.article-container {
    background-color: #606060;
    border: 2px #606060 solid;
    overflow: visible;   /* This is for the the expand/collapse dropmarker which is
                            taken outside the box using negative margins */
    position: relative;
    margin: 10px auto;
    min-width: -moz-min-content;
    max-width: 70em;
}

/* Menu */

#menu {
    float: left;
    width: 650px;
    height: 50px;
    background: url(images/img02.jpg) no-repeat left top;
}

#menu ul {
    margin: 0;
    padding: 0px 0px 0px 5px;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: block;
    float: left;
}

#menu a {
    display: block;
    float: left;
    height: 32px;
    margin-right: 3px;
    padding: 18px 30px 0px 30px;
    background: url(images/img07.gif) no-repeat left top;
    text-decoration: none;
    text-transform: capitalize;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
    height: 50px;
    color: #000000;
}

#menu .first {
    background: none;
}
/* Search */

#search {
    float: right;
    width: 310px;
    height: 50px;
    background: url(images/img03.jpg) no-repeat left top;
}

#search form {
    float: right;
    margin: 0;
    padding: 14px 30px 0 0;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search input {
    float: left;
    font: 12px Georgia, "Times New Roman", Times, serif;
    border: none;
}

#search-text {
    width: 200px;
    height: 18px;
    padding: 3px 0 0 5px;
    border: 1px solid #333333;
    background: #ECF9E4;
    color: #000000;
}

#search-submit {
    height: 21px;
    margin-left: 10px;
    padding: 0px 5px;
    background: #000000;
    color: #FFFFFF;
}

/* Page */

#page {
    width: 920px;
    margin: 0 auto;
    padding: 40px 20px 0px 20px;
    background: #000000;
}

/** LOGO */

#logo {
    width: 960px;
    height: 120px;
    margin: 0 auto;
}

#logo h1, #logo p {
    margin: 0px;
    line-height: normal;
    text-align: center;
    text-transform: lowercase;
    font-weight: normal;
    color: #FFFFFF;
}

#logo p {
    text-transform: lowercase;
    font-size: 13px;
    color: #757575;
}

#logo h1 {
    padding-top: 10px;
    font-size: 48px;
}

#logo a {
    text-decoration: none;
    color: #757575;
}

#logo h1 a {
    text-decoration: none;
    color: #FFFFFF;
}

#banner {
    padding-bottom: 20px;
}

/* Content */

#content {
    float: left;
    width: 580px;
}

/* Post */

.post {
    background: url(images/img08.gif) repeat-x left bottom;
    margin-bottom: 45px;
}

.post .title {
    height: 30px;
    color: #FFFFFF;
}

.post .title a {
    text-decoration: none;
    text-transform: capitalize;
    font-size: 30px;
    color: #FFFFFF;
}

.post .date {
}

.post .meta {
    margin-left: 2px;
    padding: 2px 30px 2px 16px;
    background: url(images/img10.gif) no-repeat left 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    color: #66665E;
}

.post .meta span {
    display: block;
    margin-top: -10px;
}

.post .meta a { }

.post .entry {
    padding: 10px 0;
}

.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
    padding-left: 17px;
}

/* Sidebar */

#sidebar {
    float: right;
    width: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 10px 0px;
}

#sidebar li ul {
    margin: 0px 14px;
}

#sidebar li li {
    margin: 0;
    padding: 12px 0px;
    background: url(images/img05.gif) repeat-x left bottom;
}

#sidebar li li a {
    padding: 0px 0px 0px 20px;
    background: url(images/img06.gif) no-repeat left 2px;
    font-weight: normal;
    color: #B3B2B2;
}

#sidebar li li a:hover {
    color: #FFFFFF;
}

#sidebar p {
    margin: 0;
    padding: 0px 14px;
}

#sidebar h2 {
    height: 30px;
    margin: 0 0 10px 0px;
    padding: 6px 0 2px 14px;
    background: url(images/img04.jpg) no-repeat left top;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
}

#sidebar p {
    line-height: 200%;
}

#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: bold;
}

/* Calendar */

#calendar {
}

#calendar caption {
    padding-bottom: 5px;
    font-weight: bold;
}

#calendar table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-right: 1px solid #24130F;
}

#calendar thead th {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    background: #24130F;
}

#calendar tbody td {
    padding: 5px 0;
    text-align: center;
    border-top: 1px solid #24130F;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
    padding: 5px;
    border-left: 1px solid #24130F;
    border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
    border-top: 1px solid #24130F;
    text-align: right;
}

#calendar tfoot #prev {
    border-top: 1px solid #24130F;
}

#calendar .pad {
    border-bottom: 1px solid #24130F;
}

#calendar #today {
    background: #24130F;
}

/* Footer */

#footer {
    width: 920px;
    height: 49px;
    margin: 0 auto;
    padding-top: 50px;
}

#footer-bgcontent {
    margin: 0px;
    padding: 0px;
    height: 99px;
}

#footer p {
    margin: 0;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
}

#footer a {
    color: #E5FFC4;
}

Re: Dark Theme

*******************EDIT***********************
I noticed when i changed it that the time stamp (date stamp) on the feed was'nt clearly visible, so i changed the backgrounf colour in the code below to #000000;  (BLACK) or change it to a colour u want. Thanx ;)
/* ---------------------------  Article  ------------------------ */

/* Article container can have "starred", "read", and "collapsed"
   attributes. The first two are self-explanatory while "collapsed"
   means that the article's content is folded (headlines view) */
.article-container {
    background-color: #000000;
    border: 2px #606060 solid;
    overflow: visible;   /* This is for the the expand/collapse dropmarker which is
                            taken outside the box using negative margins */
    position: relative;
    margin: 10px auto;
    min-width: -moz-min-content;
    max-width: 70em;
}
 

Re: Dark Theme

Cheers!!!