User Tools

Site Tools


pangolin-full-screen-page-template

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

pangolin-full-screen-page-template [2019/03/31 20:27] (current)
matthew created
Line 1: Line 1:
 +====== Creating a Full-screen Page Template ======
  
 +To use the Theater Add-on'​s full-screen presentation types, one must first create a full-screen page template. This is easy to do, and simply requires that a page template be created with specific settings, outlined below.
 +
 +As usual, follow these steps to create a new page template:
 +
 +  * In Backlight'​s menu, go **Designer** => **Templates**.
 +  * Under the Page Templates heading, click "​Create New Template"​ at the bottom of the page template list.
 +  * Give the new template a name, for example "​Full-screen Page Template"​.
 +  * Click "​Add",​ and you will be taken directly into the template designer.
 +
 +Once in the designer, start dialing in the settings as described below. Any option not specifically cited, please leave at its default value.
 +
 +===== Basic Recipe =====
 +
 +**Layout**
 +
 +  * Breakpoint : Always
 +  * Columns : One Column
 +  * Top Pallet => Has Height on Desktop : Off
 +  * Top Pallet => Has Height on Mobile : Off
 +  * Top Pallet => Quick Search => Search Button : Off
 +
 +**Masthead**
 +
 +  * Primary Masthead => Location : Disabled
 +
 +**Content**
 +
 +  * Pallets => Background-color : #FFFFFF
 +
 +**Footer**
 +
 +  * Bottom Pallet / Copyright : Off
 +
 +These settings will leave you with a simple, full-screen page template, with navigation accessible in the off-canvas pallet.
 +
 +You may still have text on the page, though. If so, and if you wish to remove it, then ...
 +
 +  * ... if a page, go to **Designer** => **Pages**. Edit the page, empty the Page Copy text.
 +  * ... if an album or album set, edit the album in Lightroom'​s Publish Services. Empty the Page Copy text, and set the Page Copy Placement option as "​Replace template Page Copy".
 +
 +===== Add Flavor =====
 +
 +Using the basic recipe as a starting point for your full-screen template, it's possible to personalize your template in a variety of ways.
 +
 +To start, we might like to reinstate the top pallet, and give it a background-color.
 +
 +**Layout**
 +
 +  * Top Pallet => Background-color : #000000
 +  * Top Pallet => Has Height on Desktop : On
 +  * Top Pallet => Has Height on Mobile : On
 +
 +For balance, we might like to bring back the copyright bar as well.
 +
 +**Footer**
 +
 +  * Bottom Pallet / Copyright : On
 +  * Background-color : #000000
 +  * Text Color : #FFFFFF
 +
 +Rather than having our navigation off-canvas, we might put it in the top pallet.
 +
 +**Layout**
 +
 +  * Breakpoint : 1024px
 +
 +**Navigation**
 +
 +  * Horizontal Navigation => Location : Top Pallet
 +  * Horizontal Navigation => Menu Items : #FFFFFF
 +
 +And we might put our site title there as well.
 +
 +**Masthead**
 +
 +  * Top Pallet => Visible on Desktop : On
 +  * Top Pallet => Visible on Mobile : On
 +  * Top Pallet => Text Color : #FFFFFF
 +
 +Of course, these are all just ideas to get you started. There'​s a lot more you can do! Feel free to experiment and have fun.
pangolin-full-screen-page-template.txt ยท Last modified: 2019/03/31 20:27 by matthew