5 posts categorized "Wild Apricot Text Manager (WATM)"

04/09/2019

Personifest 2019 Presentation: "3 Professional Wild Apricot Magic Tricks"

You are convinced that Wild Apricot is a great fit for your organization. You got all the basics setup. But there are lingering thoughts — will it really do everything you need? Culled from several years of experience deploying Wild Apricot for organizations around the world, this presentation will illustrate the true transformative power of Wild Apricot.

NewPath Consulting will share three tricks: Website Design with CSS, Multi-chapter Member Directory Magic, and Professional Reports and Analytics.

 

For registered participants at Personifest 2019 a video of our talk along with slides is now available! All of the Personifest 2019 talks are available for free with a quick registration. Use the registration code 'personifest2019'.

11/19/2018

Introducing the Wild Apricot Text Manager

 

The Wild Apricot Text Manager (aka WATM) is free, open source add-on that can be used by any Wild Apricot administrator to style, hide or replace nearly every piece of system text in Wild Apricot. WATM is the missing piece to customizing your Wild Apricot site to your exact colours, styles and text. You can make a variety of changes such as global text search and replace, modifying system or custom form labels and buttons, changing CSS properties on any class or ID and hiding certain labels or buttons altogether.

For example the system text labels in the Membership renewal system gadget below can be customized with WATM:System gadget

 

WATM is included with every Wild Apricot website that NewPath Consulting designs, as well. If you'd like help with implementing WATM, please check out our translation and custom design services on our website. Knowledge of CSS is very helpful but not required for using WATM.

What can you do with WATM?

  • modify the style (color, decoration, shape, etc) of any user interface element
  • change any text globally or on a particular system gadget
  • hide any piece of text or user interface item (eg a button) in Wild Apricot
  • provide seamless translation of the public Wild Apricot site into another language

Download Wild Apricot Text Manager from GitHub

Multi-lingual Features

WATM can be used  to create a multi-lingual Wild Apricot website without the need to create duplicate pages, page templates or events. WATM currently supports a primary and secondary language. All content gadgets can be easily maintained on one page, while system text can be translated on the fly based on the translated added to the WATM configuration file.

NewPath Consulting has 8 languages developed for ready use with over 1,000 translations for various Wild Apricot system text. English, Spanish, Chinese (Simplifed), Chinese (Traditional), Arabic, Hindi, Portuguese and Russian are supported currently. New content and translations can be added by a customer quite easily.

Here's a video of how multi-lingual support works with Wild Apricot.

Download Wild Apricot Text Manager from GitHub

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.

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