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" : [
{
"loadCoreStyle": {
"odometer": false,
"common": false,
"magnific-popup": false
},
"style" : ["your_theme_css"],
"rtl_style": [
"rtl"
],
"script" : [],
"blade" : [],
"navbarArea": "navbar",
"breadcrumbArea": "breadcrumb"
}
],
"footerHook" : [
{
"loadCoreScript": {
"odometer": false,
"viewport.jquery": false,
"main": false
},
"style" : [],
"script" : [
"custom_script",
"main"
],
"blade" : [],
"widgetArea": "footer"
}
]
}slug must be unique and same name as your custom theme directory.
statuswill determine if you want to activate or deactivate the themescreenshotprimaryaccepts 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).
headerHookcontains your custom CSS, JS and blade file which will be rendered in the head of the application.loadCoreStyleaccepts multiple CSS file names (without extension) in a boolean manner. If any CSS file name is false then the file will not be loaded from the script core assets in this theme. If you place true or do not add the file name will load the file in this theme.stylefield 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 > cssscriptfield 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 > jsbladefield 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 > headerHookTemplatenavbarAreafield accepts a single value. Place here your theme navbar blade name and place the file inside the headerNavbarArea directory in the root theme directory.
File directory: yourThemeDirectory > headerNavbarAreabreadcrumbAreafield accepts a single value. Place here your theme breadcrumb blade name and place the file inside the headerBreadcrumbArea directory in the root theme directory.
File directory: yourThemeDirectory > headerBreadcrumbArea
footerHookcontains your custom CSS, JS and blade file which will be rendered in the footer section of the application.loadCoreScriptaccepts multiple JavaScript file names (without extension) in a boolean manner. If any JavaScript file name is false then the file will not be loaded from the script core assets in this theme. If you place true or do not add the file name will load the file in this theme.stylefield 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 > cssscriptfield 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 > jsbladefield 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 > footerHookTemplatewidgetAreafield accepts a single value. Place here your theme footer blade name and place the file inside the footerWidgetArea directory in the root theme directory.
File directory: yourThemeDirectory > footerWidgetArea
Root CSS file names are the following,
"bootstrap.min",
"animate",
"slick",
"nice-select",
"line-awesome.min",
"jquery.ihavecookies",
"odometer",
"common",
"magnific-popup",
"helpers",
"toastr",
"loader"Root JavaScript file names are the following,
"jquery-3.6.1.min",
"jquery-migrate-3.4.0.min",
"bootstrap.bundle.min",
"jquery.lazy.min",
"slick",
"odometer",
"viewport.jquery",
"wow",
"jquery.nice-select",
"jquery.syotimer.min",
"sweetalert2",
"toastr.min",
"jquery.nicescroll.min",
"nouislider-8.5.1.min",
"custom-alert-message",
"main",
"star-rating.min",
"md5"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
