Tailor Starter Documentation
Get ThemeOctober CMS DocsGitHub
  • Getting Started
  • Pages
    • Blocks
      • Hero Section
      • Section
        • Advanced Tab
        • Content Column
        • Buttons Column
        • Image Column
        • Posts Column
        • Events Column
        • Products Column
        • FAQs Column
        • Form Column
        • Search Column
      • Posts Section
      • Events Section
      • Products Section
      • Form Section
      • FAQs Section
      • Search Section
      • Creating Blocks
      • Editing Blocks
  • Menus
    • Main Menu
    • Secondary Menu
    • Social Menu
  • Blog
    • Posts
    • Authors
    • Categories
  • Events
  • Shop
    • Products
    • Product Categories
    • Product Properties
    • Orders
    • Cart
  • FAQs
  • Forms
    • Submissions
  • Search
  • Icons
  • Settings
  • Editing Blueprint Files
  • Seed Data
Powered by GitBook
On this page
  • Introduction
  • Prerequisites
  • Plugin Dependencies
  • Get Started
  • General Structure of Theme
  • Top Level Files in the partials folder
  • Other Files
Edit on GitHub

Getting Started

NextPages

Last updated 2 years ago

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

  • Some knowledge of PHP

  • Some Knowledge of Bootstrap 5

Plugin Dependencies

This theme depends on the following plugins:

    • 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

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

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

  • Sets the locale if there are any available sites

head.htm

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

    • 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

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

foot.htm

  • Global Footer Code

  • Footer Code from the current page

Other Files

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

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 . Whenever you make changes to the theme in the editor, it copies the data and puts it in the child theme.

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

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

Includes assets from the file

Pulls the following information from the

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 component. You can also include CDN assets here as well. It's a good idea to wrap your CDN assets in a placeholder to ensure files are included correctly.

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

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

Cart AJAX Functions using the

Tailor
Artistro08.TailorStarterCompanion
here
pagefinder
main_menu.yaml
assets.htm
settings.yaml
[resources]
{% put styles %}
Social Menu
settings.yaml
{% scripts %}
OctoberCMS Javascrpt API
Framework Extras