Scaffold out a King of App theme
npm install generator-koa-theme
Scaffold out a King of App theme.
1. If you haven't, install Yeoman and Bower:
``
npm install -g bower
`
npm install -g yo
2. Then, install the generator-koa-theme:
`
npm install -g generator-koa-theme
1. Download and start the King of App visualizer.
`
git clone -b dev git@github.com:KingofApp/com.kingofapp.visualizer.git
`
cd com.kingofapp.visualizer
`
npm start
2. Go to themes path and create a new theme with the generator.
`
cd com.kingofapp.visualizer/app/themes
`
yo koa-theme mythemename
Note: mythemename will be the ID of the theme.
Now, you have a scaffold like this:
`
koapp-theme-mythemename
├── elements
│ ├── mythemename-badge
│ │ ├── demo
│ │ │ └── index.html
│ │ └── mythemename-badge.html
│ ├── ...
│
├── styles
│ ├── default-theme.html
│ └── main.css
├── .bowerrc
├── .gitignore
├── bower.json
├── config.json
└── koapp-theme-mythemename.html
3. Update the theme object in the app/core/structure.json:
`json`
{
"config": {
...
"theme": {
"identifier": "koapp-theme-mythemename",
"path": "themes/koapp-theme-mythemename/koapp-theme-mythemename.html"
},
...
},
...
}
4. Begins to change all elements as you want!
You can see the changes:
* In the visualizer app: http://localhost:9001
* In each element demo. Example: