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 background 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 Compare. 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 😉.

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

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.

<h3 style="text-align: center; font-size: 40px !important; line-height: 40px;">

Title</h3>

<p>

&nbsp;</p>

<table style="width:100%; border: none; border-top: 5px solid black; border-bottom: 5px solid black;">

<tbody>

<tr style="background-color: transparent;;">

<td style="width: 50%; border-right: 5px solid black; padding: 4%; vertical-align: top;">

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

Column Title</h3>

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

Whatever you want here</p>

</td>

<td style="width: 50%; border-left: 5px solid black; padding: 4%; vertical-align: top;">

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

Column Title</h3>

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

Whatever you want here</p>

</td>

</tr>

</tbody>

</table>

<p>

&nbsp;</p>

Table 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