Bonnet Docs

Bonnet HTML Theme — Documentation

Hero

Change Hero Slideshow Animation

Different animations are provided for the slideshow images. To change the default animation (top), change the hero slideshow element with one of the following options:

So if you would prefer images to be revealed from right to left, the hero-slideshow elements should be as follows:

<section class="hero hero-slideshow">
  ...
  <div class="o-slideshow__block-reveal o-slideshow__block-reveal--left"></div>
  ...
</section>

Video Modal

Set Video Ratio

This theme supports the most commonly used video aspect ratios, so it can be perfectly adapted to your page. To change the aspect ratio set the data-modal-video-aspect-ratio attribute to one of the following supported values:

<button class="btn btn-outline-secondary js-open-video-modal" data-modal-video-aspect-ratio="4:3" ...>
  Play video
</button>

If the video has a different aspect ratio, you can remove the data-modal-video-aspect-ratio attribute. The video will be displayed nicely as well.

Instagram

Configuration

The Instagram feed is automatically fetched from Instagram thanks to InstagramFeed. This third-party plugin crawls the Instagram page of a user and uses the data directly from Instagram itself without the need of using the Instagram API (which requires some extra steps).

The Instagram <section> can be identified by the class instagram.

The href attribute of the “Visit my instagram” <a> tag needs to be set accordingly to the user's account.

<section class="instagram">
  ...
  <a class="h6 font-sans-serif instagram__link" href="https://www.instagram.com/yourOwnUsername/" target="_blank">
    ...
  </a>
  ...
</section>

The container of the instagram images can be identified by the class instagram__images.

InstagramFeed

To configure the InstagramFeed to fetch the user's feed some attributes need to be set:

<section class="instagram">
  ...
 <ul class="js-instagram-images instagram__images" data-instagram-user-name="yourOwnUsername" data-instagram-limit="6">
    ...
  <ul>
  ...
</section>

There's also the option to disable the automatic feed and add static images by removing the js-instagram-images class and the attributes: data-instagram-user-name and data-instagram-limit.

The images can come from Instagram directly by copying the instagram post URL and adding some options:

Currently Instagram provides 3 different sizes:

<ul class="instagram__images">
  <li class="js-instagram-image-container instagram__image-container u-height-square">
    <a class="instagram__image-link" href="https://www.instagram.com/p/B-aCdCSHXs6" target="_blank">
      <img class="js-instagram-image instagram__image u-height-square__content" src="https://www.instagram.com/p/B-aCdCSHXs6/media?size=m">
    </a>
  </li>
  <li class="js-instagram-image-container instagram__image-container u-height-square">
    <a class="instagram__image-link" href="https://www.instagram.com/p/B-aCdCSHXs6" target="_blank">
      <img class="js-instagram-image instagram__image u-height-square__content" src="https://www.instagram.com/p/B-aCdCSHXs6/media?size=m">
    </a>
  </li>
  ...
</ul>

Note: Instagram does not officially support this feature. If the methods mentioned above are deprecated any image URL can also be used.

Newsletter

This theme provides a newsletter section that is ready to be integrated with the popular marketing platform Mailchimp. Follow this steps to setup the newsletter with your own Mailchimp account:

  1. Go to Mailchimp website
  2. Login or Sign Up
  3. Select “Design an Email”
  4. Select your favorite template or create a new one
  5. Open “Create” dropdown on the top navigation bar and select “Signup Form”
  6. Select “Embedded Form”, choose your audience and click “Begin”
  7. Copy the form action URL provided by Mailchimp and replace the action attribute of all the subscribe forms on your website followed by &c=callback

In addition to "Email Address", you can collect data like "first name", "last name", "company", and others. To add more fields to your newsletter form simply copy the group inputs provided by Mailchimp and replace the classes with those used on his theme. Please note that you must not change the input id.

<form action="https://example.us18.list-manage.com/subscribe/post?u=1a2b3c4d5e6f7g8h9i&amp;id=9a8b7c6d&c=callback" ...>
...
</form>

More fields can be added by simply copying the group inputs provided by Mailchimp and replacing the classes with the theme’s customized ones (Note: Do NOT delete or change the input id)

Comments

This theme includes markup and styling for user comments. All markup related to comments can be found on the article page under <section class="comments"> but can also be applied to any page you would like.

Something to keep in mind is that using a third-party plugin can imply losing the original comments styling. Please consider checking their documentation.

Two of the most popular 3rd party plugins are Disqus and Facebook Comments:

Disqus

  1. Go to Disqus Website
  2. Login or Sign Up
  3. Select “I want to install disqus on my website” and follow the steps provided
  4. Select “I don't see my platform listed, install manually with Universal Code” and follow the install instructions.

Facebook Comments

  1. Go to Facebook Developers Docs
  2. Login or Sign Up
  3. Select Social Plugins under Social Integrations
  4. Select Comments on the left navigation bar
  5. Follow the steps in the documentation

Contact form

Configuration

This theme provides markup, styling and form functionality like data validation, form submission and mockup response handling, and it’s ready to be integrated with any backend solution found suitable.

To customize the contact form, please read the in-code documentation on the sendContactForm() function in scripts.js.

Here is an example using Javascript fetch() function to send an e-mail and handle the success and error:

function sendContactForm (form) {
  if (formIsValid) {
    fetch("yourEmailHandlingUrl", {
      method: "post",
      ...
    }).then(function () => { 
        form.classList.add('contact-form-is-valid');

        response.innerHTML = 'Your message was sent successfully.';
        response.classList.add('contact__response--success');

        sendFormButton.value = sendFormButtonDefaultValue;

        setTimeout(function () {
          resetForm(form);
        }, 4000);
    }).catch(function() {
        // If there was a problem sending the email
        enableFormInputs(form);

        response.innerHTML = 'An error has occurred, please try again later.';
        response.classList.add('contact__response--error');

        sendFormButton.value = sendFormButtonDefaultValue;
    });
  } else {
    response.innerHTML = 'Please make sure all the fields are valid.';
    response.classList.add('contact__response--error');
  }
}