CSS not changing my colors!
Posted: Wed Mar 05, 2008 3:22 pm
So, the CSS I'm using for my comic isn't quite working right. I ftped the CSS template "Minimal Black" by C.W. and although it places all the pieces in the correct places, It will not for the life of me change colors or fonts like (I guess I assume) it should. It shows up as grey and lighter grey instead of black and dark grey.
I saved the original copy of the CSS and altered it with new font/color info. Just to be absolutely sure as to the initial process: I copy/pasted them into textedit, made them plain text, added .html instead of .txt and named them both screen.html.
Pre-change:
/* CSS by c.w. http://cwcomics.comicgenesis.com c.w.comics@gmail.com */ body { margin: 0; padding: 0; text-align: center; font-family: sans-serif; background: #F6F6F6; } #ad { margin: 15px; float: right; } .header { margin: 15px; text-align: left; margin-left: 1em; } h1 { margin: 0; font-weight: normal; } h2 { margin: 0; color: #555555; font-weight: normal; } h3 { margin: 0; color: #555555; font-weight: normal; } a { color: #000000; text-decoration: none; font-style: italic; } a:hover { text-decoration: underline; } ul { margin: .5em; padding: 0; } li { display: inline; margin-right: 2em; } .main { margin: 0; padding: 10px; margin-top: 1em; background: #DDDDDD; } .main ul { margin: 0; } .main li { margin-right: 1em; } .main img { margin: .5em; } .news, .list, .rant, .gal { text-align: left; margin: .5em 20% .5em 20%; } .news iframe { width: 100%; height: 350px; border: 0; } .list, .rant, .gal { background: #DDDDDD; padding: 15px; overflow: auto; } .gal img { float: left; margin: 0 25px 25px 0; } .list li { display: block; margin-bottom: .25em; } #footer { font-size: 70%; }
Post-change:
/* CSS by c.w. http://cwcomics.comicgenesis.com c.w.comics@gmail.com */ body { margin: 0; padding: 0; text-align: center; font-family: mistral; background: #000000; } #ad { margin: 15px; float: right; } .header { margin: 15px; text-align: left; margin-left: 1em; } h1 { margin: 0; font-weight: normal; } h2 { margin: 0; color: #555555; font-weight: normal; } h3 { margin: 0; color: #555555; font-weight: normal; } a { color: #FFFFFF; text-decoration: none; font-style: italic; } a:hover { text-decoration: underline; } ul { margin: .5em; padding: 0; } li { display: inline; margin-right: 2em; } .main { margin: 0; padding: 10px; margin-top: 1em; background: #202020; } .main ul { margin: 0; } .main li { margin-right: 1em; } .main img { margin: .5em; } .news, .list, .rant, .gal { text-align: left; margin: .5em 20% .5em 20%; } .news iframe { width: 100%; height: 350px; border: 0; } .list, .rant, .gal { background: #686868; padding: 15px; overflow: auto; } .gal img { float: left; margin: 0 25px 25px 0; } .list li { display: block; margin-bottom: .25em; } #footer { font-size: 70%; }
Is there more you would need to know what I'm doing wrong?
I saved the original copy of the CSS and altered it with new font/color info. Just to be absolutely sure as to the initial process: I copy/pasted them into textedit, made them plain text, added .html instead of .txt and named them both screen.html.
Pre-change:
/* CSS by c.w. http://cwcomics.comicgenesis.com c.w.comics@gmail.com */ body { margin: 0; padding: 0; text-align: center; font-family: sans-serif; background: #F6F6F6; } #ad { margin: 15px; float: right; } .header { margin: 15px; text-align: left; margin-left: 1em; } h1 { margin: 0; font-weight: normal; } h2 { margin: 0; color: #555555; font-weight: normal; } h3 { margin: 0; color: #555555; font-weight: normal; } a { color: #000000; text-decoration: none; font-style: italic; } a:hover { text-decoration: underline; } ul { margin: .5em; padding: 0; } li { display: inline; margin-right: 2em; } .main { margin: 0; padding: 10px; margin-top: 1em; background: #DDDDDD; } .main ul { margin: 0; } .main li { margin-right: 1em; } .main img { margin: .5em; } .news, .list, .rant, .gal { text-align: left; margin: .5em 20% .5em 20%; } .news iframe { width: 100%; height: 350px; border: 0; } .list, .rant, .gal { background: #DDDDDD; padding: 15px; overflow: auto; } .gal img { float: left; margin: 0 25px 25px 0; } .list li { display: block; margin-bottom: .25em; } #footer { font-size: 70%; }
Post-change:
/* CSS by c.w. http://cwcomics.comicgenesis.com c.w.comics@gmail.com */ body { margin: 0; padding: 0; text-align: center; font-family: mistral; background: #000000; } #ad { margin: 15px; float: right; } .header { margin: 15px; text-align: left; margin-left: 1em; } h1 { margin: 0; font-weight: normal; } h2 { margin: 0; color: #555555; font-weight: normal; } h3 { margin: 0; color: #555555; font-weight: normal; } a { color: #FFFFFF; text-decoration: none; font-style: italic; } a:hover { text-decoration: underline; } ul { margin: .5em; padding: 0; } li { display: inline; margin-right: 2em; } .main { margin: 0; padding: 10px; margin-top: 1em; background: #202020; } .main ul { margin: 0; } .main li { margin-right: 1em; } .main img { margin: .5em; } .news, .list, .rant, .gal { text-align: left; margin: .5em 20% .5em 20%; } .news iframe { width: 100%; height: 350px; border: 0; } .list, .rant, .gal { background: #686868; padding: 15px; overflow: auto; } .gal img { float: left; margin: 0 25px 25px 0; } .list li { display: block; margin-bottom: .25em; } #footer { font-size: 70%; }
Is there more you would need to know what I'm doing wrong?