User Tools

Site Tools


using_the_designer

Using the Designer

The Designer is an exciting place, as it allows you to personalize your site or galleries to your heart's content.

To start designing, select DesignerTemplates from the Backlight menu.

Understanding Templates

Backlight manages three basic types of content, categorized as:

  • Pages
  • Albums
  • Album Sets

Templates define the visual presentation of content.

The presentation of your Pages is dependent upon the selected Page Template for any given page.

When designing an Album Template or Album Set Template, you will select a parent Page Template. The album or album set is then inserted into the content area of that Page Template.

To wit, all types of content are wrapped by a Page Template. Album Templates and Album Set Templates act as children to a parent Page Template.

The system is actually easier to use than it is to explain, so let's get hands-on.

Page Templates

All content types utilize a Page Template, so that's the place to start. Page Templates dictate overall page layout, typography properties, etc.

Your new install of Backlight begins with our default template, Default Page. Right now, whatever albums, pages or sets you've created thus far are already using this.

Because we're diving into the Designer for the first time, let's create a backup of our default template. Click its title to visit the page actions; choose “Clone” and enter the name “New Page”. Click the “Clone” button. You now have an exact duplicate of the default template that we can revert back to if our edits go sideways.

The Default Page template is already in use, so let's edit it! Click “Design” to get started.

The Design Template Page

The Design Template page houses all of the customization controls for your templates, organized into control groups. Using these controls, you may edit your templates live, in real-time.

To view our changes as we make them, we need a preview window. Let's create a design workspace.

  • Open a new browser window – a window, not a tab. You now have two windows:
    • the Designer
    • the Page
  • You may move the Designer to a second display, or reduce the window size and pull it off to the side. Backlight is responsive, and designed by be used in a narrow window.

On my MacBook Air, my workspace has the Page in a large window on the left, and the Designer in a narrow window on the right, as pictured below.

My MacBook Air has a 1440-pixel display; my Page window is 1280-pixels wide, and my Designer 480-pixels wide. I do not use either window in full-screen, so that I can easily click whichever window is at the back to bring it forward as needed.

In the Page window, navigate to any page that you want to use as your preview, just so long as that page is using the same template we are editing. This being our first time in, all pages are using the Default Page template, and so any page will do.

So we can see our page, and we can edit our settings. But it gets better! In the Page window, add “?autoRefresh” to the end of your URL, like this:

yourdomain.com/page?autoRefresh

Press Return on your keyboard to commit the URL. This done, your page will now refresh automatically whenever you save changes in the Designer.

You're all set up, so start making changes! To save changes, you may press Return1) while interacting with the Designer, click the disk icon at the Designer's top-right corner, or click the “Save” button by scrolling to the Designer's bottom.

Album and Album Set Templates

Album and Album Set templates allow you to customize the gallery grids for your albums. These customizations get slotted into a Page Template.

At the top of the designer, when editing an Album or Album Set template, you will be able to select a Page Template to use as parent.

Next Step

You know everything you need to know. Take Backlight and run with it!

1)
When interacting with Color Pickers for Textareas, pressing Return will not save. Click the disk icon or “Save” button instead, or press Return after interacting with another slider, select box, etc.
using_the_designer.txt · Last modified: 2017/07/01 01:41 by matthew