Follow

Mobile Website Setup

We are very excited to announce the initial release of mobile-optimized websites to your district.

In this initial release, when accessing your district's site on smart phone or tablet browsers, users will find:

  • Upcoming Events
  • Announcements
  • Breakfast/Lunch Menu
  • Staff Directory
  • District Contact Information
  • Quick Links

Additionally, if users want to view the desktop version of the website, they can click on "View Desktop Version" to switch to see the full site as is seen on a desktop web browser. Any sections that don't contain information (ie. no Breakfast/Lunch Menu entries in the Lunch Menu Admin), the section will not be visible.

You can use the new "ThemeRoller" application on the Settings screen within the CMS4Schools Admin to customize the colors of your mobile website. Note: ThemeRoller is not supported in Internet Explorer. Finally, you can upload your district logo to the "Mobile Site" category within the Banner Graphic Library to have it replace the district name at the top of the mobile site.

  • Quick Links have now been added to the mobile website.  

How do I enable the mobile site?

How do I enable the mobile site?

From the left-side navigation bar, choose Mobile Settings.

  1. From the "Mobile Site Enable" dropdown menu, select "Enabled".
  2. Design your color scheme from the "Mobile Custom Theme" after choosing "Enabled" from the dropdown. (Details below)
  3. Check the modules you want to display on your mobile website. You may modify the titles for the modules.
  4. Click on "Update" at the bottom of the page to save your changes.

A Quick Links section can be added to your mobile site by clicking Mobile Additional Tools at the top right.  Quick Links are described in the following step.

You can choose to disable the mobile site after enabling it if you wish by going through the same steps above, but selecting "Disabled" from the Mobile Site Enable dropdown menu.

Adding a Resource/News Tool/Quick Links to a Mobile Site

Adding a Resource/News Tool/Quick Links to a Mobile Site

After clicking Mobile Additional Tools, the above screen displays.

Currently only one Resource News Tool, used to create a "Quick Links" section, can be added to your mobile site.  If it is grayed-out, it simply means the tool has already been added.

To add a Quick Links section to your mobile site, click Add.

Adding Items to Quick Links

Adding Items to Quick Links

This Resource/News Tool may be used to add any one of four different resource types.

  1. None- title is not linked (used as a label)
  2. Link to an Internal Webpage
  3. Link to a Website and can be opened in a new or the existing browser window
  4. Link to a file

Note: This is the same Resource/News tool used in the Main Body and Right Side of your main  website and faculty pages. If you need more detailed instructions for using this Resource/News tool see the help document at https://support.4schools.net/entries/23186362-Resource-News-Page-Detail-Main-Body-

 

Mobile site with Quick Links

Mobile site with Quick Links

Displayed above is a mobile site viewed on a tablet with Quick Links included.

Notice the Link to a File - title not linked is the only one without a hyperlink.

Note that there is a View Desktop Version button should the viewer prefer to see your whole site.

Mobile Custom Theme - ThemeRoller is not supported by Internet Explorer - Please use Chrome, Firefox or Safari

Mobile Custom Theme - ThemeRoller is not supported by Internet Explorer - Please use Chrome, Firefox or Safari

Be sure you are using a compatible browser, Chrome, Firefox or Safari when you create your custom mobile site. Click the Launch Custom ThemeRoller link.

Custom ThemeRoller

Custom ThemeRoller

The Custom ThemeRoller gives you a work palette.

  1. Start by reading the the concise overview by clicking on the Help Center Link.
  2. Turn on the Inspector. This will expand the appropriate area on the left to show the details of the changes you make.
  3. Use the slide on the Lightness and Saturation bars to vary the palette. Drag a color down to an area of the "mobile phone" template. Repeat until you are satisfied with your theme.
  4. Click the Save and Update button. Click on "Yes", then "OK" and then close the ThemeRoller window when it is done refreshing.

Sample ThemeRoller with Color Changes

Sample ThemeRoller with Color Changes

Note the expanded area on the left because the Inspector was on when colors were dragged to the mobile phone template.

Mobile Website Screen Shot from an iPhone

Mobile Website Screen Shot from an iPhone

Since this is a testing site used to create this document there were no current Upcoming Events, Announcements or Menus available so those modules are not displaying even though they were checked in the setup. If current events, announcements or menus were added to the site they would display on the mobile version of the website.

Note that there is a View Desktop Version button should the viewer prefer to see your whole site.

Adding a Banner to the Mobile Website

Adding a Banner to the Mobile Website

To add a banner to your mobile website:

In your main website admin click on the left side link Banner Library, then click on the Add Banner link.

  1. Key in a title for the banner.
  2. Select  Mobile Site from the page category dropdown.
  3. Upload the banner file. The on screen directions give you the size and file format limitations. If the format is .swf be sure to add the height and width.
  4. Click the Add button.
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk