#Anchor-1 "OnePageToolkit"

OnePageToolkit

This plugin makes it easy to build true one-page websites with Typesetter CMS. It comes with the required Anchor section type as well as soft-scrolling capabilities,  an automatic menu generator Gadget NavFromAnchors and quite some other useful stuff.
 

get OnePageToolkit 1.0b5

Compatible with gpEasy/Typesetter 4.5 and newer. Typesetter 5.0+ recommended.
Ver. 1.0b3 adds some fixes for Typesetter 5.1 and the new theme 'Cajón Scss'.
Ver 1.0b4 fixes some 1.0b3 bugs,  well… and, 1.0b5 fixes a 1.0b4 bug ;)
Story to be continued…

Installation: Unpack the ZIP into your /addons directory and install it via
Admin Toolbox → Plugins → Manage → Available → Install

#Anchor-2 "The Theme"

Step 1: Let’s choose a theme and prepare it.

First of all we need a theme suitable for a one-page website. Although the plugin works in principle with any theme, some will do a better job than others. Fortunately Typesetter CMS comes with good ones preinstalled, so it’s easy-peasy. 

I use Bootswatch Flatly with the Sticky Footer Layout here, which is the default theme up to gpEasy/Typesetter ver. 4.6. Typesetter 5 comes with a newer variant called Bootswatch Scss as default theme. We can use both. So let’s start with the  required steps to make one of them ‘one-page ready’. It's not too difficult at all.

 

Using Bootswatch Flatly

This theme already has a sticky Navbar which is exactly what we want for our one-page, soft-scrolling menu links. If you’re on gpEasy/Typesetter version 4.5 or 4.6 this theme is already active. If you run Typesetter 5+ it is also already installed and you only have to activate it and set it as default. Let’s start with the required changes:

Open the file
[your Typesetter CMS installation directory]/themes/Bootswatch_Flatly/4_Sticky_Footer/template.php
find the line containing $GP_ARRANGE = and change the value from false to true as seen below:

Save. First step done!


If you also want to hide the Search Form and have the navigation aligned right, open the file
[your Typesetter CMS installation directory]/themes/Bootswatch_Flatly/4_Sticky_Footer/style.less
and simply add the following CSS rules as seen below:

That’s all for Bootswatch Flatly.

Proceed to Step 2

 

 

Using Bootswatch Scss/Flatly

This theme is available from Typesetter 5 upwards and it’s the default here.
Using Bootswatch Scss we need to change slightly more in template.php:

Open the file
[your Typesetter CMS installation directory]/themes/Bootswatch_Scss/template.php
and change the two lines as seen in this screenshot:

screenshot2

Save the changes. Bootswatch Scss now has a fixed navbar.

To prevent your content hiding behind the navbar, we also need to give the body element a proper padding-top.  Although we could do this in Layout Editor as well,  let's just change the theme’s stylessheet as we’re already right here:

Open the file
[your Typesetter CMS installation directory]/themes/Bootswatch_Scss/Flatly/style.scss
and insert the 3 lines as seen in this screenshot:

screenshot2

Now Bootswatch Scss/Flatly is one-page-ready!

#Anchor-3 "The Main Menu"

Step 2: Replacing the Main Menu

OnePageToolkit comes with a Gadget called ‘NavFromAnchors’ which automatically generates a menu from the Anchors on a page.  If you want a true ‘One-Pager’, you might want to replace your default Main Menu with this Gadget. But note: You cannot simply add arbitrary links to this menu like you normally would using Page Manager! This Gadget scans the page for Anchors and builds a menu from them—fully automatic—but it does nothing else. It‘s not a genuine Typesetter menu.

Given that, if you want to keep full control over your Main Menu you might want to skip this Step.

Fine. You like simple solutions, so let’s use the NavFromAnchors Gadget:

In Step 1 we edited the template to be able to change the main menu. This is what we’re going to do now:
Enter the Layout Editor. In gpEasy 4.5/Typesetter 4.6 expand the Appearance Section in the Admin Toolbox and click Edit this Layout.
In Typesetter 5 simply click the Layout link in the Admin Topbar.

The Layout Manager looks a little bit different in Typesetter 5 but it will do exacty the same. Take the three actions as seen below:

 


1: Remove the Main Menu

1: Click ‘Insert’

3: Add the Gadget ‘NavFromAnchors’

 


