Code Snippets

The following code is for archival purposes only and may be sent to Edlio in the future to use in automatically styling collapsible blocks across all sites. DO NOT try to use this in your page(s).

It would look something like this (missing the arrow right, and down when expanded, icons):

.collapsible-header {
    display: flex;
    cursor: pointer;
    height: 24px;
    background: #f1f1f1;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 10px;
}

In order to maintain consistency across our sites the following should be used when adding box shadows to various elements. Box shadows can be added to lists, tables, images, and more. The usual method is to add the box shadow inside the style attribute of the HTML item you want shadowed. This will look like the following:

style="box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;"

Usually, some rounded corners look nice with this as well. Across our sites the standard is a 4 pixel (4px) radius. That would be added as follows (just add "border-radius: 4px;" to the style attribute):

style="border-radius: 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;"

Adding the above code to an image, for example, would look like this:

<img style="border-radius: 4px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;" src="https://www.npaschools.org/pics/school_logo.png" alt="NP Logo">

The above code would give the image a rounded border and a slight drop shadow (here I have also added "padding: 20px;" inside the style attribute to give some space between the image and the border/drop shadow):

A three column, unordered list with no bullet points. Every other list item is shown with a light gray background color, but these will not necessarily line up and be shown as rows depending on the number of items in the list. You may also only see one or two columns depending on the number of items in the list.

• ITEM 1
• ITEM 2
• ITEM 3
• ITEM 4
• ITEM 5
• ITEM 6
• ITEM 7
• ITEM 8
• ITEM 9
• ITEM 10
• ITEM 11

The following lists show some of the effect of lists with differing numbers of items. This can be corrected by changing each item individually to have the correct background color. For example, in the seven item list at the bottom, reversing the background colors for items 4, 5, and 6 would re-establish the row pattern. You may also notice a one pixel wide border showing up to the right of items in the third column, before the border/box shadow begins. This can be removed by removing the "border-right: 1px solid #xxxxxx;" in all third column style attributes. Both of those corrections would have to be fixed if the number of items in the list changes at any time.

Also note, that I did style the above and following lists with rounded corners and box shadows that are not represented in the code below.

• ITEM 1
• ITEM 2
• ITEM 3
• ITEM 4

• ITEM 1
• ITEM 2
• ITEM 3
• ITEM 4
• ITEM 5
• ITEM 6
• ITEM 7

The Code

<ul style="columns: 3; list-style-position: inside; list-style-type: none; border: 0px; column-gap: 0px; margin: 4px; padding: 0px;">
  <li style="background: #f1f1f1; border-right: 1px solid #ffffff; padding: 4px 6px 4px 6px;">ITEM 1</li>
  <li style="border-right: 1px solid #f1f1f1; padding: 4px 6px 4px 6px;">ITEM 2</li>
  <li style="background: #f1f1f1; border-right: 1px solid #ffffff; padding: 4px 6px 4px 6px;">ITEM 3</li>
  <li style="border-right: 1px solid #f1f1f1; padding: 4px 6px 4px 6px;">ITEM 4</li>
</ul>

This div uses a background color and border.

The Code

<div style="border: 1px solid #e3e3e3; border-radius: 4px; background-color: #fff7d7; margin: 16px 0px 10px 0px; padding: 10px 10px 10px 10px;">
...content goes here...
</div>

This div uses a background color and box shadow with no border.

The Code

<div style="border: 0px; border-radius: 4px; background-color: #fff7d7; margin: 16px 2px 10px 0px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 10px 10px 10px 10px;">
...content goes here...
</div>

It's also fairly easy to add an image to these.

The content of the div can run multiple lines as well. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus elementum sagittis vitae et. Aliquet enim tortor at auctor urna nunc id cursus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Sem et tortor consequat id porta nibh venenatis cras.

The Code

<div style="border: 0px; border-radius: 4px; background-color: #fff7d7; margin: 16px 2px 10px 0px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; padding: 10px 10px 10px 10px;"><img style="float: left; margin: 0px 5px 0px 0px;" src="https://3.files.edl.io/5678/23/10/13/163433-32a24153-d92a-42af-8d35-5664fe819469.png" alt="Reminder" width="22" height="22">
...content goes here...
</div>

Here are some possible images to use. They can be resized by setting the width and height in the <img> tag. Margins can be set to modify the amount of space around the image (the four values used when setttin margins are, in order, top right bottom left).

Like
"MARS721"

Follow
"MARS_721"

Follow
"MARS_721"

Parent and Child Aquatics
Online Registration

For this level, an instructor will lead parents and children through various activities to acclimate children to the water and teach them basic safety of being in and around the pool. Children must be between 6 months and 3 years to attend. Parents must be in the water with the children for this class. Children must wear a snug fitted swim diaper.

Must be at least six months of age, no skill prerequisites.