You may use the following EvoCloud Widgets, tokens and website settings in your templates. EvoCloud widgets are divs with the evo_cloud_widget class that can be used to display data for your site. Template variables may be used to add specific information to your site, such as a logo, site title, or contact address.
Website Settings can be specified in the Admin Administrator Menu. The following are examples of usage of Website Settings in templates:
Evo Cloud Widgets are dependent on jQuery being loaded. They also require the following JavaScript to be run before they may be used:
<script>window.STATIC_URL = "{{ STATIC_URL }}"</script>
<script src="{{ STATIC_URL }}evo_common.js"></script>Example of Sliding Alert:
<div class="evo_cloud_widget evo_param_alerts evo_param_alerts_wrapper_class__alert-wrapper evo_param_alerts_direction__left evo_param_alerts_div_class__container evo_param_alerts_speed__8000 evo_param_alerts_interval__8000"></div> <div class="evo_cloud_widget evo_param_grid_alert_scroll evo_param_alert_title__TITLE_HERE evo_param_alert_speed__20 "></div> <div class="evo_cloud_widget evo_param_grid_alert_popup evo_param_alert_title__TITLE_HERE evo_param_always_initially_open"></div>
Example of Alert Message Box:
<div id="evo_alert" class="evo_cloud_widget evo_param_alerts evo_param_name__Global evo_param_alerts_wrapper_class__alert-wrapper evo_param_alerts_direction__left evo_param_alerts_div_class__container evo_param_alerts_speed__18000 evo_param_alerts_interval__18000 evo_param_alert_type__message_box"></div>
The search widget displays a search form on the page. To customize the search button [optional] define evo_widget_search_form_submit_html in the Evo Theme Configuration.
<div class="evo_cloud_widget evo_param_search_form [ OPTIONAL evo_param_search_placeholder_text__Search] "></div> Javascript: evo_widget_search_form_submit_html = '<i aria-hidden="true" class="fa fa-search"></i>';
The Weather Widget displays Current Weather Conditions for a site. It requires that the site Weather Data Source is set from the Control Panel, along with the Lat/Lon for the site. Currently on forecast.weather.gov is supported as a weather source for sites in the United States. If a Canadian weather widget is required, see Data Services - Environment Canada for instructions.
<div id="evo_weather_widget"> </div>
The Shrink Header on Scroll allows the logo to be resized, social and search boxes to be removed from the header, and a realignment of the header elements when scrolling.
<header id="evo_header" class="evo_cloud_widget evo_param_header_shrink_on_scroll">
The following variables may be set in the Configuration Script to affect the header behavior:
window.header_shrink_on_scroll_height = "100px" // Overall new height for the header element window.header_shrink_on_scroll_hide_evo_search = true // Whether to hide #evo_search window.header_shrink_on_scroll_hide_evo_social_cta = true // Whether to hide #evo_social_cta window.header_shrink_on_scroll_logo_scale = 0.5 // Attempts to scale both #logo and #evo_title_logo window.header_shrink_on_scroll_logo_translateY = "35px" // Moves the logo this many pixels down (negative values for up) window.header_shrink_on_scroll_margin_bottom_when_scrolling = "-110px" // Sets the bottom margin of the .evo_top_strip_wrapper element
The Main Menu Widget puts a main menu in the current page (typically used in the global template). Use evo_param_menu_depth_down__DEPTH to specify how deep the menu should display. For example:
<div id="main-nav-collapse" class="evo_cloud_widget evo_param_main_menu evo_param_menu_depth_down__2 navbar-collapse collapse">{{main_menu_root}}</div>The menu id may be specified for {{main_menu_root}} by adding main_menu_root_id__#Menu ID# in the template (for example, in a comment).
This widget requires that a configuration variable be set in Javascript, this may be done in a script that is associated with the global template. An Example configuration is:
var evo_main_menu_configuration = {
// main_menu_default are the default values for each heading
'main_menu_default': {'number_of_columns': 4, 'overall_height': 500, 'side_margin': 10, 'additional_width': 5, 'left_side': -15}, "0": {'top': 300, 'bottom': 500}, "1": {'top': 10, 'bottom': 500}, "2": {'top': 10, 'bottom': 500}, "3": {'top': 10, 'bottom': 500},
// additional headings may be specified by using the heading text in lowercase (with '_' substituted for any spaces)
'government_offices': {'overall_height': 400, 'side_margin': 40, 'number_of_column': 8},
'government_offices_0': {'top': 5, 'bottom': 5}, 'government_offices_1': {'top': 25, 'bottom': 700},
'government_offices_2': {'top': 25, 'bottom': 700}, 'government_offices_3': {'top': 25, 'bottom': 700}
};The CTA Menu Widget puts a menu in the current page without performing the additional tasks done in setting up a main menu. Use evo_param_menu_depth_down__DEPTH to specify how deep the menu should display. For example:
The name (partial matches ok) may be specified with the parameter evo_param_menu_name__NAME. Underscores in the menu name should be substituted for spaces.
<div class="evo_cloud_widget evo_param_cta_menu evo_param_menu_name__CTA_Menu"></div>
The CTA Dropdown Menu Widget puts a menu in the current page that can be opened either by clicking on each heading over hovering over each heading (if the evo_param_dropdown_menu_over class is specified). For example:
<div id="evo_bottom_cta" class="evo_cloud_widget evo_param_dropdown_menu evo_param_dropdown_menu_hover evo_param_cta_menu evo_param_menu_depth_down__2 evo_param_menu_name__Bottom_Action"> </div>
The Side Menu Widget puts a side menu in the current page from the menu system, using a menu item matching the current URL. The Side Menu widget is intended to use for pages that are in the main menu. If a link to the current page does not exist in the side menu, no menu will appear. Use evo_param_menu_id to specify a specific menu id [default is to use the lowest id matching menu].
<div class="evo_cloud_widget evo_param_side_menu [OPTIONAL]evo_param_menu_id_5 [OPTIONAL Default=1]evo_param_menu_depth_up_2 "></div> CSS Classes: "side_menu_current_page current-page" The current page "side_menu_on_path" Path through the menu to get to the current page "side_menu_sibling" Menu Sibling to the current page "side_menu_other" Not in any of the other 3 categories "evo_param_all_visible" Open all branches in the menu by default "evo_param_external_new_tab" Open external links in new tabs [target="_blank"]
Example of home page event box using this widget.
The Upcoming Events Widget downloads a bootstrap table of upcoming events that match the specified calendar ids [or all calendar ids].
Use evo_param_upcoming_events_month_separator to group the events by month, with a month name title span.
This example will show ALL events from the CMS in a block. <div class="evo_cloud_widget evo_param_upcoming_events__all"></div> This example will show events from calendar IDs 5, 7, 9, and 12. <div class="evo_cloud_widget evo_param_upcoming_events__5_7_9_12"></div> <div class="evo_cloud_widget evo_param_upcoming_events__5_7_9_12 evo_param_upcoming_events_month_separator"></div>
<div class="evo_cloud_widget evo_param_upcoming_events_only__all"></div> <div class="evo_cloud_widget evo_param_upcoming_events_only__5_7_9_12"></div> <div class="evo_cloud_widget evo_param_upcoming_events_only__5_7_9_12 evo_param_upcoming_events_month_separator"></div>
<div class="evo_cloud_widget evo_param_upcoming_meetings_only__all"></div> <div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12"></div> <div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12 evo_param_upcoming_events_month_separator"></div> <div class="evo_cloud_widget evo_param_upcoming_meetings_only__5_7_9_12 evo_param_upcoming_events_month_separator evo_param_days_in_future__365"></div>
To change the number of characters in events, add evo_param_description_number_of_characters__200 where "200" is the number of characters.
The Calendar Small Widget displays a monthly calendar. Each day with matching events will have a * that links to the calendar list view, displaying all events for that day.
<div class="evo_cloud_widget evo_param_calendar_small__events_all"></div> <div class="evo_cloud_widget evo_param_calendar_small__events_5_7_9_12"></div>
<div class="evo_cloud_widget evo_param_calendar_mini__events_all"></div> <div class="evo_cloud_widget evo_param_calendar_mini__events_5_7_9_12"></div>
<div class="evo_cloud_widget evo_param_calendar_with_events evo_param_calendar_title__concerts evo_param_calendar_title__council_meetings"></div> <div class="evo_cloud_widget evo_param_calendar_with_events evo_param_calendar_id__27 evo_param_calendar_id__28 evo_param_calendar_title__council_meetings"></div> <div class="evo_cloud_widget evo_param_calendar_with_events evo_param_home_page_calendars"></div>
The grid calendar widget displays a full grid calendar on the page with the matching events. Only a single grid calendar widget may be used on an individual page.
<div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__10"> <div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__10_20_21"> <div class="evo_cloud_widget evo_param_grid_calendar evo_param_calendar_ids__all">
The News Post Widget downloads recently published news items into divs that can be formatted using CSS. News posts will be shown for categories that have "use_on_homepage" checked and that are currently published.
<div class="evo_cloud_widget evo_param_news_posts evo_param_news_posts_limit__4 evo_param_news_posts_show_thumbnails__true "></div> evo_param_news_posts_limit__[##] Limits the posts to the number specified, the default is 4. evo_param_show_thumbnails__[true or false] Specifies whether thumbnail images will be shown with the posts. evo_param_news_posts_include_html__[true or false] Specifies whether HTML tags should be stripped out of news post content evo_param_news_category_ids__25_30_40 Specifies a specific news category <div class="evo_cloud_widget evo_param_news_posts_columns evo_param_news_posts_limit__4 evo_param_news_posts_show_thumbnails__true [evo_param_heading_on_top]"></div>
The News Posts Widget may also be used with a Carousel. This is an example of the widgets as a carousel:
<div class="carousel slide" id="news_posts_carousel"> <ol class="evo_param_news_posts_get_carousel_indicators evo_cloud_widget carousel-indicators"> </ol> <div class="evo_cloud_widget evo_param_news_posts evo_param_news_posts_limit__4 evo_param_news_posts_show_thumbnails__true evo_param_news_posts_mode__normal carousel-inner"></div> </div>
Associated CSS For this carousel may include:
#news_posts_carousel .carousel-indicators {
margin-bottom: -40px;
}
#news_posts_carousel .carousel-indicators li {
background-color: rgba(255, 255, 255, 1.0);
border-color: rgba(30, 30, 30, 1.0);
}
#news_posts_carousel .carousel-indicators li.active {
background-color: rgba(130, 130, 130, 1.0);
}The News List Widget downloads recently published news items into divs that can be formatted using CSS. Default is for the past 120 days.
<div class="evo_cloud_widget evo_param_news_list"></div> <div class="evo_cloud_widget evo_param_news_list evo_param_news_max_age_days__365"></div>
The Map Widget downloads the content of a map with an id that matches the specified id and puts it into a div. Only one of these widgets may be used on a page. It is not recommended to use this with a full screen map or an image mode map. The div will be populated with the main map if a matching map is not found on the site.
<div class="evo_cloud_widget evo_param_mapid_20"></div> Example with styling:<div class="evo_cloud_widget evo_param_mapid_3" style="margin-top: 400px;width: 50%;transform: translateX(50%)"></div> <style>#evo_map_left_legend {display:none !important;} .evo_place {display:none;} #evo_map_popup {top: 0px !important;}</style>
The Group Menu Widget allows a Group Side Menu to be placed in any page or another container. A group ID must be specified, otherwise the widget will be empty. The Group Menu will be inserted as a "child element" to the Widget div.
<div class="evo_cloud_widget evo_param_group_menu evo_param_group_id__##">
The FAQ Widget allows an FAQ to be placed in a page or another container. If section ids are not specified, then all sections will be displayed.
<div class="evo_cloud_widget evo_param_faq evo_param_faq_section_ids__##_##_## evo_param_faq_id__##">
This is a popup slideshow used in pages. This requires the following script and stylesheet to be added to the <head> of the Global Template.
<link rel="stylesheet" href="https://cdn.evo.cloud/lib/fancybox/3.5.7/dist/jquery.fancybox.min.css" /> <script src="https://cdn.evo.cloud/lib/fancybox/3.5.7/dist/jquery.fancybox.min.js"></script>
Add the following code to the source of the page (typically wrapped in a <p></p> tag)
<a data-fancybox="identifier" href="full_image_url"><img src="small_image_url" /></a>
The "identifier" is used to group each slide. Use the same identifier for each image. Multiple identifiers can be used on the same page to create multiple slideshows.
The "full_image_url" is a link to the large image file that opens in the popup.
The "small_image_url" is the thumbnail in the page used as the trigger to open the popup. Can be a small image file or the full image file resized by adding ?width=300 to the end of the URL string.
<p><a class="button" href="/link-url">Click Here</a></p>
This widget requires that the below CSS be added. Styles can be customized to mach website design theme/colors.
.button {
background-color: #ddd;
color: #000 !important;
padding: 5px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: solid 2px #999;
}
.button a {
color: #fff !important;
}The Page Widget downloads the content of a page with an id that matches the specified id and puts it into a div. Multiple of these widgets may be used on a page. The div will remain empty if a page with the specified id is not found on the site.
<div class="evo_cloud_widget evo_param_pageid_20"></div>
The Newsletter Signup Widget downloads a newsletter signup form and includes it in the page.
<div class="evo_cloud_widget evo_param_newsletter_signup"></div>
The Survey Widget allows a survey to be embedded into a page.
<div class="evo_cloud_widget evo_param_survey [evo_param_survey_name__SURVEY_NAME] [evo_param_survey_id__SURVEY_ID]"></div>
Example with styling:
<div class="evo_cloud_widget evo_param_mapid_3" style="margin-top: 400px;width: 50%;transform: translateX(50%)"></div>
<style>#evo_map_left_legend {display:none !important;} .evo_place {display:none;} #evo_map_popup {top: 0px !important;}</style>The Related Pages Widget displays a list of related pages to the current page. Normally a menu with "main" in its name will be used; the menu id may be specified to override the default menu.
<div class="evo_cloud_widget evo_param_related_pages [OPTIONAL]evo_param_menu_id_5"></div>
Usage: Some sites that use video in their slideshows may need a couple more seconds to load the video so that it begins to play.
This is a fade-in effect that starts with a blacked out screen, and then the website fades into view, providing the delay needed for the video to load.
<div class="evo_cloud_widget evo_param_overlay_fade_in evo_param_start_delay__2000 evo_param_step__0_1 evo_param_step_delay__100 "></div>
It requires the following CSS:
.evo_param_overlay_fade_in {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,1);
z-index: 25000;
}The Slideshow widget cycles through a set of slides, typically images.
<div class="evo_cloud_widget evo_param_slideshow [OPTIONAL evo_param_slideshow_id__5] [OPTIONAL evo_param_slideshow_name__home]"></div>
The Media Folder Widget displays a tabular list of the files in a folder, including links to each file, descriptions, sizes, and date updated.
<div class="evo_cloud_widget evo_param_media_folder [evo_param_reverse_sort_folders] [evo_param_hide_root_folder]" data-evo_media_folder_path="[PATH TO FOLDER]"></div>
Tickets allow functionality such as user contacts that can be emails to email contact lists. Current Ticket Functionality includes:
<div class="evo_ticket evo_param_contact_us"></div>
<div class="evo_ticket evo_param_contact_us_without_department"></div>
The Blog Categoires widget allows displaying a list of matching Blog Categories:
<div class="evo_cloud_widget evo_param_blog_categories evo_param_blog_id__1"></div> <div class="evo_cloud_widget evo_param_blog_categories evo_param_blog_title__City_Blog"></div>
The Blog Archives widget allows displaying a list of matching Blog Post Links:
<div class="evo_cloud_widget evo_param_blog_archives evo_param_blog_id__1"></div> <div class="evo_cloud_widget evo_param_blog_archives evo_param_blog_title__City_Blog"></div>
The Blog Archives widget allows displaying a list of matching Blog Post Links:
<div class="evo_cloud_widget evo_param_blog_posts evo_param_blog_id__1"></div> <div class="evo_cloud_widget evo_param_blog_posts evo_param_blog_title__City_Blog evo_param_number_of_posts__25 evo_param_characters__500 evo_param_thumbnails__true evo_param_intro_only__false"></div>
Displays Recent Blog Posts in one or multiple categories
<div class="evo_cloud_widget evo_param_recent_blog_posts evo_param_blog_posts_limit__25 evo_param_blog_posts_show_thumbnails__true"></div> <div class="evo_cloud_widget evo_param_recent_blog_posts evo_param_blog_posts_limit__25 evo_param_blog_posts_show_thumbnails__false evo_param_blog_category_ids__33_40"></div>
Links to Scripts and Style Sheets
Scripts and Style Sheets may be linked to using URLS in the format of:
<link rel="stylesheet" href="/evo_theme/css/[STYLESHEET_ID].css" type="text/css">
<script src="/evo_theme/js/[SCRIPT_ID].js"></script>
While the following tokens may appear in templates, their use is being phased out and limited support is available.