Using JavaScript, you can change the text that appears on various buttons on your Wild Apricot site.
Changing the Login label
Within log in button gadgets
A Login button appears within the log in button gadget.
You change the text appearing on the button to something else, such as "Sign in".
To change the Login button label on the log in button gadget, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- On the Global JavaScript screen that appears, copy and paste the following code:
For Casefile themes<script type="text/javascript"> jq$(document).ready(function(){ jq$('.WaGadgetLoginButton .loginContainer.loginContainer .loginLink').html("Sign in"); }); </script>
For all other themes
where Sign in can be changed to whatever label you want.<script type="text/javascript">
jq$(document).ready(function(){
jq$('.WaGadgetLoginButton .loginBoxLinkContainer
.loginBoxLinkButton').html("Sign in");
});
</script>
- Click Save.
The button will now appear with the new label you specified.
Within log in form gadgets
A Login button appears within the log in form gadget.
You change the text appearing on the button to something else, such as "Sign in".
To change the Login button label on the log in form gadget, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- On the Global JavaScript screen that appears, copy and paste the appropriate code for your theme.
For Business Casual themes, copy this code:
For Aurora, Basic, Classic, Clouds, Dark, Glass, Keynote, Memo, Modern, Nature, Notebook, and Transparent themes, copy this code:<script type="text/javascript">
jq$(document).ready(function(){
jq$('.WaGadgetLoginForm .loginBoxLoginButton').val("Sign in");
});
</script>
For all other themes, copy this code:<script type="text/javascript">
jq$(document).ready(function(){
jq$('.loginContainer .loginAction INPUT.loginButton').val("Sign in");
});
</script>
<script type="text/javascript">
jq$(document).ready(function(){
jq$('.WaGadgetLoginForm .loginContainerForm .loginAction
input.loginButton').val("Sign in");
jq$('.WaGadgetLoginForm .loginContainerWrapper
.loginContainerInnerWrapper .loginLink').html("Sign in");
});
</script>
and change both occurrences of "Sign in" to whatever label you want. - Click Save.
The button will now appear with the new label you specified.
Within the Authorization required system page
Once a member clicks the button to log or sign in, the Authorization required system page appears.
To change the Login button that appears on this screen, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- On the Global JavaScriptscreen that appears, copy and paste the following code:
where Sign in can be changed to whatever label you want.<script type="text/javascript">
jq$(document).ready(function(){
jq$('.WaGadgetAuthorizationRequired .loginPageTable #idSubmitBox
#idLoginButtonBox span input.loginButton').val("Sign in");
});
</script>
- Click Save.
The system page will now display the button using the label you specified.
Changing the Renew button label
You can change the label for the Renew to button that appears within a member's Membership details tab.
You can change the label separately for active members and for lapsed members.
To change the Renew to button label, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- For active members, copy and paste the following code:
For lapsed members, copy and paste the following code:<script type="text/javascript">
if (!top.adminpanel) {
var renewLabel =
document.getElementById('FunctionalBlock1_ctl00_ctl00_Membership_RenewalButton');
if (renewLabel) {
renewLabel.value = 'Renew now';
}
}
</script>
where Renew now can be changed to whatever label you want.<script type="text/javascript">
if (!top.adminpanel) {
var renewLabel =
document.getElementById('FunctionalBlock1_ctl00_ctl00_Membership_lapsedMessageBox_renewButton');
if (renewLabel) {
renewLabel.value = 'Renew Now';
}
}
</script>
- Click Save.
The button will now appear with the new label you specified.
Changing the Register button label
The Register button appears on the events calendar page and on the event details page. Using the Register button, visitors to your site can sign up for events.
You change the text appearing on the button to something else, such as "Sign up".
The code below changes the button label in public view, not admin view.
To change the Register button label on the events calendar page and the event details, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- Copy and paste the following code:
where Sign up can be changed to whatever label you want.<script type="text/javascript">
if (!top.adminpanel){
$(".boxActionContainer").find("input").val("Sign up");
}
</script>
- Click Save.
The button will now appear with the new label you specified.
Changing the Registration is closed label
When an event is full, and a waitlist has not been enabled, the Register button will be replaced with a message saying Registration is closed on both the event calendar and the event details page.
To change this message to something else, such as "Sorry, no more room!", follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- Copy and paste the following code:
where Sorry, no more room! can be changed to whatever label you want.<script type="text/javascript">
jq$(document).ready(function(){
jq$('.infoRegistrationIsClosed').html('Sorry, no more room!');
});
</script>
- Click Save.
The message you specified will now appear in place of Registration is closed.
Changing the Add Guest button label
The Add guest button appears on an event registration form when you enable guest registrations and choose to collect information for each guest.
You can change the text appearing on the button to something else, like "Add family member".
To change the Add guest button label, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- Copy and paste the following code:
where Add family member can be changed to whatever label you want.<script type="text/javascript">
if (!top.adminpanel) {
var myPage =
document.getElementById('idSectionGuestListContainer');
if (myPage) {
myPage.innerHTML = myPage.innerHTML.replace('Add guest', 'Add family member');
}
}
</script>
- Click Save.
The button will now appear with the new label you specified.
Changing the Pay button label
When a visitor to your site chooses to make a donation from a donations page, they click the Pay button.
You can change the text appearing on the Pay button to something else, like "Donate".
To change the Pay button label, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- Copy and paste the following code:
if (!top.adminpanel) { var myPage = document.getElementById('FunctionalBlock1_ctl00_donation_ctl00_stepTemplate_next'); if (myPage) { myPage.value = 'Donate'; } }
where DonationGadgetHTMLID is replaced by the HTML ID of your donation gadget, and Donate can be changed to whatever label you want. For instructions on locating a gadget's HTML ID, click here. - Click Save.
The button will now appear with the new label you specified.
Changing the Send Message button label
From a member directory, visitors can email a member by clicking the Send message button from the member profile screen.
You can change the text appearing on the button to something else, like "Email me".
To change the Send message button label, follow these steps:
- From the Website module, click the Settings option at the top of the screen, then click the Global JavaScript option (under Site settings).
- Copy and paste the following code:
where Email me can be changed to whatever label you want.<script type="text/javascript">
if (!top.adminpanel) {
var sendMessage =
document.getElementById('FunctionalBlock1_ctl00_ctl00_memberProfile_profileHeader_idSendEmailButton');
if (sendMessage) {
sendMessage.value = 'Email me';
}
}
</script>
- Click Save.
The button will now appear with the new label you specified.