Getting Started with Long Story Short for Concrete 5.7

A quick tutorial on how to recreate the Long Story Short demo page. This tutorial assumes you have already installed and activated the theme.

Table of Contents

  1. Adding a new page
  2. Setting the number of slides
  3. Edtiing the page
  4. Adding background images to slides
  5. Adding content to slides
  6. Using layouts: adding columns to the slide
  7. Customizing the theme: theme settings
  8. Customizing the Slides Nav

Adding a new page

The Long Story Short theme has been designed for creating one-page websites and presentations. We'll start by going to the homepage or a adding a new page to our site.

Our page should look like this:

lst-001.jpg

Don't be afraid of the blank page :) Once you have finished the tutorial, your new page will look like this.

Setting the number of slides

By default, every new page has 3 slides. To change the number of slides, simply go to Page Attributes (by clicking on the gear icon in the toolbar) and select the "Number of Slides" attribute (under the "Long Story Short Options"). We'll change the number of slides to 5.

lst-002.jpg

Then click on Save Changes, close the panel by clicking again on the Gear icon and refresh your page. You should now have 5 slides.

Editing the page

To edit the page, simply click on the Pencil Icon. The page will change to Edit mode. You'll see the page has different areas: Site Name, Site Nav, Slides Nav, Slide 1, Slide 2, Slide 3, Slide 4. Slide 5, Footer Left and Footer Right.

By default, the Site Name and Footer areas display the name of your site and a link to log in / log out. To change this, simply add a block to the area by clicking on the Plus Icon. The new block will replace the default content.

First, we will start editing the Slide 1 area.

lst-003.jpg

Adding background images to slides

Adding a background image to a slide is actually very easy. Simply click on the slide area and choose "Edit Area Desing". Click on the Image Icon and select a file to use as a background image.

You can download the background images used in the demo here.

lst-004.jpg


Adding content to slides

Next we'll add a Content Block to the second slide. First, click on the Plus Icon in the toolbar. Then, drag and drop a Content block to the Slide 1 area.

lst-005.jpg

Now you can enter the text for the first slide:

Long Story Short

A theme for creating
beautiful, simple
one-page websites

Apply the necessary styles to the text: format the first line as Heading 1 and make all the text white.

lst-006.jpg

 Click on Save -> Exit Edit Mode -> Publish Changes. The first slide should be ready.

Using layouts: adding columns to the slide

Slide #2 has a more complex layout: under the intro text, there are 3 columns of content.

We will begin by adding the 3 columns. To achieve this, we need to click on the Slide area and select the "Add layout" option.

lst-007.jpg

We will select 3 columns and click on Add Layout. If the columns are not visible, refresh the page.

Everything's ready to start adding content to the second slide. First, we will add a Content block with the intro text to the top of the slide (above the layou):

Support for Concrete5 layouts
Create your custom layouts adding columns, rows and blocks to the slides

Next we will add a Feature Block to each column.

lst-008.jpg

The icons used in the Feature Blocks are: "pencil", "gear" and "plus".

Next we can click on each featured slide and select "Design & Custom Template":

  • click on Background Color and Image to change the background color. The colors used are "#96CEB4", "#FFEEAD" and "#FF6F69".
  • click on Margin and Padding and add some padding to the top (about 5px)`and to the right (about 15px), and also some margin to the top (about 10px).
  • click on Borders and set a radius of 4px to create rounded borders.

Our second slide should be finished:

lst-009.jpg

The other slides should be much easier now.

Slide 3 has three columns of text. We will simply add a layout with 3 columns, and add a Content block to each one. Also, we will change the text color (#EEECE1) and the slide background color (#444).

Slide 4 only has a background image.

Slide 5 has a background color (#FFEEAD) and a Content block with some text. To transform the "Buy now" link into a button, simply select the text and apply the "Button" custom style (by clicking on the Magic Wand).

Customizing the theme: theme settings

There are two ways to customize the theme: using Page Attributes or going to the Theme Customizer.

Page Attributes: if you click on the Gear Icon in the toolbar, you'll be able to access the Page Attributes. You'll find a set of 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.

lst-010.jpg

To recreate the demo page, we need to enable Parallax Backgrounds (enable via CSS) and change the slide height (as a percentage) to 50. However, we still want our first and last slides to be full-height (100% height). To achieve this, we put the page in Edit Mode, click on the Slide area, choose the Edit Area Design option and click on the Gear Icon to select the "full-height" custom class.

Theme customizer: if you click on the Gear Icon in the toolbar, and select Design -> Theme -> Customize, you will enter the Theme Cutomizer. There you can change almost any color: header, footer, text, arrows...

lst-011.jpg

To recreate the demo page, select the Dark preset. Then change the Arrow Background to grey and make the Arrow Border Color transparent.

Also, increase the Slie Bottom Padding to 110px so the bottom arrow will not cover the content.

Customizing the Slides Nav

Finally, we want to change the text in the Slides Navigation.

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.

lst-012.jpg

comments powered by Disqus