All about gadgets

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

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.

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

Inserting a gadget

Gadgets can be inserted a number of locations, including:

• 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

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.

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.

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

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.

The appearance and behavior of gadgets also depend on the current website themeand 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.

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.

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.

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:

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:

.myClass .artBoxTitle {
  font-family: georgia;
  text-shadow: 1px 2px 1px rgba(0,0,0,0.6);
}

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 size/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:

width: 250;

where the value of 250 can be replaced by whatever pixel 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.

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.

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

If you're unable to delete a gadget from a site page, it might be because the gadget was added to the page template rather than the page. Trying removing the gadget from the page template, assuming you don't want it to appear on any of the pages that use that gadget.

Available gadgets

The following gadgets are available.

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.

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.
• You cannot add a gadget to an email or email template.