📌 Note: the following instructions will ONLY work for websites that are built on the Momentum theme in nations that have activated ActionButton. If you are not using the Momentum theme you will need to switch to the Momentum theme before this will work on your site.
How to enable Advocacy template for websites with a custom theme
If you are using the stock theme, please see this article for alternative instructions.
In the control panel, navigate to the theme files of the website to be updated: Theme > Current custom theme > Files.
Add new theme files
Resource: zip file
In Files, upload the following files and then, for each file, resolve “changes pending” by selecting “Publish changes”, and then “Sure?”, in the dropdown at the right end of the row.
Update existing theme files
Reference: code change screenshots
In Files, find the following files and make changes as noted. Screenshots reflect changes made to stock Momentum theme files.
_page_tags.html
This change removes the new tags, ignore ab template and ignore ab background, from appearing on the website.
Copy & Paste Code
{% unless tag.name contains "footer_nav" or tag.name contains "homepage" or tag.name contains "lang_en" or tag.name contains "lang_es" or tag.name contains "lang_fr" or tag.name contains "ignore ab template" or tag.name contains "ignore ab background" %} |
pages_show_basic.html
This change applies the ActionButton template to the Basic page type.
Copy & Paste Code
<style> /* hide body content while template loads */ .page-type-basic { opacity: 0; } </style>
{% assign ignore_ab_template = false %} {% assign ignore_ab_background = false %}
{% if page.tags_count > 0 %} {% for tag in page.tags %} {% if tag.name == "ignore ab template" %} {% assign ignore_ab_template = true %} {% break %} {% endif %} {% if tag.name == "ignore ab background" %} {% assign ignore_ab_background = true %} {% endif %} {% endfor %} {% endif %}
{% assign has_actionbutton = false %} {% if page.basic.content contains 'iframe class="actionbutton"' %} {% assign has_actionbutton = true %} {% endif %}
{% if has_actionbutton and ignore_ab_template == false %} {% include "actionbutton_basic_template", ignore_ab_background: ignore_ab_background %} {% else %} |
|
<script> document.querySelector('.page-type-basic').style.opacity = 1; </script> {% endif %} |
pages_show_basic_wide.html
This change applies the ActionButton template to the Basic (wide) page type.
Copy & Paste Code
<style> /* hide body content while template loads */ .page-type-basic { opacity: 0; } </style>
{% assign ignore_ab_template = false %} {% assign ignore_ab_background = false %}
{% if page.tags_count > 0 %} {% for tag in page.tags %} {% if tag.name == "ignore ab template" %} {% assign ignore_ab_template = true %} {% break %} {% endif %} {% if tag.name == "ignore ab background" %} {% assign ignore_ab_background = true %} {% endif %} {% endfor %} {% endif %}
{% assign has_actionbutton = false %} {% if page.basic.content contains 'iframe class="actionbutton"' %} {% assign has_actionbutton = true %} {% endif %}
{% if has_actionbutton and ignore_ab_template == false %} {% include "actionbutton_basic_template", ignore_ab_background: ignore_ab_background %} {% else %} |
|
<script> document.querySelector('.page-type-basic').style.opacity = 1; </script> {% endif %} |
Enable the Advocacy template on a Basic page
The advocacy template is now automatically applied whenever a Basic page is saved with an ActionButton embedded through the editor’s ActionButton widget. So all you now need to do is:
Step 1: Go to your ActionButton account and copy your ActionButton ID.
Step 2: Paste it into the ActionButton widget in your Nation's content editor. The Button ID will be a series of letters and characters like this: SPK-SEBEQA==
Step 3: Voila! That's it, now this page will take on the attributes of the ActionButton Advocacy theme which removes all menu items and includes a great space for a background image, a few lines for a headline, and text. The page also places your button as the focal point on the page, especially when viewed on a mobile.
📌Please note only one ActionButton will display per template. The topmost ActionButton on the page will be used and all others will be ignored.
How to change page content
Logo
Automatically pulled from site settings
Where to apply logo changes
To change all ActionButton Basic pages within a nation, add the relevant css declarative (i.e. display: none;) from below to .brand-logo within actionbutton-basic-template.scss [line 43].
To change a single ActionButton Basic page, create a custom template, add the relevant code block from below inside the <style></style> tags at the top of the template.
How to hide the logo:
section#actionbutton-basic-template .brand-logo { display: none; } |
How to center the logo:
section#actionbutton-basic-template .brand-logo { display: block; margin-left: auto; margin-right: auto; } |
How to resize the logo:
Adjust min-height and max-height values as needed
section#actionbutton-basic-template .brand-logo { min-height: 32px; max-height: 250px; } |
Headline
Settings > Page settings > Headline
Subhead, including embedded ActionButton
Content > Content
Background Image
How to change background image:
Add new background image under Files
File name must contain the text: actionbutton-background
Ideal background size ratio is 16:9
Ideal image size is no smaller than 1920 pixels x 1080 pixels
How to remove the background image:
Add page tag: ignore ab background
How to disable the Advocacy template on a Basic page
Add page tag: ignore ab template
Troubleshooting
The page becomes unresponsive after an ActionButton is embedded.
In the editor, switch to the Source code view and make sure that the ActionButton iframe is enclosed within a single <p> tag. Remove any additional HTML elements, such as <span>, that wrap the iframe.