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>

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>

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>

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>

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>

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>

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

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>

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.

<div class="evo_cloud_widget evo_param_upcoming_events__all"></div>
<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.

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

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

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

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>

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>

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>

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>

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

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>

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.
  • {% 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 %}
  • {% 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' %}
  • {% 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' %}

Legacy Tokens

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

  • {% js_cdn 'url-here' %} outputs markup for JavaScript CDN link. Useful for getting around restrictions in Chrome. Depends on {% load theme_tags %}
  • {% 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" %}
  • {% twistcms_action menus.render_menu # %} # = menu ID. Outputs rendered menu
  • {% search_form %} outputs a site search form. Takes an optional argument to change the placeholder. For example, {% search_form 'Go' %}
  • {% 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 %}