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):

The Code

.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>

Adding a background image and fading it.

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: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url('https://3.files.edl.io/8e3b/24/11/22/182222-1194cb2a-a2d6-401d-b42d-58a4ce4533a6.png'); background-repeat: no-repeat; background-size: cover; 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).

You can emulate the phone and email icons used by the website.

Email Bob Bell
952-758-1785

There are two classes:

class="user-email" & class="user-phone"

These class attributes can be used inside <div> tags, <span> tags, <a> tags, and a number of other tags that accept the class attribute, like this:

<a class="user-email" href="mailto:[email protected]">Email User</a>

<span class="user-phone">800-555-1212</span>

Please note: I do not recommend using the email method above, it is simply here for completeness and to note that it can be done. Please continue below to see how this should be done. The example above exposes "[email protected]" to anyone trying to harvest email addresses, so following the example below helps prevent spam.

In order to emulate the method of sending email to users through the website, you will need to get the uREC_ID for the person you want the email to go to. It is a fairly simple process, and has the additional benefit of not directly exposing the users email address to the internet at large.

1. Go to the Staff Directory of the site (district or school) where the user that you want the email to go to is listed. Each site: District, Eagle View, Falcon Ridge, Raven Stream, Middle School, High School and CLC is different and a user may be listed on more than one. The user will have a different uREC_ID for each site they are listed on, so it's best to use the most appropriate one.
2. Find the user in the Staff Directory and click on their name/link to go to their personal staff page.
3. Once you are on their staff page the uREC_ID should show up in the URL, but the easiest way to get the link is just to right click on the "Send email" link and choose "Copy link address" from the menu.
4. This should give you a URL that you can paste into your code, similar to this: https://www.npaschools.org/apps/email/index.jsp?uREC_ID=2171989. This URL should be pasted into the href attribute of the <a> tag. The resulting code, after pasting in the link, will look like this:

<a class="user-email" style="text-decoration: none;" href="https://www.npaschools.org/apps/email/index.jsp?uREC_ID=2171989">Email Bob Bell (or any text you want visible)</a>

Like
"MARS721"

Follow
"MARS_721"

Follow
"MARS_721"

The Code

<div><a href="https://www.facebook.com/MARS721/" target="_blank" rel="noopener"><button class="color-2 button-item" style="background-color: #ffffff; --color-primary: #ffffff; --color-secondary: #efefef; --color-over-primary: #ffffff; --color-over-secondary: #ffffff; width: 200px; text-align: center; margin: auto; border: 0; border-radius: 8px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;"><img style="float: left; margin: 6px 2px 4px 2px;" src="https://3.files.edl.io/fe13/23/10/13/165303-7c7f3e1b-7f39-40f1-89ca-77ca9005a5aa.png" alt="Facebook" width="32" height="32"><strong><span style="font-size: 14pt; color: #4267b2;">Like</span></strong><br><strong><span style="font-size: 14pt; color: #4267b2;">"MARS721"</span></strong></button></a></div>

Below is an example of how this could be used in a web page.

Section Heading
Online Registration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet orci a venenatis facilisis. Fusce sodales vel est rutrum maximus. Morbi tempor, ante eget congue congue, neque ante luctus arcu, sed dictum ante magna in sem. Aenean et nunc ex. Fusce turpis ipsum, vestibulum et nulla molestie, elementum auctor augue. Aenean dapibus feugiat quam, non interdum arcu pellentesque eget. Nam rhoncus non urna vel iaculis. Suspendisse accumsan ligula lorem. Integer lacinia felis vestibulum neque vehicula, ut feugiat erat interdum. Quisque eget finibus lacus. In vel elementum sem. Pellentesque dignissim metus a interdum efficitur. Quisque nec laoreet arcu, in eleifend ligula. Sed et erat euismod, tincidunt odio elementum, egestas sapien. Nam congue sit amet mi quis tincidunt. Cras placerat efficitur nisi eget malesuada.

Below is just an example of the default buttons that can be created on the site. It is worth noting that other content, information, images and text cannot be included within a button block added to a web page. To add a default button to a content block, you will need to add the HTML code.

The Code

<nav class="button-list" aria-label="Button block"><a class="color-2 button-item" style="--color-primary: #8b2332; --color-secondary: #000000; --color-over-primary: #ffffff; --color-over-secondary: #ffffff;" href="#" target="_self">Default Test Button</a></nav>

Swim Meet Hours and Information Here!

<div style="border: 0px; border-radius: 4px; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://3.files.edl.io/5f9a/25/03/05/185744-3773d5cf-99c8-4a62-9858-1163b1ccd760.png'); background-repeat: no-repeat; background-size: cover; 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; width: 60%;"><center><img style="padding: 2px 4px 6px 0px; vertical-align: middle; filter: drop-shadow(0px 0px 8px #0000ff);" src="https://3.files.edl.io/5678/23/10/13/163433-32a24153-d92a-42af-8d35-5664fe819469.png" width="24" height="24"><a style="text-decoration: none;" href="#"><span style="font-size: 20px; color: #000000; text-shadow: #0000ff 0px 0px 8px;">Swim Meet Hours and Information Here!</span></a></center></div>