Why Do We Have It?

As part of the standardization effort, Boomerang has created a standardized layout for program pages designed by Butterfly. You may adapt this style easily with the regular 1 column with margin paragraph bundle.

All KidSpirit program page has to use this block, no other block should be present.

How Do I Add One?

Good news, there is no code involved here... yet... so once you copy this over you can edit it as a normal table.

NOTE: Make sure the type is Full HTML

To add this to the page, simply add a new Paragraph and select Hiro Schedule. The compare table will be automatically added, you may do whatever edit you wish and if it breaks, just replace it with a new one 😉.

If you need to add it manually, click Switch to plain text editor and paste this chunk of code in, then change it back to Switch to rich text editor and you are all set.

NOTE: Drupal likes to remove the styles after you convert them to rich text, you may need to repaste this code if that happens

A fail-safe is in place if Drupal messes it up, but no fail-safe if the code has been wrongly edited.

<style>

.anthScheduleTable {

border: 5px solid black !important;

width: 80%;

margin: auto;

}

.anthScheduleTableHeading {

text-align: center;

background-color: #050505;

color: white;

font-size: 40px;

line-height: 40px;

font-family: 'Stratum2Web',sans-serif;

padding: 2%;

}

.anthScheduleSpacerTd {

height: 10px;

background-color: #d73f09;

border: 5px solid black !important;

}

.anthScheduleOddRow {

background-color: #cbcbcb !important;

}

.anthScheduleEvenRow {

background-color: #efefef !important;

}

.anthScheduleCol {

width: 33.33%;

border: 5px solid black !important;

text-align: center;

}

</style>

<table class="anthScheduleTable">

<tbody>

<tr>

<td colspan="3" class="anthScheduleTableHeading">

WINTER CLASS SCHEDULE

</td>

</tr>

<tr>

<td colspan="3" class="anthScheduleSpacerTd"></td>

</tr>

<tr class="anthScheduleOddRow">

<td class="anthScheduleCol" style="text-align: center;">

<strong>Levels</strong></td>

<td class="anthScheduleCol">

<p style="text-align: center;">

<strong>Tuesday &amp; Thursday<br />

(twice-a-week)</strong><br />

Jan. 11th - Feb. 3rd</p>

</td>

<td class="anthScheduleCol">

<p style="text-align: center;">

<strong>Saturday<br />

(once-a-week)</strong><br />

Jan. 22nd - Feb. 3rd</p>

</td>

</tr>

<tr class="anthScheduleEvenRow">

<td class="anthScheduleCol">

<p style="text-align: center;">

<strong>Arrowheads<br />

(Beginners)</strong><br />

$190/Term</p>

</td>

<td class="anthScheduleCol">

5:15-6:45pm</td>

<td class="anthScheduleCol">

9:00-10:30am<br />

or<br />

10:45-12:15pm</td>

</tr>

<tr class="anthScheduleOddRow">

<td class="anthScheduleCol">

<p style="text-align: center;">

<strong>Bowmasters<br />

(Advanced)</strong><br />

$190/Term</p>

</td>

<td class="anthScheduleCol">

5:15-6:45pm</td>

<td class="anthScheduleCol">

9:00-10:30am<br />

or<br />

10:45-12:15pm</td>

</tr>

<tr class="anthScheduleEvenRow">

<td colspan="3" style="border: 5px solid black;">

<p style="text-align: center;">

<strong>Classes will be held on Langton Hall Archery Range</strong><br /><br />

<strong>On these dates:</strong><br />

Feb. 12th &amp; March 5th<br />

Saturday classes will be held on EE Wilson</p>

</td>

</tr>

</tbody>

</table>

<h3 style="text-align: center;">

Thank you to our partners</h3>

Schedule Stopped Working/Looking Funny

If somebody ignored the giant warning that says do not edit, it will stop working, but fortunately, to fix this is rather simple, just remove the broken paragraph and add a new one, as simple as that.

Editing Code

WARNING: You must be familiar with HTML, CSS, and JS to proceed

If you are familiar with basic web development, here are the thing you can do:

• Edit CSS with inline CSS

• Add new elements

And here are the things you must not do:

• Remove any classes

• Create any elements that are not contained by a container

• Remove any parent elements