Styling your content - Impact Stack new themes

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

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

 

"Read more" feature

This feature provides a simple link or button that can be placed anywhere in the content and expands to show additional information. 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:

  1. 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 example 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>
    You can change “Click here to read more” to be any text you like. Make sure to add 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. Now, add the content you’d like to show and hide:
    <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".

  2. 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. 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>
    Then add the content to be shown:
    <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.

 

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