Click for Menu

Website Documentation

TABLE OF CONTENTS

WEBSITE MAINTENANCE: Schedule and Owners

Ionos is our site’s domain hosting service

WordPress is our website builder

Home Page

About

Registration 

Sponsors 

Volunteer

Contact

Calendar (A link to Google Calendar maintained by ???)

Password Protection

Using Media

Reduce photo sizes

Fonts and Colors <needs attention>

Fonts

Color palette

Using CSS Codes

Duplicate a page

Formatting Text

Creating Hyperlinks via Elementor Text Editor

Hyperlink color. When editing text to display hyperlinks in color (via Elementor) first access the Text menu and click the toggle icon  then choose “Royal Blue” as the color for hyperlinks.

Open Link in New Tab. To make sure the chosen link will open in a new tab capture the text that identifies the linked site/content then 1-2-3!

Adding items to Menu

 

Info@stormbots.com & email accounts

Pages

Miscellaneous

Getting rid of a page title/label

========================================================================

 OUR WEB HOSTING SERVICE

      1. Login

      1. Jamy  is the registered agent for KFD non-profit
        1. Jamy has the login and password information
        2. Jamy has been funding the annual subscription service to Ionos
        3. ??? is the month for renewal of our service contract
      2. I have found their support to be outstanding, email turnaround on support issues  is usually within 24 hours or less. Their chat channel staff are great to work with on real-time issues. 
      1. WordPress is used to build over half of all websites on the internet. A team of students at Skyview High School selected this website builder because it is easy to use and they redesigned their own website with in in 2018 and the KFD website in 2019. 
      2. We also use the editing plugin Elementor; that is, Elementor is a plugin to WordPress’ functionality. 
      3. Very good  tutorials on the Elementor YouTube channel 
      4. When you log in to Ionos, you can click on the WordPress button to begin editing. From there,  you will see a WP installation in https://klineline-kf.org/ 
    1. There are numerous email addresses, in addition to the generic “info @klineline-kf.org/”
    2. ??? is the administrator of those accounts 
    3. Most of the accounts are auto forwarded to ???
    4. List of accounts

 

From this panel, you will be able to edit or take over the website in case of a situation where you cannot log in through traditional /login access..

WEBSITE FORMATTING STANDARDS

These are the fonts we should standardize on throughout the website. They were chosen by Jorge, Riley and Ben in 2019 when they redesigned the website. 

    1. Access palette via Elementor drop down menu and choose: Site Settings then Global Fonts
      1. Primary Headline: Roboto [600 weight]
      2. Secondary Headline: Roboto Mono [400 weight]
      3. Body Text: Oswald  [400 weight]
      4. Accent Text: Oswald  [500 weight]

These are the colors we should standardize on throughout the website. I obtained them by checking the Skyview High School website’s source code. 

  1. Access palette via Elementor drop down menu and choose: Site Settings then Global Colors
    1. Primary color is: #203480 “Skyview dark blue”
    2. Secondary color is: #9eaBab  “Skyview Dark Gray 1”
    3. Text color is: #747474 “Skyview Dark Gray 2”

 

Color Description

(names are not official)

 Color Picker # Web Reference
Skyview dark blue #203480 https://rgbcolorcode.com/color/203480
Skyview Dark Gray 1 #9eaBab https://rgbcolorcode.com/color/9EABAB
Secondary colors from the Skyview Website
Skyview dark blue 2 #003399 https://www.color-hex.com/color/003399
Skyview SIlver #eae9e9 https://www.color-hex.com/color/eae9e9
Skyview SIlver Gray #d9dadb https://www.color-hex.com/color/d9dadb
Skyview Dark Gray 2 #565656 https://www.color-hex.com/color/565656
Skyview Sky Blue #a3caff https://www.color-hex.com/color/a3caff
Skyview Dark Gray 3 #747474 https://www.color-hex.com/color/747474
Page Frequency of Update Last Update: Current Owner Trainee
Home After competitions, events, anything noteworthy Ben ?
About Jorge/Phil ?
Meet the seniors Once or maybe twice a season Riley ?
Meet the Mentors Once or maybe twice a season Riley ?
Alumni Phil ?
Team History 03/11/21 Hannah ?
Sponsors Once at start of season, once after sponsors night Phil ?
Support the StormBots Phil ?
Competitions After calendar update/kickoff day, at end of season Ben
Current Season After kickoff, after fitting event Jorge ?
Past Games Once at end of each season Phil ?
Awards After every competition Ben
Blog:  Weekly during build season; monthly during rest of school year Riley Anthony
Contact Us

-info@stormbots.com

-need owner for EACH subteam

 Weekly all year Ben  Check with Mr Hansen for access to emails for the team…. 
