Impact Stack standard themes come with a range of formatting options to help make your content stand out. This demo petition page gives you an overview of the options - obviously your theme will be styled to match your brand, using the colours and fonts you've provided.
A little HTML code can give you control of some great additional features and styling options for your new themes. The code snippets below will help you make the most of them - just contact support if you need any additional help.
You can paste and edit the HTML code in the main content area of the Impact Stack pages (switch the WYSIWYG editor to 'Source' mode to view the code).
Since the new themes are based on ZURB Foundation 6 some of the CSS classes from the underlying framework will work: https://get.foundation/sites/docs/
Quick links
Add your own button
To make a link look like a button, add the class button to the anchor tag (<a>). You can further change the look of your button by adding the classes primary and large or small as needed. For more advanced button styling, see the ZURB Foundation 6 button documentation.
<p>
<a
class="button primary"
href="YOUR URL"
>Donate now!</a
>
</p>
Link to parts of your content
If you have a lot of content on your action, you might want to send people back to a specific area with a link. Here are some common use cases:
- To link to the top of the form container, use
#form-outer - To link to the form itself, use
#form - To link to the start of the content section, use
#content - To link to the page title, use
#top
Add data-smooth-scroll to the link for a nice scrolling animation.
<p>
<a
href="#form-outer"
data-smooth-scroll
>Sign the petition now</a
>
</p>
De-emphasised text
As well as the formatting options offered by the WYSIWYG editor, you can also use <small></small> tags around individual words on the page that you want to de-emphasise:
<h1>Make one word <small>smaller</small> than the others</h1>If you want to de-emphasise a whole paragraph, such as a legal disclaimer, add the class small to your <p> tag:
<p class="small">This is the legal disclaimer</p>Form elements underneath the button
If you would like to display text underneath the form button you can create a form element with a form key that starts with “below_button". The form key is the software-readable name of the field - more info here.
For example you could drag a new html markup field into your form, and give it the form key “below_button_privacy_policy". Any text and links you add to this new field will display below the submit button.
Sticky buttons
A sticky button will appear when the user scrolls down the page, and allows them to jump back up to the form. This is useful if you have a lot of content on your page and you want the user to be able to get back to the form as soon as they're ready, without scrolling back up.
You can add a sticky button to your page by adding this code snippet. Of course you can change the copy “Take action!" to match any copy you would like. This will only show on smaller screens like phones.
<div class="sticky-cta hide-for-large">
<a
href="#form"
class="expanded primary button"
data-smooth-scroll
>
Take action!
</a>
</div>
If you want the button only to appear on desktop as well as mobile, remove the class "hide-for-large" from the first line:
<div class="sticky-cta">
<a
href="#form"
class="expanded primary button"
data-smooth-scroll
>
Take action!
</a>
</div>
For a desktop only button: add class "show-for-large" instead.
Note: An html element can only have each attribute once, so when there are several classes they’re written class="class1 class2" instead of class="class1" class="class2".
Visibility on different screen sizes
Sometimes you may want to show or hide content based on the screen size. This is particularly helpful when adding an introduction above the form for mobile users.
You can limit the visibility of elements to larger screens by adding the classes “show-for-medium", “show-for-large" to the <p> tags around text or links.
-
show-for-medium→ show for all screen sizes starting from medium (ie. show for tablet and desktop) -
show-for-large→ show for all screen sizes starting from large (ie. show for desktop)
And you can use “hide-for-small-only" or “hide-for-large" around content you would like not to display in those environments.
Here some examples:
To add text linking to further information about the action, which only displays on a small screen:
<p class="show-for-small-only">
<a
href="LINK TO CONTENT"
title="Read the background information before taking action"
>Find out more</a
>
</p>
To add text which would be hidden on a smaller screen:
<p class="show-for-medium">
Join thousands of others and support our campaign.
</p>
You can find the complete documentation here: https://get.foundation/sites/docs/visibility.html
Read more
This feature provides a simple link or button that can be placed anywhere in the content and expands to show additional information.
A couple of quick demo GIFs
To achieve this, you will always need two components:
- A toggle element: That’s the html element that appears and/or disappears.
- An element controlling the toggle element: This is the element that should be clicked to trigger the action (usually a link or button).
There are two options available, that differ slightly in behaviour:
Toggle more info on click:
Clicking on the link or button will display the additional element. Clicking a second time will hide it again. Add this to your page by adding the following two code snippets.
This will look like a link
<a
role="button"
data-toggle="read-more-id"
aria-controls="read-more-id"
aria-expanded="false"
>
Click here to read more.
</a>
<div
data-toggle-element
id="read-more-id"
class="toggle-element-hidden"
>
<p>Paragraph that can be shown and hidden on click.</p>
</div>
And this will look like a button
<a
class="button"
role="button"
data-toggle="read-more-id"
aria-controls="read-more-id"
aria-expanded="false"
>
Click here to read more.
</a>
<div
data-toggle-element
id="read-more-id"
class="toggle-element-hidden"
>
<p>Paragraph that can be shown and hidden on click.</p>
</div>
You can change “Click here to read more" to be any text you like. Make sure to include the attribute data-toggle="read-more-id". The id can be changed as well, but every id can only be used once and must match the id used in the second snippet. The content that you’d like to show and hide is set in this section.
<div
data-toggle-element
id="read-more-id"
class="toggle-element-hidden"
>
<p>Paragraph that can be shown and hidden on click.</p>
</div>
Again, change the text to whatever you like, and make sure to use the same id you have used in the element above. The class="toggle-element-hidden"makes the paragraph hidden when the page is first accessed. If you’d like the paragraph to be shown initially, simply remove class="toggle-element-hidden".
Show more info and hide the link
This will show the additional content when the link or button is clicked, and then hides the link/button. The additional content remains visible and can’t be hidden again. This is done by adding the `data-close` bit of text (attribute) as shown below. Adding it works in the same way as adding the toggle-link described above. Using this example code the the read more link will look like a button
<button
type="button"
data-toggle-element
data-open="more-info-id"
aria-controls="more-info-id"
aria-expanded="false"
data-close
>
Read more!
</button>
<div
data-toggle-element
id="more-info-id"
class="toggle-element-hidden"
>
<p>This will show up on click and can’t be closed again, the link is gone.</p>
</div>
You might have noticed the aria elements (aria-xyz) in the example snippets. Aria controls offers additional information about the relationship between elements, that helps screen readers to navigate your site. We do recommend you use them, if you are not sure how, please feel free to reach out to support@more-onion.com.
Accordion
You can add an accordion to your page to reveal and hide extra text.
Use and edit the code below to get started
<ul
class="accordion"
data-accordion=""
data-allow-all-closed="true"
data-multi-expand="true"
>
<li
class="accordion-item is-active"
data-accordion-item=""
>
<a
id="example1-accordion-label"
class="accordion-title"
href="#"
aria-controls="example1-accordion"
aria-expanded="true"
aria-selected="true"
>
Accordion 1</a
>
<div
id="example1-accordion"
class="accordion-content"
style="display: block"
aria-hidden="false"
aria-labelledby="example1-accordion-label"
data-tab-content=""
>
<p>Panel 1. Lorem ipsum dolor</p>
<p>
Starts in the open state due to using the <code>is-active</code> class
on the second line.
</p>
</div>
</li>
<li
class="accordion-item"
data-accordion-item=""
>
<a
id="example2-accordion-label"
class="accordion-title"
href="#"
aria-controls="example2-accordion"
aria-expanded="false"
aria-selected="false"
>
Accordion 2 has a very long and not very interesting title (but it wraps
the line to see how it is wrapping)</a
>
<div
id="example2-accordion"
class="accordion-content"
aria-hidden="true"
aria-labelledby="example2-accordion-label"
data-tab-content=""
>
<p>Panel 2. Lorem ipsum dolor</p>
<a href="#">Go to top of page</a>
</div>
</li>
</ul>
A letter
You can add a styled letter that will look like this but with your theme's colours and fonts.
Use and edit the code below to get started
<div class="letter">
<h3>Message heading</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Yours,<br />
Firstname Lastname
</p>
</div>
Popups
You can add buttons or text that when clicked opens a 'popup'. You can put anything you want inside the popup in the form of HTML.
Quick demo GIF
Code
Here's the code to add for a button that opens a popup.
It's important to match the value of the 'id' with the 'data-open' value. See the bold areas in the example code where the value is "example1".
The bit that starts <button area-label="Close modal"is the X button to close the popup. Don't touch that bit.
<p>
<button
class="button"
data-open="example1"
>
Click me for a Pop-up
</button>
</p>
<div
class="reveal"
data-reveal=""
id="example1"
>
<h1>You can put anything you want in here</h1>
<button
aria-label="Close modal"
class="close-button"
data-close=""
type="button"
>
<span aria-hidden="true">×</span>
</button>
</div>
And this is the code to make a popup where you click text, rather than a button to open the popup.
<p><a data-open="example2">Click me for a Pop-up (text, not button)</a></p>
<div
class="reveal"
data-reveal=""
id="example2"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<button
aria-label="Close modal"
class="close-button"
data-close=""
type="button"
>
<span aria-hidden="true">×</span>
</button>
</div>
Your own share button
Share buttons will appear automatically on thank you pages and share pages and you can configure them using the interface.
If you want to place share buttons differently, or you want more control over the way they look and work our new themes offer some options for advanced HTML users. You may want to disable the built-in 'share block' feature and then paste the code below in to create your own custom share buttons.
You can use the following markup as a starting point. Make sure to encode all URLs and text entered here. Please replace the elements highlighted in this snippet with your own text.
You might find our toolkit useful for more easily creating the share links for Facebook, Twitter, WhatsApp, Facebook Messenger and email: https://toolkit.impact-stack.org/share-link
<div class="share-buttons">
<h2 class="share-buttons-title">Share this action!</h2>
<div class="content">
<ul class="share-light no-bullet">
<li class="email first">
<a
href="mailto:?subject=YOURTEXT&body=YOURTEXT"
title="Share this via Email!"
title="Share this via email!"
data-share="email"
target="_blank"
class="large share button expanded email-icon"
>
<span>E-Mail</span>
</a>
</li>
<li class="facebook">
<a
href="https://www.facebook.com/sharer.php?u=URL"
title="Share this via Facebook!"
data-share="facebook"
target="_blank"
class="large share button expanded facebook-icon"
>
<span>Facebook</span>
</a>
</li>
<li class="twitter">
<a
href="http://twitter.com/share?text=HERE&url=URL"
title="Share this via Twitter!"
data-share="twitter"
target="_blank"
class="large share button expanded twitter-icon"
>
<span>Twitter</span>
</a>
</li>
<li class="whatsapp show-for-small-only">
<a
href="whatsapp://send?text=URL"
title="Share this via WhatsApp!"
data-share="whatsapp"
class="mobile large share button expanded whatsapp-icon"
>
<span>WhatsApp</span>
</a>
</li>
<li class="fbmsg last show-for-small-only">
<a
href="fb-messenger://share?link=URL"
title="Share this via Facebook Messenger!"
data-share="facebook-messenger"
class="mobile large share button expanded facebook-messenger-icon"
>
<span>Facebook Messenger</span>
</a>
</li>
</ul>
</div>
</div>
Comments