Okay so I've had no time to extensively test this so you guys will have to help out with this but this is what I did to stop the TwentyTen theme from overriding my CSS or 'resetting' it.
In the style.css file you will find the following code segment:
Code:
/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
clear: both;
}
ol, ul {
list-style: none;
}
blockquote {
quotes: none;
}
blockquote:before, blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img { border: none; }
This is part of the css code that is integrated with the TwentyTen theme to reset most of the html tags. If you notice it affects the <table>, <tr> and <td> tags.
So I looked at a page source from the php page that is generated by the TwentyTen when I have the calendar plugin running on it. The following code segment is what I found interesting:
Code:
<div id="main">
<div id="container">
<div id="content" role="main">
<div id="post-56" class="post-56 page type-page hentry">
<h1 class="entry-title">Calendar Of Events</h1>
<div class="entry-content">
<p>
<table cellspacing="1" cellpadding="0" class="calendar-table">
Which appears to show that the <table> tag and subsequent <tr> and <td> tags are subclassed in a hierarchy of <div> tags. So I was forced to hunt down each one of the id/class elements and find out if each of them affected the tags in question.
Viola! I found the 'container'/'content'/'entry-content' id's which played a hand in messing around with my custom css.
Code:
#content table {
border: 0px solid #e7e7e7;
text-align: left;
/* margin: 0 -1px 24px 0;*/
/* width: 100%;*/
}
#content tr th,
#content thead th {
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
/* padding: 9px 24px;*/
}
#content tr td {
/* border-top: 0px solid #e7e7e7;*/
/* padding: 6px 24px;*/
}
#content tr.odd td {
background: #f2f7fc;
}
Above is the section of the style.css that needs to be edited. for simplicity sake I just commented out the portions of the css that were messing with the custom css I was trying to introduce. So you're notice that there is a section:
Code:
#content table {
border: 0px solid #e7e7e7;
text-align: left;
/* margin: 0 -1px 24px 0;*/
/* width: 100%;*/
}
Which sets the width to 100% of the viewing area. Once I commented this out it fixed most of my headaches. Also there was some padding that I got rid of:
Code:
#content tr th,
#content thead th {
color: #888;
font-size: 12px;
font-weight: bold;
line-height: 18px;
/* padding: 9px 24px;*/
}
#content tr td {
/* border-top: 0px solid #e7e7e7;*/
/* padding: 6px 24px;*/
}
Once all of that was commented out, rendering it ineffective, the css for the calendar was able to take affect! Again I have not fully tested this to see if it affects any other aspects of the site I am currently building so please if you guys notice anything let me know. I'll dive in again and see if I can't straighten it out. I'm a relative newb at this stuff so I sort of research as I go, promise I'll get an answer just no timeline promises.
Hope this helps, drop me a line,
Cheers, Mike
