Getting Started

Introduction

This theme supplies the user some simple starter templates to get started with October's Tailor Feature. It uses Bootstrap 5 to generate menus, general HTML content, and more.

Prerequisites

To get started with this theme, you'll need the following

• October CMS v3.x

• A knowledge of Tailor

• Some knowledge of PHP

• Some Knowledge of Bootstrap 5

Plugin Dependencies

This theme depends on the following plugins:

• Artistro08.TailorStarterCompanion

  • For Order Email management with the Shop Feature

  • For Email Notifications with the Form Feature

Get Started

Install the theme and dependencies via artisan(From the October CMS Marketplace):

php artisan theme:install Artistro08.TailorStarterTheme

All theme dependencies should be installed automatically

Once installed, run the seeding function for the theme:

php artisan theme:seed artistro08-tailorstartertheme --root

This will initialize the Tailor structure, so you can add content.

Note

This theme automatically creates a child theme. The directory name is artistro08-tailorstarter-child. Use that theme to make edits to the code. To learn more info about child themes, check here. Whenever you make changes to the theme in the editor, it copies the data and puts it in the child theme.

Once you've seeded the theme, head over to the content settings in the backend and select the Homepage. Optionally, fill out the Site Name field as well. Find this at /[backend_url]/tailor/globals/content_settings where [backend_url] is your backend URI set in your .env

General Structure of Theme

The theme is structured in a way where you can edit almost any file independently. Below are the the main files that give a general structure of the theme.

Top Level Files in the partials folder

header.htm

This file contains the Bootstrap 5 Navbar and navigation generated by the theme. It uses the pagefinder form widget to display menu items. It also does the followinShows the website name and logo.

• Shows the cart button (When an item is in the cart)

• Sets the locale if there are any available sites

The menu depth is only 2 levels, defined in the main_menu.yaml partial.

head.htm

The head partial is used to display general meta tags and a bunch of other stuff including the following:

• Includes assets from the assets.htm file

• Pulls the following information from the settings.yaml

  • Favicons

  • Global Header Code

• Pulls in the following information from the current page

  • Meta Info (title, keywords, description)

  • OG Tags (Facebook, Twitter, LinkedIn, etc.)

  • Robots Info

  • Current Page Header Code

assets.htm

This file is used to include assets throughout the site, mainly the core Bootstrap files. You can use it to include assets in your site via the [resources] component. You can also include CDN assets here as well. It's a good idea to wrap your CDN assets in a {% put styles %} placeholder to ensure files are included correctly.

If you plan on including assets conditionally, it's a good idea to use the CMS page ID to display that content on the page like so:

{% if this.page.id == "events" %}
    <link rel="stylesheet" href="https://example.com/events.css">
{% endif %}

footer.htm

This file is used to display the Secondary Menu & Social Menu throughout the site. It also uses the settings.yaml file to display the site name. It includes a Copyright Line with the current year automatically generated.

foot.htm

This file is used to display {% scripts %} before the closing </body> tag. Additionally, this also includes the following content:

• Cart AJAX Functions using the OctoberCMS Javascrpt API

• Framework Extras

• Global Footer Code

• Footer Code from the current page

Other Files

Other files are explained in the respected areas of the documentation.