Mar & Apr 2020 Edition

Have a Unique Topic to Share or Just Want to Comment on How We're Doing

Contact Us!

Since many of you have said that you haven't had a chance to apply things you've learned in the previous Blogger editions, we're going to keep this month's edition short. Go back and review earlier editions or spend time adding these new features to your skill set. There are only 3 topics with a 4th embedded in the Just for Fun, but they are well worth reading.

As a Reminder - Stick to the Home Page Standards outlined in the previous edition and found in your Guidebook. Banners on your home page are restricted and can only be added above the main slideshow, with permission. This area is reserved for district and community event postings and alert information.

March Topics & Tips

Learning Forms Manager

Forms can be created and used on your web pages to collect and report information. Let's first learn the four Element Libraries, including Standard Elements, Grouped Elements, Layout Elements and Saved Elements. Then, we'll dive into how to apply these elements, along with other features to create a dynamic form that is usable on your site. Let's get started.

FORMS MANAGER IS LOCATED UNDER THE 4-SQUARE MANAGER

FOUR-SQUARE_FORMS_MANAGER_BUTTON_GRAPHIC-ELEMENT

The Forms Dashboard (different features are available, depending on your permissions) is the creation station for accessing, building and editing forms.

Forms with un-reviewed submissions are bold and those marked with have unpublished changes.

FORMS MANAGER DASHBOARD

Graphic Element Only: Blogger Jan-Feb 2021

ELEMENT LIBRARIES

STANDARD ELEMENTS

The Standards Elements include fields that allow the user to enter text or make selections.

Text Field:

The text field is a small area where users can input a short amount of text.

Email Field:

This is a text field element with a special configuration that validates the email address format. Responses in this field must be in the following format: [username] @ [domain] . [top-level domain]. The email field will show an error if the entered text does not show a username followed by an @ symbol, followed by a domain, followed by a period, followed by "com," "org," "edu," or any other valid suffix. Example: blogger@troy.k12.mi.us or blogger@gmail.com or blogger@oakland.edu

Date Picker:

This field allows users to select a date from a pop-up calendar.

Hidden Field:

Any content in the hidden field is not displayed to the user, which can be helpful when creating a purchase form that has multiple configuration options. A common item with a baseline price can be put in a hidden field that is set to “Currency” with a default value. This way, users will only have to choose among prices for the options, without having to worry about selecting or deselecting the baseline price item.

Radio Buttons:

A radio button provides the user with a choice where only one option must be chosen. Form authors are not limited to a simple yes/no choice and can present the users with as many options as they wish; however, only one option may be selected. (The name "radio button" comes from an old-style car stereo with preset buttons that can be set to a particular station; pushing one button in makes all other buttons pop back out.)

Checkbox:

A checkbox is used when a user is asked to make a choice that can have more than one response. When multiple checkboxes are present, selecting one does not preclude selecting any other.

Select List:

A select list functions similarly to a set of radio buttons; the user is presented with a choice, but only one option can be selected in order to proceed. The options appear in a dropdown list format.

Text Area:

The text area is similar to the text field, except that it has room for multiple lines to be input by the user. Use a text area instead of a text field when you are asking the user to input more than 255 characters.

Attach File:

Use this element when you require form users to upload a data file. See the list to the right for accepted formats and upload maximum size.

STANDARDS-ELEMENTS-CHECKLIST-GRAPHIC-ELEMENT

Attached File (additional information)

The "Attach File" element, under the Standard Elements library, can be used to allow a submitter to upload their own files to their form submission. This can be helpful for a number of situations, such as pictures on a student form, a resume on a job application form, or signed permission slips for a field trip.

To use this feature, simply add the Attach File element by dragging it from the Element Library to your form.

Accepted File Types

By default, the element is set to accept all file types that are allowed on your site. To limit the types of files that users can upload, uncheck the "Accept all approved file types" checkbox, and check off the file types you'd like to accept.

Documents: Word, Excel, pdf, rtf, note, notebook, one, txt, xml, numbers, pages
Images: jpg, jpeg, png, gif, eps, svg
Zip Files: zip
Presentation: PowerPoint, flipchart, key, keynote
Video: avi, mov, mpg, swf, mpeg, qt, mp4, wmv, m4v
Audio: mp3, mpg, mid, midi, mp4, wav
Adobe: indd, psd, swf, as
Web: css, js, htm, html, jar
Other: ds, cmbl, isf, omp, ico, epub

