aurimusHey there! Maybe somebody could help me with this issue.
I wrote a plugin http://wordpress.org/extend/plugins/google-calendar-weekly-timetable/. It displays a table with Google Calendar events. I did it by using code of other plugin.
I can't understand why only some of external css options for the table work.
The CSS is included with:
wp_enqueue_style('gcwt_styles', WP_PLUGIN_URL . '/' . GCWT_PLUGIN_NAME . '/css/gcwt-style.css');
The table is formed automatically (as it depends on how many events there are). Something like this:
$markup = '<table style="border: 10px solid #333;" class="pretty-table"><tr><th scope="col"></th>';
for($i=0;$i < $number_of_days; $i++){
$markup .= '<th scope="col">'.$week_days_names[$i].'</th>';(style="border: 10px solid #333;" part is what I have to add to make it work, however it is all already in CSS. After the table is output, it looks like this:
<div class="entry-content">
<div><table style="width:200px;border: 10px solid #333;" class="pretty-table"><tr><th scope="col"></th><th scope="col">Monday</th><th scope="col">Tuesday</th><th scope="col">Wednessday</th><th scope="col">Thursday</th><th scope="col">Friday</th><th scope="col">Saturday</th></tr><tr>
<th scope="row">18:00</th><td></td><td style="background:blue">Beginners</td><td></td><td style="background:blue">Beginners</td><td></td><td></td></tr></table></div>
<p> </p>
<p>[google-calendar-events id="1"]</p>
</div><!-- .entry-content -->Whole CSS:
table.pretty-table
{
width: 200px; //this option doesn't work unless I include it with style="width:200px"
padding: 0;
margin: 0;
border-collapse: collapse;
border: 1px solid #333; // this option doesn't work unless I include it with style="border: 1px solid #333"
`
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
background-color: #bcc0e4; <strong>//This option works
}
table.pretty-table caption
{
caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;
}
table.pretty-table th, .pretty-table td
{
border: 1px dotted #666;
padding: 0.5em;
text-align: left;
color: #FFF;
}
table.pretty-table th[scope=col]
{
color: #000;
background-color: #6E6E6E;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 2px solid #333;
border-right: 2px solid #333;
}
table.pretty-table th+th[scope=col]
{
color: #fff;
background-color: #6E6E6E;
border-right: 1px dotted #666;
}
table.pretty-table th[scope=row]
{
color: #FFFFFF;
background-color: #424242;
border-right: 2px solid #333;
}
table.pretty-table tr.alt th, table.pretty-table tr.alt td
{
color: #2a4763;
}
table.pretty-table tr:hover th[scope=row], table.pretty-table tr:hover td
{
background-color: #22aa00;
color: #000;
}
