Documentation

When you should use this theme

If you want to build a one-page website, or you want to create a presentation, you definitely should take a look at this theme.

When you shouldn't use this theme

If your website has more than one page, you should not use this theme as your main theme. The navigation bar allows you to jump to a particular slide, but it will not allow you to jump to a different page. Anyway, you can apply this theme to a particular page to turn it into a separate presentation or microsite.

How to add new slides

Simply add a new block to the main area of the page. It will automatically appear in the navigation bar.

How to change the navigation bar links

By default, every new slide will appear in the navigation bar as "Slide 1", "Slide 2", "Slide 3"... You can change the name of the slides by changing the block name in the "Custom Template" dialog.

How to use background images

Simply click on a block and choose "Design". Go to the "Background" tab and select a file to use as a background image.

How to activate parallax scrolling backgrounds

Once you have added background images to your blocks, simply open the "Page Properties" dialog, go to the "Custom Attributes" tab and select the attribute "Parallax Background Images".

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 prevent background images from being 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 want to prevent images from being cut off, you can try the following:

1. Go to Dashboard -> Themes -> Long Story Short Parallax -> Customize.

2. Add the following code to the "add your CSS" area:

A) If you want the entire background image to display:

.slides-container > div.ccm-block-styles { background-size: contain !important; }

B) If you want the background image to display at full height:

.slides-container > div.ccm-block-styles { background-size: auto 100% !important; }

C) If you want the background image to display at full width:

.slides-container > div.ccm-block-styles { background-size: 100% auto !important; }

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.
  • Hide Footer: hide the footer.
  • Parallax Background Images: acitvate parallax scrolling backgrounds.
  • Slide Height: set a height for the slides in pixels.
  • Scroll Speed: change the scroll speed.

How to animate text and images

To animate text or images, you must use the Content block and apply one of the following styles to the image or text: "animate-fade-in", "animate-fly-in-left", "animate-fly-in-right" or "animate-space-in".

Add Effect Screenshot

How to apply a parallax effect to text or images

To apply a parallax effect to text or images, you must use the Content block and apply one of the following styles to the image or text: "parallax-preset1", "parallax-preset2", "parallax-preset3", "parallax-preset4", "parallax-preset5" or "parallax-preset6".

Each parallax preset causes the element to scroll at a different speed and changes its position slightly:

  • parallax-preset1 -> scrolls at 0.1 times the natural scroll speed.
  • parallax-preset2 -> scrolls at 0.5 times the natural scroll speed.
  • parallax-preset3 -> scrolls at 1.7 times the natural scroll speed.
  • parallax-preset4 -> scrolls at 2.3 times the natural scroll speed.
  • parallax-preset5 -> scrolls at 2.7 times the natural scroll speed.
  • parallax-preset6 -> scrolls at 3 times the natural scroll speed.

Take a look at the following page to see how they work:
http://longstoryshortparallax.15robots.com/parallax-presets

In future versions of the theme, more presets will be added to allow for a more accurate control.

How to add more than one block for each slide?

Long Story Short Parallax is not a conventional theme. Due to its unusual design, the "Add Layout" functionality is not supported. 

By default, every block you add will become a new slide. However, if you need more than one block for each slide, there is a workaround solution.

If you need two or more blocks, one under the other:

1. Create a new Stack (Dashboard->Stacks->Add Stack)

2. Add as many blocks as you want 

3. Add your stack to the main area. The new slide will contain all the blocks you have added to the stack.

If you need two or more blocks, side by side:

1. Create a new Stack (Dashboard->Stacks->Add Stack)

2. Add as many blocks as you want.

3. In order to have them side by side, you have to add a CSS class name to them. To do so, click on each block, select the "Design" menu, go to the CSS tab and add the appropriate CSS class name:

- if you want to have two blocks side by side, simply enter "span6". 

- if you want to have three blocks side by side, simply enter "span4".

(This theme uses the Bootstrap framework, so you can have up to 12 columns: http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem)

4. Add your stack to the main area. The new slide will contain all the blocks you have added to the stack.

How to exclude slides from navigation

Simply click on a block and choose "Design". Go to the "CSS" tab and type "exclude" in the CSS Class Name field.

If I define the slide height in pixels or as a percentage, is it still possible to make a specific slide extend to full height?

Yes. Simply click on the block and choose "Design". Go to the "CSS" tab and type "full-height" in the CSS Class Name field.