Documentation

How to change the number of slides?

By default, every new page has 3 slides. To change the number of slides, simply go to "Page Attributes" and select the "Number of Slides" attribute (under the "Long Story Short Options").

How to change the navigation bar links?

By default, slides appear in the navigation bar as "Slide 1", "Slide 2", "Slide 3"... You can customize the navbar menu by adding a "Slides Nav" block to the "Slides Nav" area.

Once you've added the Slides Nav block to the Slides Nav area, simply click on "Add link" and enter the "Link text" and the "Slide number" for every menu item you wish to add to the top nav bar.

How to add background colors and images?

Simply hover over a slide and click on "Edit Area Design". Select the "Background Color and Image" menu and choose a color or a file to use as a background image.

How to activate parallax scrolling backgrounds?

Once you've added background images to your slides, simply go to "Page Attributes" and select the "Parallax Background Images" attribute (under the "Long Story Short Options").

What is the ideal image size and resolution for a complete background?

1440 x 900 at 72 pixels per inch is a good size for background images. But if you're planning to add a lot of slides with background images, you should use lower resolution images. Also, you should optimize your images using Photoshop's "Save for web" or a web service such as http://www.jpegmini.com

How to customize the theme

After installing the theme, you will find a set of new page attributes called "Long Story Short Options":

  • Bottom Arrow Settings: choose the design of the bottom arrow or hide it.
  • Parallax Background Images: acitvate parallax scrolling backgrounds.
  • Number of Slides: change the number of slides.
  • Slide Height: set a height for the slides in pixels or as a percentage.
  • Scroll Speed: change the scroll speed.
  • Google Fonts: enter the name of the Google Font you want to use for the headings and body text.

Also, if you go to Desing -> Customize, you'll be able to change the style for most of the elements (header, footer, headings, body text, backgrounds...)

How to add animations to text or images?

To apply CSS3 animations to text or images, you must use the Content block and apply one of the available styles to the image or text.

If you want to apply the animation to the whole Content block, simply click on the block, select "Design & Custom Template". Next click on the Gear icon and choose one of the available styles from the Custom Class dropdown. 

How to change the scroll speed?

You only need to add the "Scroll Speed" attribute to the page and enter a number in milliseconds. For instance, to set the scroll speed to 2 seconds, simply enter 2000.

How to specify the style / weight for Google Fonts?

By default, when you enter the name of a Google Font using the Page Attributes (for instance, "Open Sans"), only the Normal 400 style is loaded.

If you need a specific weight, you can enter "Open Sans:300".

If you need several weights, you have to enter "Open Sans:300,400,700". This way, the three styles will be loaded.

Then, you'll need to go to the theme customizer and assign the appropriate weight to each text style (for instance, you can set the font weight of Heading 1 to 300, etc.).

Why do my background images get cut off?

By default, background images are meant to cover the whole slide area, so they might be cut off depending on the screen resolution (there are lots of screen resolutions and it's impossible to get the background to fit the same way on all computer screens).

If you change the size of your browser window, the background images will be resized to always fill the whole browser window. Obviously, if the image is not the same size as the broswer window, a part of the image will be cut off.

How do I prevent background images from being cut off?

If you want to prevent background images from being cut off, you can try the following:

1. First, disable parallax backgrounds by going to Page Attributes.

2. Go to Design -> Customize, and paste the following code into the "Custom CSS" field:

.lss-slide {
background-size: contain !important;
background-position: center;
}

Please note that this will force the image to fit inside the browser window. That means images will be as high and as wide as possible without being cut off (i.e. they will not be cut off to cover the whole background).

 Is it possible to make a specific slide extend to full height?

Yes, you can apply the "full-height" custom class to the Slide Area. Simply click on the Slide Area: when you hover over the slide, at the left bottom corner your should see "Slide 1" (a small grey badge). If you click on it, then you should be able to select "Edit Area Design". Next click on the Gear Icon and select the "full-height" custom class.