Files uploaded to an Attach File element have a maximum size of 10MB.

GROUPED ELEMENTS

Grouped elements are simply multiple standard elements that are arranged into logical collections in order to capture common information, such as a user's full name or mailing address. When placed on a form, the individual fields of a grouped element cannot be broken up or rearranged. Available Grouped Element types are:

Address Block:

This element collects street address, city, state, region, ZIP code, and country information. In the settings, the Prefill Options dropdown menu can be configured to accept information from Constituent Manager, if the form user is logged in. Addresses that can be pulled from Constituent Manager are: Home, Personal, School, Summer, Winter, and Work.

Name Block:

The name block collects Prefix, First Name, Middle Name, Last Name, and Suffix data. These fields can also be prefilled using data from Constituent Manager.

Phone & Extension Block:

The phone block collects a phone number and extension. Prefill information can be pulled from Constituent Manager on the settings screen.

GROUPED-ELEMENTS-CHECKLIST-GRAPHIC-ELEMENTS

LAYOUT ELEMENTS

Layout elements do not collect any data, but create organizational categories and logical divisions that help make a longer form easier for users to follow. They exist solely to assist the form author in tailoring the appearance and flow of the form on the page. Available form elements are:

Header:

A short block of headline-formatted text. The size of the headline can be changed in the Settings menu. H1 is the largest font size, and H6 is the smallest.

Text block:

A longer block of text formatted at standard size. Used to convey more detailed information to the reader in the body of the form page.

Horizontal Rule:

A horizontal line spanning the width of the form. Use the settings menu to adjust the thickness of the line in pixels, the width of the line (expressed as a percentage of the available width of the form), the horizontal alignment, and the shading effect.

Page Break:

Breaks the form up into pages and inserts buttons allowing the user to page back and forth. This is very useful for longer forms.

LAYOUT-ELEMENTS-CHECKLIST-GRAPHIC-ELEMENT

SAVED ELEMENTS

Any element can be customized and then saved for reuse, either in the same form or in another form. Those elements appear in the Saved Elements library. Form elements and lists, like those used for radio buttons, check boxes and selection lists, can be saved. You can also group elements and save them, as well. You'll make use of the Selection Tools: Copy, Save, Delete to manage this library.

Copying Elements

After an element has been created in the Build & Edit tab, it can be copied to the Element Clipboard, a temporary holding area where a single element or group of elements can be placed in order to create additional copies of them on the form.

To save an element to the clipboard, click on the element to highlight it, and then click the blue "Copy" button found under "Selection Controls."

Multiple elements can be copied at once. Click the form background and drag to create a selection box around a group of items, or click multiple elements while holding Shift. Note, however, that they will act like a single element when pasted back into the form - the pasted elements will take up the same number of rows as the original elements. If another element is copied, it will replace the element(s) on the clipboard.

Once the form is saved and closed, the contents of the clipboard will be lost. To save an element for longer-term use or use on another form, use the "Save Element" feature described below.

Saving Elements

The "Saved Elements" pane in the Element Library stores customized elements created by users. Saved elements can be used anywhere, not just on the form where they were created.

To save an element you have customized, click on the element to highlight it. While it's highlighted, click the green "Save" button under "Selection Controls."

The "Save Element(s)" screen will appear. Give the element a name and add a comment if you wish. If the element is to be used by other forms editors, select the checkbox marked "Add to the shared saved element library." If this box is not selected, then the only user who created the element will be able to see and use it.

Saved elements can be edited from the Dashboard without opening a specific form. Click the "Saved Elements List" button on the Dashboard tab to open the Manage Saved Elements screen. Click a saved element's name to open it for editing.

Users can only modify the elements that they saved; other users' elements will be locked. Another user's element may be cloned, however, and the clone can be edited and saved as a new saved element. Click the blue "Clone Saved Element" button to create a copy of an existing saved element.

Changes made to a saved element will not be applied retroactively to any copies that were previously used in other forms. Only future instances of the saved element will reflect the edits.

Sharing Saved Elements

