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.
Compatible with Typesetter 5 and newer. Typesetter 5.1+ recommended.
Ver 2.0-b2: Code Refactoring, Bootswatch 4 Scss theme support, bugfixes.
Ver. 1.0-b3 adds some fixes for Typesetter 5.1 and the new theme 'Cajón Scss'.
Ver 1.0-b4 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
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.
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.
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:
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:
Now Bootswatch Scss/Flatly is one-page-ready!
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.
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:
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.
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.
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.
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
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 ;^)