Home

Download this help site
(PDF 80MB)

Download

Gadgets

What is a gadget?

A gadget is an element on a web page that displays content. The content can be static content such as text or a picture, or dynamic content such as a membership registration form, a blog, or a list of upcoming events.

 Read more/less

Gadgets are the building blocks of Wild Apricot site pages. Each page consists of one or more gadgets arranged within page-specific layouts or theme-specific placeholders.

A gadget can be inserted into a cell within a layout, or inserted above or below a layout. Gadgets can be added to individual site pages or to a page template so that all pages that use that template will automatically display the gadget.

Icon

For information on embedding Wild Apricot functionality on external websites, click here.

Inserting a gadget

Gadgets can be inserted a number of locations, including:

 Read more/less
  • into a cell within a layout, either within the page or within the page template used by the page
  • above or below a layout
  • above or below another gadget
  • into a placeholder within the page or page template
Icon

Placeholders are inherited by the page template from a master layout and define the areas where layouts and gadgets can appear.

To insert a gadget, follow these steps:

  1. Begin editing the site page or page template.
  2. Click the Gadgets icon to display the list of available gadgets. 

  3. Drag the gadget you want to insert from the Gadget list, and drop it on the desired location. 

     

    When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you begin dragging a gadget, possible destinations for the gadget appear blue. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. 

     

    When you drag a gadget above or below a layout or another gadget, a prompt will appear indicating that you can drop the gadget before or after the layout. 

Some gadgets – called singular gadgets – cannot be combined with other singular gadgets on the same page, and are therefore not available when editing templates or system pages. Once a singular gadget is added to a page – either directly or through the page template – all singular gadgets become disabled within the gadget list.

Controlling the content of the gadget

For most gadgets, the content is automatically retrieved and displayed. For content gadgets – displaying static rather than dynamic content – you add content to the gadget using the  content editor

 Read more/less

For example, the information displayed by a member directory gadget is extracted from your Wild Apricot database and displayed without further effort on your part. The appearance and behavior can be controlled using the gadget's settings, but the actual content of the gadget is automatically rendered.

To add content to a content gadget while editing a site page or page template, position your pointer over the gadget then click anywhere within the gadget.

Icon

The type of gadget is always identified when you hover over the gadget.

Once you have opened the content gadget for editing, you can add or modify text, picture, tables, links, and other content. Your changes will be reflected in the preview version of the page. For more information, see Using the content editor.

For some gadgets, such as the Facebook Like box gadget and Sharing buttons gadget, the gadget cannot be previewed in edit mode. To view these gadgets in action, you must save any changes to the page.

Gadgets added to a page template can only be modified while editing the template. Gadgets that cannot be modified while editing a page are marked by diagonal stripes.

Gadget settings: controlling appearance and behavior

By modifying a gadget's settings, you can control its appearance and behavior.

 Read more/less

For an event calendar gadget, for example, you can control the type of events to be included, the section labels, and the text to be displayed if there are no events.

Icon

The appearance and behavior of gadgets also depend on the current website theme and can be further customized using theme overrides and CSS customization.

Gadget settings appear in a panel on the left side (which can be hidden to maximize the page design area).

To display the settings panel, you position your pointer over the gadget – while editing a site page or a page template – then click the gadget settings icon.

In some cases, the content of a dynamic gadget can be affected by settings other than the gadget settings. For example, whether events appear on an event calendar gadget depend on the event detail settings for each event. Where a dynamic gadget displays a form – such as a membership application gadget – the fields that appear on the form will be drawn from the fields in your Wild Apricot database. You can customize the content of these forms by adding, removing, and modifying the fields in your Wild Apricot database.

Dynamic gadgets can also be affected by the settings of other related gadgets. For example, the forum categories that are used to group multiple forums within a forum summary gadget are set within the forum gadget's settings.

For some gadgets, the visibility of the data being displayed can be restricted to certain types of members. For all gadgets, access to the page on which the gadget appears can be controlled using the page settings.

Hiding the settings panel

To hide the settings panel, click the left chevron at the top of the panel.

To show the hidden panel, click the right chevron.

Common gadget settings

The gadget settings that are available depend on the gadget type, but a number of settings are available for most gadgets. These settings are described below.

Margins

By setting margins, you control how much space – in pixels – appears outside the gadget. You can set top, bottom, left, and right margins separately.

Icon

If you set vertical margins for adjoining gadgets, the margins will not be combined, but instead, the larger of the two margins will be applied. For example, if you set the bottom margin of the first gadget to 30 pixels and the second to 20, a margin of 30 pixels will separate the two gadgets.

Gadget title

