26 posts categorized " Tips and Tricks"

11/19/2018

Introducing the Wild Apricot Text Manager

Wild Apricot Text Manager logo
Wild Apricot Text Manager

 Wild Apricot allows any content gadgets to be edited by a website administrator. When placing your cursor over a content gadget you can see the option to edit, like below:

Content editor

However, many gadgets in the System Pages are marked as (System) and do not allow editing whatsoever:

System gadget

Now it is possible to change the text on form labels and buttons inside these System gadgets. You can also publish Wild Apricot websites in 2 languages!

The Wild Apricot Text Manager (WATM) is a simple to configure JavaScript library that levers the jQuery library already included with every Wild Apricot website. WATM will help any administrator manage and replace nearly every piece of system text in Wild Apricot. You can also use it to change CSS for any class or ID. WATM can be used optionally to enable 2 language Wild Apricot websites without needing to create any additional site pages or page templates. A list of replaceable elements is included in the easy-to-edit Excel configuration file. You can make a variety of changes such as global search and replace, modifying form labels and buttons, changing CSS properties on any class or ID and hiding certain labels or buttons altogether.

The configuration for the Wild Apricot Text manager is made inside a comma separated configuration file which can be edited in Microsoft Excel or another text editor. To activate WATM, a few lines need to be added to Wild Apricot’s Global Javascript. You will also need  to edit and upload  the WATM configuration file which includes the text edits and translations. The full WATM package is added to your site using Wild Apricot’s website Files manager.

Support for WATM is available by getting in touch.

 Download Wild Apricot Text Manager

 

Version History

0.1 - Initial Release 11/19/18

0.2 - Added support for many more system flags, added French translation into CSV configuration file, changed testing button toggle label 11/27/18

0.3 - Added support for adding a style, added several more system labels, added support for limiting the language toggle display "flicker" 12/5/18

0.4 - Added support for effective primary menu design changes, added support to override any CSS class or ID 12/13/18

10/18/2018

Modifying Text Labels on Wild Apricot Form Fields

Wild Apricot has a terrific system to manage website content, integrated with various membership management, event and ecommerce forms and workflows. In certain situations, it may be necessary to modify a form field label on one or more built-in Wild Apricot forms. These forms have hard-coded field labels as part of the various system pages maintained in Wild Apricot. It is possible to add other gadgets including content to a system page, but it is not easily possible to modify the content, formatting, placement or design of any fields.

One common suggestion is to use theme overrides to fix this problem, but at NewPath, we don't take kindly to theme overrides. They are not trivial  to create and are reserved only for specialized programmers and theme designers. Theme overrides are best for bespoke themes that require pixel-perfect placement of design elements, but for simple label changes and layout changes in system pages, we recommend jQuery.

jQuery is a code library already used by Wild Apricot and loaded by default on every Wild Apricot website. It is a really powerful set of JavaScript functions that can modify any part of a web page, on the fly as soon as a web page loads. 

The following code changes the labels on the form behind the "Send Message" button on a Wild Apricot member profile. In order to change the field labels (in the green boxes) we will modify the Email Member system page.

Email member system page

1. Add a Custom HTML gadget anywhere on the page

Custom html gadget

 

2. Select the Custom HTML gadget and click the Edit code button and copy and paste the code below into the editor. Click Save.

<script type="text/javascript">

jq$(document).ready(function(){
$( ".fieldBody h4" ).text( "Send Referral" );
$("#idMessageSubjectContainer .mandatoryLabel").text ("Subject of Referral");
$("#idBodyContainer .mandatoryLabel").text ("Referral Information (include type of referral, contact information, and any other important information)");
$("#idReplyNameContainer .mandatoryLabel").text ("Name of Referral");
$("#idReplyEmailContainer .mandatoryLabel").text ("Email Address of Referral");
});
</script>

Jquery code for email members

3. The field labels should instantly change. You can now Save the edited system page with the jQuery code snippet. If the labels did not change, check that you copied and pasted the code correctly into the Custom HTML gadget.

Changed email members system page
Using this technique it is possible to modify any hard-coded piece of text in any system page that is not easily accessible through the website page editor. One of the ideas we are tossing around is to create an easy to install code library that will allow easy customization of all labels and support mutli-lingual for Wild Apricot.

Note that the functionality of the underlying forms does not change in any way at all. Different labels may create alternative ways of thinking about the various functions. Similarly with this function the event registration, member signup and renewal, donations, store and just about all other parts of Wild Apricot can be modified.

05/09/2018

Hide the Search in Member Directory Gadget

The search function on a Wild Apricot member directory gadget is really handy. It allows you to search the member directory by keyword. Unfortunately when a page loads, the search box receives the browser focus and the page scrolls automatically to wherever the search box is on the page. Sometimes that is near the bottom of a page, scrolling the page below important content. There is a simple fix: hide the search box or use JavaScript to disable the focus.

JavaScript to disable the focus. This keeps the search box on the screen and available without scrolling the window. You should insert this into the Global Javascript under Settings > Site > Global Javascript

<script type="text/javascript">
jq$(function()
{
function noFocus() {
console.log('nofocus here');
if (jq$('.WaGadgetMemberDirectory').length) {
var refreshId = setInterval(function() {
if (jq$('.WaGadgetMemberDirectory table#membersTable').length)
{ document.activeElement.blur(); window.scrollTo(0,0); clearInterval(refreshId); }
}, 50);
}
else if (document.activeElement && (document.activeElement.tagName=="INPUT")) {
document.activeElement.blur();
window.scrollTo(0,0);
}
}
BonaPage.addPageStateHandler(BonaPage.PAGE_PARSED, noFocus);
});
</script>

 