Instead of the former Main Menu you will now only see ‘Add Anchors!’ That’s fine. Click the [ Cancel ] button to leave Layout Editor.
Your Main Menu is now replaced by the ‘Automatic Menu’. You can always revert this if you want to.

#Anchor-4 "The Anchors"

Step 3: Adding Sections with Anchors

This is the point, where Typesetter 5 has some advantages over ver. 4. OnePageToolkit comes with new Section Types/Combos to be added to your page. While Typesetter up to version 4.6.1 only completely supports 1-level nesting of Section Combos, version 5 has no limits here. But no worries – everything we need can be done in ver. 4 too. It's only a few clicks and drags more.

In both versions you will have these 2 new Section Types

while in Typesetter 5 you will also have these 2 more


 


The Anchor Section

 This simple but important section type wants to be placed inside a wrapper section. Although it can be moved to any level in the section tree hierarchy, it’s meant to reside in a first-level wrapper.  These Anchors are in fact the scroll targets on our page. They are only visible when you’re logged in and they come with their own, very simple editor component.
 


Simple Wrapper Combo

 This Section Combo comprises a simple but already functional section entity for our one-pager. It consists of a wrapper section which contains an Anchor and a standard Text section.

With Typesetter up to version 4.6.1 this is our main building block to start with. It meets our basic demands but you may also extend it or build ones yourself as seen in the video tutorial below.
 


Advanced 1-Column Combo

 This Section Combo, which is only available from Typesetter 5 upwards, is already much of what we need in the end. It consists of a full-width top-level wrapper which itself contains an Anchor and a container sub-wrapper. The container sub-wrapper in turn contains a single-column standard text section. This nested structure is required for optimized responsive  one-page layout sections.
 


Advanced 3-Column Combo

 Again TS5-only, this Section Combo is the 3-colum counterpart of the Combo on the left. Although it would be easy to add even more such Combos, like 2-colum or 4-column ones, the Add part of the editor is easily cluttered, so we spare the space. Advanced Combos like these can be built by hand, even with Typesetter 4, so I better show how it’s done instead of throwing too much dirt into the ‘editor pistons’.
 

So let’s start building…

On your Home Page, start editing by clicking the Manage Sections item in the edit context menu or, in TS 5 alternatively the Page link in the Admin Topbar.

 Now add a Simple Combo by clicking    which will append it your current page content. In TS 4 close the Section Manager with [ Save & Close ] and start editing the new Anchor. In TS 5 you can just click the new Anchor to instantly switch to it’s editor.

Once the Anchor editor is open, simply change the random Anchor ID to something meaningful. In fact you could also keep ‘Anchor-12xy’ – that’s up to you. The Anchor ID itself will only be part of the link pointing to it but the Anchor Label is what you certainly want to change since it will be the name of your menu item, at least if you use the automatic menu generator NavFromAnchors Gadget. Anchor Labels may be any text, Anchor IDs on the other hand must not only be unique but also obey the HTML ID nomenclature/syntax. The editor will check your input and give you hints if your ID is invalid or already in use.  So use e.g. ‘Anchor-1’ for the ID and sth. like ‘Section 1’ for the label to get started. That’s already almost all you need to know about the Anchors.

Now, as we added the Simple Combo, we now could transform it into a nested full-blown Advanced Combo, which we can subsequently copy afterwards. But we can also build a complete Combo from Scratch. If you’re already familiar with Typesetter’s Section Management, the Responsive (Bootstrap) Grid and how to build nested structures, you might want to skip the following video.

#Anchor-5 "Section Combos"

Building Combos from Scratch: A Short Video Tutorial

Typesetter’s Section Management is quite a powerful tool and OnePageToolkit is made with this powerhouse in mind. But because it’s rather new there is hardly any  information to be found to get started.  So I decided to make this small video tutorial, admittedly because it’s less work than writing it all down. You will soon realize that I'm neither a native english speaker nor much of a speaker at all. I hope you enjoy it anyway.

 

 

I hope to find some time to add missing documentation about the following things shortly:

Admin Page/Plugin Settings

 The Scroll Indicators Gadget

Using Page Manager to build custom menus

Hybrid websites with mixed navigation

Adding soft-scrolling content links using CKEditor’s link tools

Loading other pages into Colorbox

etc.


For bug reports, feature requests and general discussion simply post to the Typesetter Plugin Forum.
I will likely pick it up shortly.

Thanks for testing and stay tuned ;^)