In The News As articles appear  Riley ?
Calendar At start of build season, before outreach/sponsor events occur Jorge ?
Team members only Restricted login Phil

 

The home page is the “landing page” where visitors first experience the team’s brand. This page should explain in brief verbal form and with bright, simple visual imagery who we are, why we exist (the FIRST Inspire message), and what we do. It should set the tone for building visitor support for the team. 

    1. Header photos: this should change EACH YEAR and reflect the most recent team achievements. Keep it simple, no more than 4-6 images. 
    2. Who we are: always position us as FIRST Robotics Competition Team 2811 with Skyview High School as home base
  1. “Eye of the Storm” sponsors, how they help us and our thanks! [these are the top donors as of date TBD]
  2. Countdown timer to World’s!! 
  3. Latest news (link to Blog)  There should be a link to an Archive. 

The landing page serves to provide information about the team, its history, and organization. It contains tab links to sub-pages about the team.Lead photo: should be a recent photo of the team in action, at an event, working with mentors or the like.  

  1. Current team history graphic contains information that should be updated each year; of course, other ways to present this information can certainly be used, just keep it simple and avoid multi-page down scrolling. 
  2. Team organization: sub-team descriptions and contact email. 
    1. Update each season by getting new pix of seniors at work and by interviewing seniors asking these four questions:
      1. “Why did you join StormBots?” (this one won’t always get used on website; only use acceptable answers)
      2. “What college are you planning to go to, and for what degree?” (if they aren’t fully certain, try to get an idea of what they’d like to do)
      3. “What career field are you hoping to get into?” (this one is likely to be dependent on the college question)
      4. “What skills from StormBots do you think will help you with these goals?” (this is the one that sells it all, so try to get a good answer out of them)
    2. Always make sure to not include their last name (just last initial), so have everything ordered alphabetically by first name. Also include subteam and, when applicable, mention if they have a larger roll on the team (i.e. Captain, CIT, or on Drive Team).
    3. Get a clear  photo minimizing distracting background showing the senior looking up from working on something. See photo → 

 

      1. NEEDS TO BE DEVELOPED BEFORE NEXT SEASON 
      2. Follow similar format as seniors; need photos. Here’s the link to the SurveyMonkey questionnaire sent to mentors in March 2019 and can be used as a starting point.
      1. This subpage currently presents results from the first alumni survey sent to about 20 former StormBots; IT CAN BE REVISED AND SENT TO ALL ALUMNI ON RECORD FOR 2019-2020 season
      2. Comments from the survey can be used throughout the website and other marketing promotions to
      3.  illustrate the lasting benefits of the FIRST experience. 
      4. The survey to ALL former alumni should be undertaken once, not every year. 
      5. Every year seniors should be interviewed (Meet Our Seniors) and their responses used. 
      6. Be sure to get seniors’ email addresses and add them to the database!
      7. Here’s the link to the SurveyMonkey questionnaire used in 2019
      8. Here’s the link to the file with last known email addresses 
      9.  In the future is might be nice to do a more in-depth follow up story on 1-2 alumni each year 
    1. The current page is a simple WordPress timeline which uses the current year’s yearbook photo and a simple summary of the highlights of the past season.  
    2. Here’s a brief video tutorial of how I did it. 

The landing page immediately displays our sponsors to show who they are and how they help the team through their funding, donations of materials (in-kind donations), mentors/volunteers, etc. Sponsors are listed top-to-bottom based on their seniority as a sponsor of the team, the longest running sponsors at the top and the more recent at the bottom. It is critical to keep this page up-to-date! 

      1. I created another video tutorial on how to add/delete entries and edit entries. 
      2. Basically, I  started with the 4 block page layout then formatted each block or cell as I wanted and then populated each cell with appropriate logo, a statement about the company from their website on the front side and then entered their sponsorship level and a brief paragraph on how their sponsorship helps our tea, on the backside.
        1. Get the company logos from their website and add to the Elementor Library. DO NOT ADD OR CHANGE ANYTHING ABOUT THE LOGO!!
      3. You need to review and edit the sponsor list each year to update the list. You can simply add new sponsors at the bottom, adding a new row by simply duplicating the one above and then editing the individual cells. 
      1. This page is broken into five (5) sections
        1. RATIONALE: The reason we seek their support; we borrowed the narrative from FRC Team 492, The Titans with some minor changes.
        2. TESTIMONIALS: from our alumni their statements were obtained via the Alumni survey sent to 20 graduates in 2019. In the future, you can get testimonials when any come for a visit.
          1. Pictures were obtained from the team collection on Google Drive
          2. These testimonials should be changed up a bit year to year
      1. INCOME AND EXPENSES (also called “Sources and Uses of Funds”). We want to show where the money comes from and how the team uses it to fulfill the mission and vision of FIRST robotics. 
        1. There needs to be a connection with any Go Fund Me campaign
    2. THIS PAGE NEEDS TO BE BETTER SUBDIVIDED!!

