Styling The Output

Markup structure

Opening hours are displayed as a three-column HTML table.

Each seven-day block of opening hours is grouped inside a <tbody> element.

If applicable, the table footer contains pagination links.

Provided styles

This plugin makes very little assumptions in regards to styling, and provides almost no styles (other than for state management) out of the box.

The sole exceptions are CSS rules for floating the pagination links left and right within the table footer.

Please see this plugin's public stylesheet for details.

CSS hooks

The generated markup provides the following CSS classes on elements that can be targeted for styling.

• The table itself receives the wplibcalhours class
• The row containing today's hours receives the today class
• The "next" and "previous" links in the footer can be targeted by the applied classes next and previous.

Example

Zebra-striped rows, with bold text on today's hours, and the dates shown in the second column italicized.

Pagination links are padded and reduced in size.

The markup:

<table class="wplibcalhours">
  <thead>
    <tr><th colspan="3">Hours</th></tr>
  </thead>
  <tbody class="hidden">
    <!-- omitted for brevity -->
  <tbody>
  <tbody>
    <tr><td>Wednesday</td><td>Apr 12</td><td>7:45am - 10pm</td></tr>
    <tr><td>Thursday</td><td>Apr 13</td><td>7:45am - 10pm</td></tr>
    <tr><td>Friday</td><td>Apr 14</td><td>7:45am - 8pm</td></tr>
    <tr><td>Saturday</td><td>Apr 15</td><td>10am - 6pm</td></tr>
    <tr><td>Sunday</td><td>Apr 16</td><td>12pm - 10pm</td></tr>
    <tr><td>Monday</td><td>Apr 17</td><td>7:45am - 10pm</td></tr>
    <tr><td>Tuesday</td><td>Apr 18</td><td>7:45am - 10pm</td></tr>
  </tbody>
  <tbody class="hidden">
    <!-- omitted for brevity -->
  <tbody>
  <tfoot>
    <tr><td colspan="3"><a class="prev">« previous</a><a class="next">next »</a></td></tr>
  </tfoot>
</table>

The applied CSS:

.wplibcalhours .today { /* emphasize today's hours */
    font-weight: bolder;
}

.wplibcalhours tbody td:nth-child(2) { /* minor emphasis on date column */
    font-style: italic;
}

.wplibcalhours tbody tr:nth-child(2n+1) { /* zebra striping */
    background: #eee;
}

.wplibcalhours tfoot a { /* smaller font size in footer links */
    font-size: smaller;
}

.wplibcalhours .prev {
    padding-left: 0.5em;
}

.wplibcalhours .next {
    padding-right: 0.5em;
}