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 themescreenshot
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 > cssscript
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 > jsblade
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 > cssscript
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 > jsblade
field accepts an array with a single name, you can place single blade file names. You can render the blade files anywhere you want usingrenderFooterHookBladeFile()
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