There are 2 options to saving a list element. Choose My Elements if you want to save the element for your use only or Shared Elements to share what you have made with all other Forms Manager users. If you use Shared Elements, they must be named to truly describe what the item is.

Multiple items can be grouped by holding down your shift button and clicking on the elements. To save them, scroll to the Saved Elements library list, then select your items and click the green Save button. The selected items will display in the window with fields for you to add a Name, comments and a click box to add as a Shared element. Once complete, click Save Element.

Once your item has been added to the Saved Elements list, click on the item to view before adding it to your form.

SELECTION-CONTROL-SAVED-ELEMENT-GRAPHIC-IMAGE

SAVED-ELEMENTS-CHECKLIST-GRAPHIC-ELEMENT

Pro-Tip: How to Use Anchors to link to Tabs or Accordions

Linking to a specific panel using TABS OR ACCORDIONS

With so much content on one page, you may find you want to link to a specific panel rather than the page itself. Each panel has a built-in anchor link that you can use to automatically expand a particular panel on the page.

To find this link, visit the live version of the page with the Tabs or Accordion element. Right-click on the panel title and select “Copy Link Address” (Chrome), “Copy Link” (Safari), “Copy Link Location” (Firefox), or its equivalent in your browser of choice. On the Add Link menu, paste the link into the URL field.

Note: This link will not work for Tabs or Accordion elements that are inside of other Tabs or Accordion elements. Only panels that are initially displayed on the page when it is loaded will respond to the anchor link.

JUST FOR FUN: HTML 2 for 1: Flip Boxes & Photo Fun

Card Flip with Text

Hover over the image below:

SSAB

Students & Volunteers

Thank you to everyone!

Click Here

Embed Code for above flip box

Embed Code for above flip box

<div><meta content="width=device-width, initial-scale=1" name="viewport">
<style type="text/css">body {
font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</div>

<h3>Hover over the image below:</h3>

<p>Students & Volunteers</p>

<p>Thank you to everyone!</p>

<a href="https://athens.troy.k12.mi.us/">Click Here</a>
</div>
</div>
</div>

Adding basic HTML script to page to display news, event or photos in unique ways. Add this to your interior pages for exciting results

Stuck staring at your page thinking, "Ugh, my interior pages are dull, but I don't know how or have time to learn code".

No problem, I've done the work for you. After reviewing many of your pages, I've created a easy way to display photos with a twist (literally).

Change the photo (image must be in your Resources folder with title and alt text). Add text to the flip side, add a external/internal link. Remove or edit the Header and subtitle above the box.

Note: If you are using more than 1 photo flip on your page, the changes regarding color or styling will happen to all of them. The text can be different.

Check out the accordion below for a change to the code to add spacing around the body text and removal of the headers.

Custom Flip Box w/code

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

To change the photo in the flip box. Remove rotateY(180deg) from the code in the highlighted area, change the photo by clicking on the photo, then add the rotate back in the code.

If you want to rotate your image Vertically - change the rotation to rotateX(180deg). Just remember - you can't use both the Vertical and Horizontal flips on the same page. Since we don't have access to the full script that runs this page, adding multiple features can cause conflicts/error, so decide how you want your images to look and stick with 1 rotation and back panel color per page.

Embed code for Flip Box

Embed code for Flip Box

<div><meta content="width=device-width, initial-scale=1" name="viewport">
<style type="text/css">body {
font-family: Arial, Helvetica, sans-serif; margin: 0px; padding: 10px;
}

.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

.flip-card-back {
background-color: #ff6d05;
color: white;
transform: rotateY(180deg);
}
</style>
</div>

<p>   Quick way to display your photos,   tell a story and add some fun to your page!   </p>
<a href="https://photofunia.com/">Learn how to create this image</a></div>
</div>
</div>

Using up to 3 in a row

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

Just for Fun

Quick way to display your photos, tell a story and add some fun to your page!

Learn how to create this image

How to Change Snowflake HTML Animation to Other Icons

You can change the snowflake in the animation to any Windows 10 emoji. Just highlight the icon and replace it with one from the emoji keyboard. Click Windows + . at the same time. Select your icon and replace. You can also adjust the fall of the icons by changing the seconds in the keyframes section.

No need to change the word "snowflake" in the code. That is just a descriptor.

Change the icons and copy the code below into the Embed field.

Code for Animation

<div>
<style type="text/css">/* customizable snowflake styling */
   .snowflake {
   color: #fff;
   font-size: 1em;
   font-family: Arial, sans-serif;
   text-shadow: 0 0 5px #000;
   }

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
</div>

It's been a challenging few weeks for sure, and I'm sure you're pros at social distancing and getting creative with pantry staples. To spice things up (this doesn't require paprika or cinnamon from the pantry), I've added some Just for Fun features. No heavy learning, just fun, fun, fun! Enjoy and stay safe!

