EvoCloud Templates

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


Website Settings can be specified in the Admin Administrator Menu. The following are examples of usage of Website Settings in templates:

  • {{request.website_settings.theme_site_name|safe}}
  • {{request.website_settings.theme_phone_number|safe}}
  • {{request.website_settings.theme_homepage_title|safe}}
  • {{request.website_settings.theme_logo_url|safe}}
  • {{request.website_settings.theme_logo_secondary_url|safe}}
  • {{request.website_settings.theme_footer_copyright|safe}}
  • {{request.website_settings.theme_address|safe}}
  • {{request.website_settings.theme_elocallink_code|safe}}

EvoCloud Widgets


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>

Alerts Widget: 

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>

Search Form Widget: 

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>';

Weather Widget: 

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>

Shrink Header on Scroll: 

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

Menu/CTA Widgets


Main Menu Widget: 

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>

NOTE: When you use a custom main menu specified by NAME, make sure that the name is entered in all lower case.

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).
Note: Couldn't get this to work, better to use the menu name and make sure it is all lower case like this working example: evo_param_main_menu_name__new_menu where "new menu" is the name of the menu.

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}
};

CTA Menu Widget: 

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>

CTA Dropdown Menu Widget: 

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>

Side Menu Widget: 

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"]

Calendar/Events Widgets


Upcoming Events Widget: 


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.

Calendar Mini/Small/With Events Widget: 

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

News Widgets


News Posts Widget: 

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);
}

News List Widget: 

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>

Map Widget (include the content of a map into a 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:
EvoCloudWidget MapID Homepage Example.png
<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>

Miscellaneous Widgets


Group Menu Widget

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__##">


Faq Widget

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__##">


FancyBox Image Popup Widget

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.

Simple Page Button Widget

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

}

Page Widget (include the content of a page into a div): 

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>

Newsletter Signup Widget: 

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>

Survey Widget: 

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>

Related Pages Widget: 

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>

Overlay Fade In Widget: 

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;
}

Slideshow Widget: 

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>

Media Folder Widget: 

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:

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>

Blog Categories

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>

Blog Archives

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>

Blog Posts

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>


Blog Recent Posts

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>

Template Tokens

  • If the user is logged in, you will have access to the user object, which has a lot of information. To get the full name use  {{ user.get_full_name }} 
  • {{ content }}  on base template, outputs the rendered interior template HTML. On interior templates, this outputs the rendered object content
  • {{ title }}  outputs the title of the object
  • {{ breadcrumbs }}  outputs the current object breadcrumbs
  • {{ css }}  outputs the CSS for the rendered object including all style sheets assigned to the interior and base templates
  • {{ seo }}  outputs the meta tags for keywords and description
  • {{ js }}  outputs the JavaScript for the rendered object including all scripts assigned to the interior and base templates
  • {{ date }}  outputs current date. Use {{ date.year }} for year, {{ date.month }} for month, {{ date.day }} for day.

Legacy Tags

While the following tokens may appear in templates, their use is being phased out and limited support is available.

  • {% alerts id %}  outputs a marquee of alerts. Takes the id of an Alert. There are several optional arguments. Here they are with their defaults: speed=3000 interval=3000 div_class='container' wrapper_class='alerts-wrapper' direction='up' pause='true'. Depends on {% load alerts_tags %}. Also, add the following CDN underneath the {{ js }} tag in your base template: {% js_cdn "https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" %}
  • {% news_posts %}  outputs news posts for the homepage. Takes an argument that controls the number of items: {% news_posts 8 %} will output eight items. Default is four. To remove thumbnail images from the posts, pass False as the second parameter: {% news_posts 8 False %}. It depends on {% load news_tags %}
  • {% css_cdn 'url-here' %}  outputs markup for CSS CDN link. Useful for getting around restrictions in Chrome. Depends on {% load theme_tags %}
  • {% slideshow slideshow_id=1 %}  creates a slideshow. Depends on {% load slideshow_tags %}
  • {% blog_archives id %}  outputs archives list. Takes the id of the blog. Depends on {% load blog_tags %}. Must be used with the blog_posts token in order to work correctly.
  • {% blog_categories id %}  outputs most recent blog categories. Takes the id of the blog. Depends on {% load blog_tags %}
  • {% blog_posts id=1 posts=10 chars=200, thumbnails=True %}  outputs most recent blog posts. Takes the id of the blog, number of posts and character count for the intro. Automatically paginates when the token is placed within the template that the blog permalink is set to. Depends on {% load blog_tags %}
  • {% child_links menu_id=1 occurrence=1 header='This is a header' %}  creates list of child links. Depends on {% load menu_tags %}
  • {% content_block id %}  outputs the content from a content block. Takes the id of the content block. Depends on {% load block_tags %}.
  • {% disqus_comments 'your-subdomain-here' %}  outputs discus comments. Use the subdomain that you choose when registering with disqus at disqus.com. Depends on {% load blog_tags %}
  • {% facebook %}  outputs a Facebook share button. It depends on {% load blog_tags %}
  • {% form_builder form_id=5 success_message='Thank you.' %}  outputs a form. It depends on {% load form_tags %}
  • {% home_events %}  outputs events for the homepage. Takes an argument that controls the number of items, and also takes an argument to control the number of characters in a summary: {% home_events 8 200 %} will output eight items with 200-character summaries. Default is four items with 300-character summaries. It depends on {% load event_tags %}
  • {% js_cdn 'url-here' %}  outputs markup for JavaScript CDN link. Useful for getting around restrictions in Chrome. Depends on {% load theme_tags %}
  • {% twitter %}  outputs a Twitter share button. It depends on {% load blog_tags %}
  • {% load page_tags %}{% rss url='url-here' name='rss-div' limit=5 %}  outputs items from an RSS feed. Takes the URL of the RSS feed you wish to diplay, name for id on the div, and a limit. The defaults are name='rss-div' and limit=5. Depends on {% load page_tags %}. Also, add the following CDN underneath the {{ js }} tag in your base template: {% load theme_tags %}{% js_cdn STATIC_URL|add:'scripts/jquery.zrssfeed.min.js' %}
  • {% render_region "region name" %}  creates a region in the template, into which content may be added via "template" tabs
  • {% rss 'url-here' %}  outputs an RSS feed. Takes the URL of the RSS feed you wish to diplay. Optionally, it takes a limit argument. The default is limit=5. Depends on {% load page_tags %}. Also, add the following CDN underneath the {{ js }} tag in your base template: {% js_cdn STATIC_URL|add:'scripts/jquery.zrssfeed.min.js' %}
  • {% search_form %}  outputs a site search form. Takes an optional argument to change the placeholder. For example, {% search_form 'Go' %}
  • {% twistcms_action menus.render_menu # %}  # = menu ID. Outputs rendered menu