Or you can use the CSS below to just hide the search box. Place this code in the raw headers of each page where you want to hide the search box on. Note that the styles affect the IDs of the elements separately.

 

/* search box */

<style>
#FunctionalBlock1_ctl00_ctl00_search {
display:none;
}
</style>

/* search label */


<style>
#FunctionalBlock1_ctl00_ctl00_searchLabel {
display: none;
}
</style>

/* advanced search link */
<style>
#FunctionalBlock1_ctl00_ctl00_advancedSearchStatusPanel_advancedSearchLink {
display: none;
}
</style>

02/16/2018

VIDEO: Using CSS to Customize the Main Menu System in Wild Apricot

The Kaleidoscope theme in Wild Apricot is beautiful! Changing the main menu design though is not something that can be done by pointing and clicking. You need to use CSS to modify the menu. This snippet of CSS code will help you modify the main menu in Kaleidoscope and Bookshelf, two themes that share the same menu styles.

Step 1. Download the CSS code

Step 2. Use the Website > CSS  option to copy and paste the CSS code, or use the WebDAV approach to create or edit the user.css file.

Step 3. Modify the various color and background options to your heart's content until you have the menu working just like you would like.

Hint: Popular colors are available online at W3Schools. You may wish to use your own hexadecimal colour values that start with #.

02/13/2018

VIDEO: Managing your Wild Apricot files using WebDAV

Your Wild Apricot account includes space to store files such as documents, pictures, and videos. Normally these are managed in the Files Manager. You can also edit user-defined CSS in the Website > CSS screen. To manage your files – upload, download, organize, delete, or rename them – you can go to the Files screen within Wild Apricot, or you can use WebDAV to  edit your files without touching the web browser. Using WebDAV allows you to copy multiple files or folders at the same time, and it is a much faster mechanism to edit your CSS. 

If you do a lot of CSS editing in Wild Apricot, you use your favourite editor (ours is Notepad++), make changes and refresh them instantly in the public view of your website. No more going into admin to tweak a bit of CSS and back into Public View. Check out the short video below for a real time saver!

02/02/2018

VIDEO: Setting up a custom domain with Wild Apricot: what can go wrong?

Setting up custom domains in Wild Apricot can be tricky. If all goes well you're good, but what if you don't know where to start? This video will show you how to find your registrar, which domain name settings you need to update and some final steps on what you can do for a successful launch.

A short recap:

  1. Setup DNS records you must have access to your control panel (GoDaddy, Wix, 1and1, etc). Use reset password if necessary to get access.
  2. Use WHOIS to check the registrar if you don't know where your domain name is registered
  3. Login and adjust the DNS records as per the Wild Apricot docs. The A record is absolutely critical to successfully launch under your domain name. If the DKIM records are not set your email may end up in your members junkmail folder.
  4. Wait for an hour or two for DNS records to propogate.
  5. Go to Settings > Site > Domain Name Management and click the Check... button. You should see this. If not continue to check your DNS settings or wait a bit longer.

05 Custom Domain Settings Checked

 

Once verified, set your domain as the primary domain name.

Note that the From email address has changed. Make sure the From: and Reply to: email settings are set to a real mailbox that can send and receive emails. Your emails will be addressed by default with these settings! 05 From Email Settings

Send a test email campaign to check your email settings are correct.

02/01/2018

VIDEO: Beginner's Guide to CSS in Wild Apricot

Have you ever wanted to change the style of a gadget, a menu or hide a few elements in your event registration process? Is the Colors and Styles under Websites feature failing to help you? The key is understanding CSS, aka Cascading Style Sheets. This short video shows you how to inspect and experiment with CSS and apply a change in Wild Apricot. 

 

01/31/2018

VIDEO: Copying HTML from Upcoming Events Gadget in Wild Apricot

Creating a newsletter with your upcoming events can be a troublesome exercise. This snippet of code makes it easy to copy any upcoming event gadget and put it into a newsletter. This short video shows you how using Nicasio Design's excellent Javascript code snippet.

 

01/30/2018

VIDEO: Redirect a menu to another page in Wild Apricot

This short video shows you how to setup a menu item that points to another page with 1 click. The documentation behind this workaround is on the Wild Apricot help system.

10/19/2017

Formstack new feature: Date-based calculations and conditional logic

image from support.formstack.com

The Formstack Date/Time field can now be used with conditional logic. Formstack has also introduced the capability to use Date/Time field in calculations to evaluate the number of days, months or years between two dates on a form. This could be very useful to determine time spans to calculate for example number of days you wish to book for a hotel.

Formstack has updated a few support documents to help with the new features:

  • Date/Time Field Overview - In the Date/Time field you can now disable selecting a date past a certain date in the future.
  • Date/Time Field Calculations - You can now create calculations using Date/Time fields. This is useful if you need to calculate the number of days between two dates entered into your form or someone's age given their birthdate.
  • Validating Age With Date/Time field - Do you want only people over a certain age to fill out your form? This is possible with date field calculations. Here's a step by step walk-through on how to validate age on your form.
  • Date Field Logic - You can now create conditional logic rules using a Date/Time field on your form. This gives you the option to show/hide specific fields based on a date, date range, or period of time.