How to change the Frontend Template
Changing the skin for Shinobi is as easy as changing the renderPaths object in conf.json.
For the tutorial we will use the boilerplate template.
1. Download the template and copy the folder named boilerplate to your Shinobi directory in the web/templates folder. If you do not have a templates folder then you must create one.
2. Open conf.json located in your Shinobi directory.
cd /home/Shinobi nano conf.json
3. Below is the default renderPaths configuration. It may not already be in your conf.json. Add or Modify the values to change the page designation as you see fit. You may avoid using a parameter if you want to use the page already given by Shinobi.
The pages are made in EJS format.
"renderPaths": {
"index" : "pages/index",
"home" : "pages/home",
"admin" : "pages/admin",
"super" : "pages/super",
"factorAuth" : "pages/factor",
"streamer" : "pages/streamer",
"embed" : "pages/embed",
"mjpeg" : "pages/mjpeg",
"grid" : "pages/grid"
}
This is what the renderPaths object looks like for the boilerplate template. You may notice a parameter not seen in the default object, handler. This parameter is for running custom scripts in the back end on load.
"renderPaths": {
"home" : "templates/boilerplate/views/index",
"handler" : "templates/boilerplate/handler"
}
After you are done your conf.json might look like this.
{
"port": 8080,
"addStorage": [
{
"name": "second",
"path": "__DIR__/videos2"
}
],
"db": {
"host": "127.0.0.1",
"user": "majesticflame",
"password": "",
"database": "ccio",
"port": 3306
},
"mail": {
"service": "gmail",
"auth": {
"user": "[email protected]",
"pass": "your_password_or_app_specific_password"
}
},
"cron": {
"key": "change_this_to_something_very_random__just_anything_other_than_this"
},
"pluginKeys": {
"Motion": "change_this_to_something_very_random____make_sure_to_match__/plugins/motion/conf.json",
"OpenCV": "change_this_to_something_very_random____make_sure_to_match__/plugins/opencv/conf.json",
},
"renderPaths": {
"home" : "templates/boilerplate/views/index",
"handler" : "templates/boilerplate/handler"
}
}
4. Save and restart Shinobi to activate the new pages.
pm2 restart camera