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.
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 Summer. 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.
<!-----------------------------------------------------------------------
-- BEWARE: Stuff might break if edited incorrectly --
-- Contact Anthony Boomerang if you need help --
------------------------------------------------------------------------->
<style>
.anth-table-session {
color: black;
border: 3px solid #222222;
border-radius: 3px;
background: #ffa16b;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
.anth-table-camp {
color: black;
border: 3px solid #222222;
border-radius: 3px;
background: #ffe0cf;
font-weight: bold;
}
.pine table {
border: 3px solid #222222 !important;
}
.anth-table-title {
background-color: #f0f0f0 !important;
}
.anth-table-normal {
background-color: #ffffff !important;
}
</style>
<h3 style="text-align: center;">
Summer Day Camp 2021 (In-Person)</h3>
<p style="text-align: center;">
<b style="font-size: 24px">2 Week Camps | Monday-Friday<br />
Full-Day | Half-Day</b></p>
<table style="table-layout: fixed;">
<thead>
<tr>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 1:</span> June 21 - July 2<br />
<strong>Private Eyes - Puzzles & Play Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$530 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$310 ($8.86/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Junior Detectives (Grades K-2)</li>
<li>
It's a Mystery (Grades 3-5)</li>
<li>
Detective Academy (Grades 6-8)</li>
<li>
[NEW] Junior Coders & Detectives (Grades K-2)</li>
<li>
[NEW] Mysterious Code Camp (Grades 3-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Super Sleuth (Grades K-6)</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 2:</span> July 6 - July 9<br />
<strong>Bold Stripes & Bright Stars Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$212 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$125 ($8.93/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Red, White & Blue (Grades K-2)</li>
<li>
Bold Stripes & Bright Stars (Grades 3-5)</li>
<li>
Olympics, Games & Art (Grades 6-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Olympic Kids (Grades K-6)</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 3:</span> July 12 - July 23<br />
<strong>Engineering & Movement Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$530 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$310 ($8.86/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Exploring Forces (Grades K-2)</li>
<li>
Exploring Momentum (Grades 3-5)</li>
<li>
Kinetic Energy & Art (Grades 6-8)</li>
<li>
[NEW] Code Blocks Tech Camp (Grades K-2)</li>
<li>
[NEW] Data in Motion Camp (Grades 3-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Move, Create, Innovate (Grades K-2, 3-5, 6-8)</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 4:</span> July 26 - August 6<br />
<strong>Trekkin' the Globe Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$530 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$310 ($8.86/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Global Investigators (Grades K-2)</li>
<li>
Explore the World (Grades 3-5)</li>
<li>
Global Trekkin' (Grades 6-8)</li>
<li>
[NEW] Exploring Programming Camp (Grades K-2)</li>
<li>
[NEW] Code Around the World Camp (Grades 3-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Worldwide Exploration (Grades K-6)</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 5:</span> August 9 - August 20<br />
<strong>Our Blue Planet Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$530 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$310 ($8.86/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Adventures of the Sea (Grades K-2)</li>
<li>
Seas of Life (Grades 3-5)</li>
<li>
Nature, Art & Outdoor Adventures (Grades 6-8)</li>
<li>
[NEW] Code Sharks Tech Camp (Grades K-2)</li>
<li>
[NEW] Blue Screens Camp (Grades 3-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Water & Earth (Grades K-6)</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center;" class="anth-table-camp">
<span style="font-size: 1.2em; font-weight: bold;">Session 6:</span> August 23 - September 3<br />
<strong>Superhero Camps</strong>
</td>
</tr>
<tr class="anth-table-title">
<td style="text-align:left;" class="anth-table-type">
<strong><u>Full-Day Camps</u></strong><br />
8:30AM - 4:30PM<br />
$530 ($6.63/hr)
</td>
<td style="text-align:left;" class="anth-table-type">
<strong><u>Half-Day Camps</u></strong><br />
8:30AM - 12:00PM | 1:00PM - 4:30PM<br />
$310 ($8.86/hr)
</td>
</tr>
<tr class="anth-table-normal">
<td>
<ul>
<li>
Junior Heroes (Grades K-2)</li>
<li>
Cosmic Creators (Grades 3-5)</li>
<li>
Superhero Academy (Grades 6-8)</li>
<li>
[NEW] Daring Data (Grades K-2)</li>
<li>
[NEW] Digital Heroes (Grades 3-8)</li>
</ul>
</td>
<td>
<ul>
<li>
Calling all Superheroes (Grades K-6)</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p style="text-align: left;">
Two-Week Camps: Full-day $530 ($6.63/hr), Half-day $310 ($8.86/hr)<br />
Session 2: (4-day camp): Full-day $212 ($6.63/hr), Half-day $125 ($8.93/hr)</p>
<p style="text-align: left;">
For OSU students and staff, a $16 discount is available for our full-day 2-week camps<br />
KidSpirit also offers <a href="https://kidspirit.oregonstate.edu/sites/kidspirit.oregonstate.edu/files/summer-scholarship-form.pdf" target="_blank">scholarships (click to download form)</a> for families in financial needs for up to 50% of the registration.<br />
For more information, please contact us at <a href="mailto:kidspirit@oregonstate.edu">kidspirit@oregonstate.edu</a></p>
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.
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