If you specify a gadget title, the title will appear specially formatted within the gadget. Depending on the gadget style you choose, the title may appear in a heading box.

Icon

This setting is not available for all gadgets and themes.

Gadget style

The gadget style determines the physical appearance of the gadget. The style you choose will determine the color and format of the gadget title, the gadget content, and the gadget border.

You can choose from theme-specific styles and styles that are common to all themes. 

Icon

This setting is not available for all gadgets and themes.

Advanced settings

Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of a gadget. You can also use CSS in the same way to control the appearance of layouts and placeholders.

To display the advanced settings, click the triangle beside the Advanced heading.

The following advanced settings are available:

Option

Description

HTML ID

A unique identifier by which the gadget can be referenced within custom CSS or JavaScript code. The identifier is automatically generated but can be replaced with a more readable or memorable one (e.g. MyMemberApplicationGadget).

CSS class

The name of a CSS class defined on the CSS customization screen. You could, for example, enter the name myClass, where code similar to the following has been entered on the CSS customization screen:

Inline style

CSS code to control the behavior or appearance of the gadget. For example, you could enter width: 250px; to control the width of the gadget.

Controlling gadget dimensions

Normally, the width of a gadget depends on its content and the layout or placeholder in which it appears. For some gadgets, you can control the dimensions through their settings. For all gadgets, you can control the gadget width by entering the following code in the Inline style setting:

where the value of 250 can be replaced by whatever value you choose. 

Moving a gadget

To move a gadget to a different location, position your pointer over the gadget – while editing a site page or a page template – then drag the Move icon to the new location.

 Read more/less

You can move the gadget to an empty layout cell, or to a spot above or below a layout. 

Deleting a gadget

To delete a gadget – while editing a site page or a page template – position your pointer over the gadget then click the Trash icon.

 Read more/less

Icon

Deleted gadgets are not sent to the trash and cannot be restored from the trash.

Available gadgets

The following gadgets are available.

 Read more/less

Category

Gadget

Description

Blogs

 

Blog

Blog to provide updates and information to your membership

Recent blog posts

List of your most recent blog posts

Custom

 

Content

Text, graphics, links, and other custom content

Custom HTML

Embed external widget or insert other custom HTML or JavaScript

Donations

 

Donation form

Form that allows visitors to donate to your organization

Donation goal

Progress bar that measures progress towards donation goal

Events

Event calendar

List or calendar of current and past events

 

Upcoming events

List of upcoming events that links to event details

Forums

 

 

Discussion forum

Forum that allows members to post and reply to messages

Forum summary

Summary of the activity in your forum(s)

Forum updates

List of the most recent forum updates

Log in

 

Log in button

Log in button that links to an authentication page

Log in form

Controls to log in or out, reset password, and view profile

Membership

 

 

Member directory

Searchable list of members that links to individual member profiles

Membership application

Form to apply for membership in your organization

Subscription form

Form that allows visitors to sign up to receive email blasts

Multimedia

 

 

Google map

Google map pinpointing specified location

Photo album

Collection of pictures with thumbnail previews

Slideshow

Rotating set of pictures

Navigational


 

 

 

Menu

Links to site pages grouped into menus

Secondary menu(Blueprint, Bookshelf, Fiesta, Firma, Homestead, Showcase, Skyline, Tinted Tiles, Terra, and Whiteboard themes) Text links to internal or external pages

Breadcrumbs

Current location within the menu hierarchy

Navigation links

Text links to selected site pages

Sitemap

Text links to all pages within site hierarchy

Site searchSearch Wild Apricot site pages, events, blog, forums, and member profiles

Social

 

 

Facebook page

Embed a Facebook page

Facebook comments

Allow Facebook users to comment on your site page

Sharing buttonsButtons to share the page with social networks

Social profile

Buttons that link to your profile on social networks

Singular gadgets

Some gadgets – called singular gadgets – cannot be combined with other singular gadgets on the same page, and are therefore not available when editing templates or system pages.

 Read more/less

For example, you cannot combine an events calendar with a photo album on the same page. 

The following gadgets are singular gadgets:

  • Blog
  • Discussion forum
  • Donation form
  • Event calendar
  • Forum summary
  • Membership application
  • Member directory
  • Photo album
  • Subscription form 

What you can't do with gadgets

  • You cannot insert a gadget into another gadget. For example, you cannot insert a Google map gadget into a content gadget.
  • You cannot copy a gadget from one page or template to another, or within a page.
  • You cannot undo changes to a gadget or its settings.
  • You cannot restore a deleted gadget.


Using gadgets (5:03)

On this page: 


 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7