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.
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":
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".
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:
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.