Styling your content - Impact Stack new themes

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

Source_code_view550.png

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/

 

Add your own button

To make a link look like a button, add the class button to the anchor tag. 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.

<div class="sticky-cta">
<a href="#form" class="expanded primary button" data-smooth-scroll>Take action!</a>
</div>

If you want the button only to appear on mobile: add class="hide-for-large" to the wrapper, ie:

<div class="sticky-cta hide-for-large">
<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


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

 

<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&amp;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&amp;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">
<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" style="display: none;">
<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>

 

Have more questions? Submit a request