- Modern front-end knowledge
- Checkout https://doc.wallabag.org/en/developer/front_end.html
Add your theme name inside app/config/config.yml
, key liip_theme.themes
:
liip_theme:
load_controllers: false
themes:
- baggy
- material
- mynewtheme
autodetect_theme: wallabag_core.helper.detect_active_theme
Add your theme to webpack inside app/config/webpack/common.js
:
entry: {
material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
mytheme: path.join(rootDir, './app/Resources/static/themes/mytheme/index.js'),
public: path.join(rootDir, './app/Resources/static/themes/_global/share.js'),
},
Create the app/Resources/static/themes/mytheme/
folder. In that repository should be a file named index.js
which includes all JS (ES6 and below) and (S)CSS, both in respective subfolders css/
and js
.
Create the src/Wallabag/CoreBundle/Resources/views/themes/mytheme/
. Then it is recommended to copy everything from inside the material
theme folder inside your new theme folder, and from here adapt things.
Just clear the cache, change the theme in the config panel to your new theme and start creating it. Use the npm/yarn tasks to build the assets. Don't forget to look to this page : https://doc.wallabag.org/en/developer/front_end.html
Unless I'm missing something and I am sure I am, not everything can be changed via editing twig files.