.gntemplate is a strictly-structured SVG-based file format which allows to define layout and look of a page template with one or more themes. We introduced it to simplify the creation process compared to the old PDF-based approach where each size and theme variation was backed by a standalone PDF file. It also allows users to choose arbitrary page size (not only fixed presets like A4/A3/. ) while it's still the creator who controls how the template adapts to changes of aspect ratio. .gntemplate already allows creators to support some features that were not possible in the past (e.g. user-defined themes and Full-Page Typing) and we are open to new ideas based on your feedback.
The most basic .gntemplate can have just the default theme and contain a single SVG file but we don’t limit users from selecting any page size. Please keep that in mind when expressing layouts in your favorite vector graphics editor. Save your artwork as SVG and make sure to name the file as "template.svg". Then, open the file in any text editor, such as TextEdit on macOS. If you want the contents of SVG to stretch and fill the notebook page without any cropping, update the root element so it becomes "none" . > . Example: Bright.gntemplate If you prefer it to be cropped in the middle then use "xMidYMid slice" . > (viewBox would vary based on your original aspect ratio). Example: Journey.gntemplate If you want to learn more about all the available options of SVG preserveAspectRatio you can do it here - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
You can support 2+ color variations of the same templates by adding each theme into a folder with its user facing name under the themes folder. It’s up to you to define the themes order by using such format:
1 - Navy
2 - Ambrosia
3 - Brick
.
We will automatically exclude this ordering prefixes from UI so for the example above users will only see Navy, Ambrosia, Brick as options. Each theme folder should contain a single CSS file called -.css (e.g. red-light.css) where the color corresponds to one of the options we support and use in both Marketplace (so users can filter by color and find your template) and Template Library (circle dots as visual hints):
yellow
white
dark
grey
brown
neutral
red
orange
green
blue
navy
purple
pink
clear
multicolor
The -light/-dark suffix is used for typing features so we know whether it’s better to use black/white text overlays by default.Example: Bright.gntemplate
gnBackgroundFill
gnBackgroundStroke
gnForegroundFill
gnForegroundStroke
gnAccentFill
gnAccentStroke