Theme Development

⌘K
  1. Home
  2. Docs
  3. MultiSaas – Multi-T...
  4. Developer Documentation
  5. Theme Development

Theme Development

Custom Theme Development
Create your custom directory inside the “themes” directory with a unique name in small letters with no white space, If white space is needed replace it with a “_” sign. The name must be unique and in snake case.
themes Directory: core > resources > views > themes

The directory must contain a JSON file named theme.json as follows,

{
    "name" : "Theme Name",
    "slug" : "theme_slug",
    "description" : "Your Theme Description",
    "author" : "Your Theme Author Name",
    "version" : "1.0.0",
    "status" : true,
    "screenshot" : [
        {
            "primary" : "primary.jpg",
            "sort" : "desc"
        }
    ],
    "headerHook" : [
        {
            "style" : ["your_theme_css"],
            "script" : [],
            "blade" : []
        }
    ],
    "footerHook" : [
        {
            "style" : [],
            "script" : [],
            "blade" : []
        }
    ]
}

slug must be the unique and same name as your custom theme directory.

  • status will determine if you want to activate or deactivate the theme
  • screenshot
    • primary accepts an image file name. It will be the default preview image of the theme. It accepts only three types of image files (jpg, jpeg, png).
  • headerHook contains your custom CSS, JS and blade file which will be rendered in the head of the application.
    • style field accepts an array you can place single/multiple CSS file names. It will be placed in the head section of the application automatically.
      File directory: yourThemeDirectory > assets > css
    • script field accepts an array you can place single/multiple js file names. It will be placed in the head section of the application automatically.
      File directory: yourThemeDirectory > assets > js
    • blade field accepts an array you can place single/multiple blade file names. These blades will be rendered after the navbar and breadcrumb on the entire application.
      File directory: yourThemeDirectory > headerHookTemplate
  • footerHook contains your custom CSS, JS and blade file which will be rendered in the footer section of the application.
    • style field accepts an array you can place single/multiple CSS file names. It will be placed in the footer section of the application automatically.
      File directory: yourThemeDirectory > assets > css
    • script field accepts an array you can place single/multiple js file names. It will be placed in the footer section of the application automatically
      File directory: yourThemeDirectory > assets > js
    • blade field accepts an array with a single name, you can place single blade file names. You can render the blade files anywhere you want using renderFooterHookBladeFile() function.
      File directory: yourThemeDirectory > footerHookTemplate

Entire fronted blade files will be in frontend directory inside your custom theme directory
File directory: yourThemeDirectory > frontend

Check out our custom theme structure repository on GitHub
https://github.com/xgenious-official/nazmart-theme-sample

Was this article helpful to you? No 2 Yes 3

How can we help?