Skip to content

Home

Jump to bottom
James edited this page Feb 28, 2025 · 4 revisions

Getting Started

Welcome to newtralize! This guide is designed to walk you through setting up a new site using the template, introducing some of its features along the way.

Basic Settings

Once you've installed the template, navigate to the Template Styles settings (System > Template Styles > newtralize), and click on the "Site Settings" tab.

Here you will find some basic visual settings for your site. You can set a header logo, and optionally include a logo in the footer as well.

Next you'll find a few settings in the "Cache Settings" tab. These are here if you want to do a quick and dirty cache elimination, but you can leave these disabled if you have another caching solution you prefer.

I would suggest skipping over the "Scoped Code" tab for now (we'll come back to it!), and heading to the "Tracking" tab next. If you're using Google Tag Manager, Google Analytics, or the Meta Pixel, you can grab the corresponding IDs and enter them here. The code you need for these services will then automatically be included by newtralize.

If you're using your own Font Awesome kit, you can provide the kit URL in the "Icons" tab.

Finally, if you have any other third party code you need to include, you can do so in the "Custom Code" tab.

Setting Up the Layout

First, familiarize yourself with the layout and module positions.

Now that we've run through the basic settings, let's head back to the "Layout Settings" tab.

The first few settings you'll see relate to how your site content is displayed.

  • Max Text Width: You can use this setting to define a maximum line length for text elements. This will help give you a default that provides a comfortable reading width. This field uses the ch CSS unit (characters).
  • Max Content Width: Here you can set the maximum size your main content should be allowed to grow to. This field uses the em CSS unit, and defaults to the equivalent of 1200px.
  • Content Padding: Set the amount of horizontal padding applied when your content shrinks below the maximum content width. This field uses the px CSS unit.

The remaining settings relate to the behavior of the navigation menu. You can choose a menu style here, either Dropdown or Popover. You can also define your own menu style from scratch, see the custom menu guide for details.

The last setting controls the lifecycle time of the menu's animations in milliseconds. For example, the default value of 250 means that it will take 250 milliseconds for the menu to go from open to closed, and vice versa.

Scoped Files

Last but not least, let's talk about scoped files. With newtralize, you have the ability to include CSS, JavaScript, and PHP files on specific pages, menus, articles, or categories.

This means you can avoid having to get creative when naming your CSS classes and avoid loading files you don't need.

For information on creating your own scoped files, see the scoped files guide.

For now, in the "Scoped Code" tab, you will find settings to control how scoped files are identified. You can control how categories, articles, and menu items are referred to; either by alias or by ID. This is useful because scoped files will be named accordingly, for example a CSS file for the home menu item could be home.css or 123.css (assuming the menu item's ID was 123). Having the option to scope by ID is less intuitive, but helps avoid having to rename your scoped files when changing aliases.

Wrapping Up

That just about covers the basics of getting set up with newtralize! The template is designed to be minimal, but the features it provides can be pretty powerful. If you're looking to make the most of what newtralize can do, I'd recommend checking out these pages and sections:

Clone this wiki locally