The landing page immediately displays how to follow the team during the competition season with links to the Blue Alliance and our YouTube channel. This section serves to document the current season’s game challenge, the events we participate in, past game themes and awards the team has won. 

      1. Description of the year’s challenge with links to FIRST for video
      2. Is an Elementor Timeline (insert documentation/screen captures here) and contains the following information for our visitors
        1. SUGGESTION: Archive the previous year’s page by renaming it, for example “2019 Current Season” and the edit the existing “Current Season” page with Elementor to update for the actual current season specifics. 
        1. Schedule of events from: 
          1. https://www.firstwa.org/
          2. https://ortop.org/
          3. https://frc-events.firstinspires.org/
        2. Where to find our pit 
          1. Will be found usually on ORTOP or WA FIRST
        3. Live feed (day of event)
          1. Blue Alliance
          1. https://frc-events.firstinspires.org/
        2. Rankingshttps://frc-events.firstinspires.org/
        1. https://frc-events.firstinspires.org/
    2. Photos and descriptions
      1. This year’s robot (get a clean photo without background)
        1. List of strengths and capabilities
      2. The Drive Team, Pit Crew and Competitive Intelligence Team
      3. Team captains
  2. Past seasons description, logo and photo of the robot
  3. Awards received 
        1. During off-season, make blog posts whenever something important happens, and try to do at least one a month to make sure that, most importantly, our partners know what we’re doing. It’s also great practice for the more important build and competition seasons.
        2. During build season, make blog posts whenever something important happens, and definitely at least once a week — interview people on build teams to make sure you post accurate information.
        3. During competition season, make blog posts whenever something important happens, and definitely one for each competition. If you miss one of the competition days, interview someone who was there and use TheBlueAlliance to find out what happened.
        4. During post season, make blog posts whenever something important happens, and definitely one at the end of the season doing a summary of what happened throughout our year.
      1. Go to Pages in navigation bar
      2. Go to second section and find the Team Members page–it shows as password protected. 
      3. Choose Edit  (DO NOT CHOOSE Edit with Elementor)
      4. Choose Visibility on the right hand pop up menu
        1. Choose Password Protected and change password in the pop up box
        2. Be sure to communicate changes to students via email

 

UPDATING PAGES

      1. For faster loads and file size. Always reduce the size of the photo prior to uploading to WordPress. Only upload the largest resolution you need.

 

 

CODE What it does Where it goes
.site { opacity:0.88;} Changes opacity of background image by  changing the number In Theme: Customization 
a{color:green}

a:hover{color:black}

(or, elementor style kit plugin)

 For site-wide link color changes, this can be done with two lines of CSS You can use color names or color hex for your colors, and place the CSS in the theme customizer or in the style.css file in your child theme.

 

      1. To duplicate an existing page as a template to edit in new material, use Elementor…. This will create Draft version which will remain hidden until you hit the Publish button. 

Creating Hyperlinks via Elementor Text Editor

  1. Hyperlink color. When editing text to display hyperlinks in color (via Elementor) first access the Text menu and click the toggle icon  then choose “Royal Blue” as the color for hyperlinks. 

 

Adding items to Menu

 

When editing the menu, make sure to have the “Menu (Main, Top Bar, Mobile)” selected. For modifying or deleting an item, click on the gray arrow in the right of the item and edit or delete as necessary. For adding a new item, select the page or link to add in the “Add a new item” box. 

Make sure to click SAVE MENU  after this process.

 

 

NEEDS ATTENTION

Pages

SPONSORS

How to get involved

Benefits of sponsorship

Sponsor logos

How we responsibly use sponsored funds, materials and mentors

Archive link 

COMPETITIONS

TEAM INFO

 

Miscellaneous

What follows are RANDOM thoughts about designing and maintaining the team’s website using WordPress.org and the Elementor editing plug-in. 

 

  1. Do not use full student names. First name only (plus initial of last name as an option).
  2. Try to minimize the amount of multi-screen/page down scrolling for any given page
  3. Every page should have a photo or two of students at work, learning
  4. To save/copy a SurveyMonkey questionnaire (questions only), right-click, choose Print then Change Destination from your printer to “Save to Google Drive” where you can retrieve/move it to Shared Folders. 

Screencast-o-matic:  (for capturing “how to” demo video and narration)

Getting rid of a page title/label