April Topics & Tips

Play Webmaster Word Search - Just for Fun!

Organization Anyone?

Our 1 Year Launch Anniversary is quickly approaching and along with that is the end of a school year. So, in next month's Blogger we'll discuss Best Practices for re-organizing, purging and archiving Resources. To get a head start, start reviewing and reorganizing now. Share your "Best Practices" for organizing - Contact Us today!

Contact Us!

Just for Fun - Cartoonize Yourself

Have fun this month and spice up the photos on your page. Cartoonize students, your principal or you can even cartoonize type or clipart. Let your imagination run wild.

Note: the free version adds a logo in the right lower corner (see Armida's picture to the right). I've had fun changing you all to cartoons - see below. I've cropped out the logo, as well.

Here's an example of how you can use it:

https://primacartoonizer.com/Prima-Cartoonizer/

Creating Fundraising Coupons - HTML

Chipotle Fundraiser

33% OF THE PROCEEDS GO TO TSD

We do more than just roll burritos. Each of our restaurants is committed to supporting local groups like neighboring schools, youth sports teams and non-profit organizations. One way we do this is by hosting fundraisers at our restaurants. BRING THIS COUPON OR SHOW IT WHEN YOU CHECK OUT AT CHIPOTLE AT (add restaurant address here).

Use Promo Code:

BOH232 (you can also add a QR code or barcode here)

Expires: Jan 03, 2021

Athens Charity Week

20% OFF YOUR PURCHASE

Lorem ipsum dolor sit amet, et nam pertinax gloriatur. Sea te minim soleat senserit, ex quo luptatum tacimates voluptatum, salutandi delicatissimi eam ea. In sed nullam laboramus appellantur, mei ei omnis dolorem mnesarchum.

Use Promo Code: BOH232

Expires: Jan 03, 2021

05/20/2021 - FUNDRAISER

25% OFF YOUR PURCHASE

Use Promo Code: BOH232

Expires: MAY 20, 2021

<div><meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">body {
font-family: Arial;
}

.coupon {
border: 5px dotted #bbb;
width: 80%;
border-radius: 15px;
margin: 0 auto;
max-width: 600px;
}

.container {
padding: 2px 16px;
background-color: #f1f1f1;
}

.promo {
background: #ccc;
padding: 3px;
}

.expire {
color: red;
}
</style>
</div>

<div class="coupon">
<div class="container">
<h3>Chipotle Fundraiser</h3>
</div>

<div class="container" style="background-color:white">
<h2>33% OF THE PROCEEDS GO TO TSD</h2>

<p>We do more than just roll burritos. Each of our restaurants is committed to supporting local groups like neighboring schools, youth sports teams and non-profit organizations. One way we do this is by hosting fundraisers at our restaurants.  BRING THIS COUPON OR SHOW IT WHEN YOU CHECK OUT AT CHIPOTLE AT (add restaurant address here).</p>
</div>

<div class="container">
<p>Use Promo Code:</p>

<p><span class="promo">BOH232 (you can also add a QR code or barcode here)</span></p>

<p class="expire">Expires: Jan 03, 2021</p>
</div>
</div>

Creating Drop Down Menus

Add lists, forms, web or page links to the menus.

Search/Filter Dropdown

Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.

<div><meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</div>

<h2>Search/Filter Dropdown</h2>

<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

<div class="dropdown"><button class="dropbtn" onclick="myFunction()">Dropdown</button>

<div class="dropdown-content" id="myDropdown"><input id="myInput" onkeyup="filterFunction()" placeholder="Search.." type="text" /> <a href="#about">About</a> <a href="#base">Base</a> <a href="#blog">Blog</a> <a href="#contact">Contact</a> <a href="#custom">Custom</a> <a href="#support">Support</a> <a href="#tools">Tools</a></div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}