I added a CSS Reset:
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }The CSS Reset did remove some styling, but I still need to get rid of Blogger's special classes, IDs and Selectors.
So I'll need to make or find a Blogger CSS Reset. Looks like there's none already online, so here goes. I guess it'll end up being a list of all of Blogspot's css selectors.
So somebody made a matrix of it, and put it in a PDF and a GIF. I'm kind of thankful.
Copying and pasting from the list to the reset was easier than I thought it would be. Now I have two copies of the reset, the second one with some additional properties "neutralized."
Here's the two resets, plus some additional code to add a few things back, like list styles:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Other stuff that I have to put in each blog */
div.blogger-clickTrap {display: none;}
div#navbar {display: none;}
div#Attribution1 {display: none;}
a.home-link {display: none;}
.blog-feeds {display: none;}
/* Blogspot-altered Reset */
/* Blogspot selectors */
#blog-pager, #blog-pager-newer-link, #blog-pager-older-link, #comments, #comments .comment-footer, #comments dl dd, #comments dl dt, #comments h4, #comments h4 strong, #comments li, #comments ul, #comments-block, #comments-block .comment-author, #comments-block .comment-body, #comments-block .comment-body p, #comments-block .comment-footer, #comments-block dd, #comments-block dd p, #comments-block dd.comment-footer, #comments-block dd.comment-timestamp,
#comments-block dt,
#content-wrapper,
#footer,
#footer .widget,
#footer .widget-content,
#footer a,
#footer hr,
#footer p,
#footer-wrap1,
#footer-wrap2,
#footer-wrapper,
#header,
#header .description,
#header .description span,
#header .descriptionwrapper,
#header .titlewrapper,
#header a,
#header a:hover,
#header h1,
#header h1 a,
#header h1 a:hover,
#header img,
#header-inner,
#header-wrapper,
#main,
#main .comment-footer a,
#main .comment-footer a:hover,
#main .Header,
#main .profile-data,
#main .widget,
#main-bot,
#main-top,
#main-wrap1,
#main-wrap2,
#main-wrapper,
#outer-wrapper,
#sidebar,
#sidebar .widget,
#sidebar a,
#sidebar a:active,
#sidebar a:hover,
#sidebar a:link,
#sidebar a:visited,
#sidebar h2,
#sidebar li,
#sidebar ul,
#sidebarbottom-wrap1,
#sidebarbottom-wrap2,
#sidebartop a,
#sidebartop a:hover,
#sidebartop a:visited,
#sidebartop h2,
#sidebartop-wrap,
#sidebartop-wrap2,
#sidebar-wrap,
#sidebar-wrapper,
#wrap,
#wrap2,
#wrap3,
#wrap4,
.Blog,
.Blog h2.date-header,
.BlogArchive #ArchiveList,
.blog-pager,
.blog-pager-older-link,
.clear,
.comment-author,
.comment-body,
.comment-body p,
.comment-footer,
.comment-footer a:active,
.comment-footer a:hover,
.comment-footer a:link,
.comment-footer a:visited,
.comment-link,
.comment-link strong,
.date-header,
.date-header span,
.deleted-comment,
.description,
.descriptionwrapper,
.feed-links,
.Header,
.Header .description,
.Header h1,
.Header h1 a,
.main,
.main .Blog,
.main .widget,
.main .widget .clear,
.post,
.post blockquote,
.post blockquote p,
.post div,
.post h3,
.post h3 a,
.post h3 a:hover,
.post h3 a:link,
.post h3 strong,
.post img,
.post li,
.post p,
.post strong,
.post ul,
.post-body,
.post-body p,
.post-footer,
.post-footer .span,
.post-footer a,
.post-footer a:hover,
.post-footer p,
.postpage #description em,
.postpage #header h1,
.post-title,
.Profile,
.Profile dd,
.profile-data,
.profile-datablock,
.profile-img,
.profile-link,
.profile-textblock,
.sidebar,
.sidebar .Profile h2,
.sidebar .widget,
.sidebar .widget-content,
.sidebar a,
.sidebar a:hover,
.sidebar dl,
.sidebar h2,
.sidebar h2 img,
.sidebar li,
.sidebar p,
.sidebar ul,
.sidebar ul li,
.uncustomized-post-template,
.uncustomized-post-template .post-footer,
.uncustomized-post-template .post-footer .comment-link,
.widget-content,
a,
/* @-something styles removed from here!!! */
a img,
a.comment-link,
a.title-link:hover,
a:active,
a:hover,
a:link,
a:visited,
blockquote,
blockquote p,
body,
body#layout,
body#layout #content-wrapper,
body#layout #footer-wrap1,
body#layout #header,
body#layout #header-wrapper,
body#layout #main-top,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #sidebar-wrapper,
code,
div#sidebar,
div#sidebar-wrapper,
h1,
h1 a:hover,
h1 a:link,
h1 a:visited,
h1.title,
h2,
h2.date-header,
h3,
h3.post-title,
h3.post-title a,
h4,
h5,
h6,
hr,
body #outer-wrapper,
body .post-body,
body .post-footer,
body a.comment-link,
img,
li,
p,
p.comment-author,
p.comment-footer,
strike,
ul
/* Extra elements not covered by that terrible PDF */
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
border: inherit;
-moz-box-shadow: 0 0 0px transparent);
-webkit-box-shadow: 0 0 0px transparent;
-goog-ms-box-shadow: 0 0 0px transparent;
border-top-style: none;
border-style: none;
text-shadow: transparent 0px 0px 0px;
-moz-text-shadow: transparent 0px 0px 0px;
-webkit-text-shadow: transparent 0px 0px 0px;
}
.date-header {
width: 6em;
position: absolute;
}
.date-posts {
margin-left: 8em;
margin-right: 1em;
}
.date-header span {display: block; margin: .5em;}
#Header1 {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gwvy16ez4C2i4_69XeLVNc4Dp7J-ClURJ9LAIJmUb73ry4627VjBJ9xFPWId7FxClcEBats3duYochN3J06RMecU9kdpH9lg8jVuN0uadojA5esiInRGD5Ku_2bUMEjdemNL1-x65k4/s1600/picasion.com_ba0855ba978fdd0d8c18f21eaebb7583.gif");
background-position: center;*/
min-height: 100px;
_height: 100px;
background-repeat: repeat;
overflow: hidden;
height: 10em;
}
h1.title {
text-align: center;
padding-top: 2em;
line-height: 5em;
}
a:link {text-decoration: underline;}
h3.post-title a:link {
margin-bottom: 1em;
display: block;
font-size: 1.6em;
}
ol {
list-style: decimal;
}
/* Add space between entries */
.post.hentry {
margin: 5em 0;
}
.widget .post-body ul {list-style: square;}
At this point it's getting to be a bit much. Instead of adding CSS, perhaps I should be subtracting HTML code from the template. If I simply remove the class and ID names, I won't have to reset them all, because the CSS that's written into the themes won't have anything to grab onto.
