Ristretto

What's included

Every downloaded copy of Ristretto is compressed in a folder. Once downloaded, unzip the folder to get a structure like this:

ristretto/
├── css/
│   └── ristretto.css
├── fonts/
├── images/
│   ├── background01.jpg
│   ├── background02.jpg
│   ├── background03.jpg
│   ├── background04.jpg
│   ├── background05.jpg
|   └── favicon.png
├── js/
│   └──  ristretto.js
├── php/
│   ├── Mailchimp/
│   ├── contact.php
│   ├── Mailchimp.php
│   └── subscribe.php
├── sass/
│   ├── base/
│   ├── helpers/
│   ├── mixins/
│   ├── modules/
│   └── ristretto.scss
├── config.rb
├── readme.html
└── index.html

The download includes all the files needed to use Ristretto:

• ristretto.js for configuration and functionality
• css/ folder with the main stylesheet
• php/ folder with files related to emailing
• sass/ folder with files ready to be compiled to a stylesheet
• index.html main file
• config.rb for configuration of the sass project

date

The date when countdown ends. It must have a valid JavaScript Date Object format.

background

The background style of the page. False and 'image' set a static image as background, slides sets a group of 4 rotating images as background and video sets a dynamic background playing a video.

showTitle

Display a title in the main page, above the countdown. False doesn't show any title.

showCountdownTags

Display a descriptive text tag below each counter. False doesn't show any tag.

Text

To edit the text of the template, open index.html with a text editor and just replace the text you want for your own. Don't replace any tag or attribute if you don't know what you're doing, this may affect either appearance or functionality of the template.

To edit social networks, go to the contact section, locate the list containing them and replace each href attribute with a link to your profile. You can add more social networks, just copy and paste a line of code and change the text, link and icon.

<ul class="list-inline social-networks">
  <li><a href="#"><span class="fa fa-twitter"><span class="hidden">Twitter</span></span></a></li>
  <li><a href="#"><span class="fa fa-facebook"><span class="hidden">Facebook</span></span></a></li>
  <li><a href="#"><span class="fa fa-dribbble"><span class="hidden">Dribbble</span></span></a></li>
  <li><a href="#"><span class="fa fa-behance"><span class="hidden">Behance</span></span></a></li>
  <li><a href="#"><span class="fa fa-google-plus"><span class="hidden">Google+</span></span></a></li>
</ul>

Images

To replace the logo displayed in the template, open index.html and go to the nav section. Locate the image tag and edit the path of the src and srcset attributes. You may also include an image for high density pixel screens ending with @2x and double the size of the regular one.

<img class="brand" src="images/ristretto.png" srcset="images/ristretto.png 1x, images/ristretto@2x.png 2x" alt="brand">

To edit images displayed on the background of the page, open images folder and replace existing images, named background_x.jpg, with your own keeping same file names and extensions.

If you want to edit images without overwritting existing ones, open ristretto.css and go to the theme section. Edit the path in the background-image property, .image class is for static background and .slide-x classes for rotating background.

.image {
  background-image: url('../images/background1.jpg');
}

.slide-1 {
  background-image: url('../images/background2.jpg');
}

.slide-2 {
  background-image: url('../images/background3.jpg');
}

.slide-3 {
  background-image: url('../images/background4.jpg');
}

.slide-4 {
  background-image: url('../images/background5.jpg');
}

If you're customizing using Sass, open _theme.scss and edit the value of the following variables on the top of the file.

$image-url: "background1.jpg";

$slide1-url: "background2.jpg";
$slide2-url: "background3.jpg";
$slide3-url: "background4.jpg";
$slide4-url: "background5.jpg";

Video

To include a video background, open index.html, locate video tag and replace the src attributes of the source tags with the video file name. It's recommended to save media files in the video folder.

<video class="video hidden" autoplay loop muted>
  <source src="video/FILE_NAME.webm" type="video/webm">
  <source src="video/FILE_NAME.mp4" type="video/mp4">
</video>

Contact

To change the email address where the contact form is sent, open contact.php and replace the email for the $to variable. To receive emails through this method, files must be in a compatible PHP 5.3+ server.

$to = 'example@example.com'; // Email the form is sent from.

Subscriptions

To get subscriptions, you need an account in Mailchimp. MailChimp is an email marketing service used to create, send, and track email newsletters. Once you have an account, you must get the API key and a list ID form your account, open subscribe.php and replace $api_key and $list_id variables with their corresponding value. For more information about how to get an API key, create a list and get the ID visit Mailchimp.

$api_key = "api_key";
$list_id = "list_id";

Icons

Ristretto uses two icon set, Linea Basic and Font Awesome. To change a Linea Basic icon, replace .icon-{iconname} class with an existing icon name. To change a Font Awesome icon, replace .fa-{iconname} class with an existing icon name. For a full available icon list, visit Linea and Font Awesome.

Favicon

A favicon, also known as a shortcut icon, is a file containing an icon related to a webpage. To edit the favicon, open index.html and replace the path of the following tag:

<link rel="shortcut icon" href="images/favicon.png">

To edit the favicon, open images folder and replace favicon.png with your own keeping the same name and file extension.