From 4f498cce689598a6b4314f8212775c8b05513649 Mon Sep 17 00:00:00 2001 From: reloxx13 Date: Tue, 25 Nov 2025 13:14:00 +0100 Subject: [PATCH 1/3] add support for custom css style --- .gitignore | 3 +++ assets/sass/framework.scss | 3 +++ docs/configuration/index.md | 3 --- docs/customizing/index.md | 4 ++++ docs/{configuration => customizing}/sounds.md | 0 docs/customizing/styles.md | 23 +++++++++++++++++++ gulpfile.mjs | 9 ++++++++ mkdocs_remote.yml | 4 ++++ 8 files changed, 46 insertions(+), 3 deletions(-) delete mode 100644 docs/configuration/index.md create mode 100644 docs/customizing/index.md rename docs/{configuration => customizing}/sounds.md (100%) create mode 100644 docs/customizing/styles.md diff --git a/.gitignore b/.gitignore index 3d95f77ea..1f8270237 100644 --- a/.gitignore +++ b/.gitignore @@ -54,3 +54,6 @@ tools/*/vendor # rembg virtual environment scripts/rembg_venv/ + +# ignore user custom sass file +/assets/sass/_custom.scss diff --git a/assets/sass/framework.scss b/assets/sass/framework.scss index 279273ba4..6ea29147a 100644 --- a/assets/sass/framework.scss +++ b/assets/sass/framework.scss @@ -34,3 +34,6 @@ // Themes @use 'themes/classic'; @use 'themes/modern'; + +// Custom CSS +@use 'custom'; diff --git a/docs/configuration/index.md b/docs/configuration/index.md deleted file mode 100644 index cfc1d1b55..000000000 --- a/docs/configuration/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Configuration - -## [Sounds](sounds.md) diff --git a/docs/customizing/index.md b/docs/customizing/index.md new file mode 100644 index 000000000..44f190e13 --- /dev/null +++ b/docs/customizing/index.md @@ -0,0 +1,4 @@ +# Customizing + +## [Sounds](sounds.md) +## [Customizing SCSS styles](styles.md) diff --git a/docs/configuration/sounds.md b/docs/customizing/sounds.md similarity index 100% rename from docs/configuration/sounds.md rename to docs/customizing/sounds.md diff --git a/docs/customizing/styles.md b/docs/customizing/styles.md new file mode 100644 index 000000000..59c9b6610 --- /dev/null +++ b/docs/customizing/styles.md @@ -0,0 +1,23 @@ +# Customizing SCSS styles + +Photobooth uses a small SCSS build pipeline based on `gulp` and `sass`. You can add your own styles that will be compiled to CSS and loaded together with the default styles. + +## Recommended: `_custom.scss` (loaded automatically) + +This means: + +- If `assets/sass/_custom.scss` exists, it is automatically imported into `framework.scss`. +- No template changes are needed – your styles are bundled into `resources/css/framework.css`, which is already loaded by Photobooth. + +To use this: + +1. Create a new file called `_custom.scss` in `assets/sass`. +2. Add your overrides or additional styles to this file. + +## Building the CSS + +From the project root run: + +- `npm install` (first time only, to install Node.js dependencies) +- `npm run build:sass` to only compile SCSS, or +- `npm run build` to run the full asset build (SCSS, JS, etc.). diff --git a/gulpfile.mjs b/gulpfile.mjs index aa03bddf3..45627fcba 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -21,6 +21,15 @@ gulp.task('sass', async function () { try { const scssDir = './assets/sass'; const outputDir = './resources/css'; + + const optionalCustomCss = path.join(scssDir, '_custom.scss'); + if (!fs.existsSync(optionalCustomCss)) { + fs.writeFileSync( + optionalCustomCss, + '// auto-generated stub for optional custom overrides\n' + ); + } + const files = fs.readdirSync(scssDir); const scssFiles = files.filter(file => path.extname(file) === '.scss' && file !== 'tailwind.admin.scss'); diff --git a/mkdocs_remote.yml b/mkdocs_remote.yml index 2904d1aac..e8311290c 100644 --- a/mkdocs_remote.yml +++ b/mkdocs_remote.yml @@ -39,6 +39,10 @@ nav: - gphoto2 Troubleshooting: faq/gphoto2-troubleshooting.md - GO2RTC Troubleshooting: faq/go2rtc-troubleshooting.md - Tutorials: faq/tutorials.md + - Customizing: + - Overview: customizing/index.md + - Sounds: customizing/sounds.md + - CSS styles: customizing/styles.md - Community & Contribution: - Chat on Telegram: https://t.me/PhotoboothGroup - Contributor Covenant Code of Conduct: code_of_conduct.md From 483be592fc46aa84570fcb9c9c819389a6844cae Mon Sep 17 00:00:00 2001 From: reloxx13 Date: Wed, 26 Nov 2025 17:22:12 +0100 Subject: [PATCH 2/3] move custom sass file in private folder --- .gitignore | 3 --- assets/sass/framework.scss | 2 +- gulpfile.mjs | 7 ++++++- lib/boot.php | 1 + src/Enum/FolderEnum.php | 3 +++ 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 1f8270237..3d95f77ea 100644 --- a/.gitignore +++ b/.gitignore @@ -54,6 +54,3 @@ tools/*/vendor # rembg virtual environment scripts/rembg_venv/ - -# ignore user custom sass file -/assets/sass/_custom.scss diff --git a/assets/sass/framework.scss b/assets/sass/framework.scss index 6ea29147a..82d7a8355 100644 --- a/assets/sass/framework.scss +++ b/assets/sass/framework.scss @@ -36,4 +36,4 @@ @use 'themes/modern'; // Custom CSS -@use 'custom'; +@use '../../private/sass/custom'; diff --git a/gulpfile.mjs b/gulpfile.mjs index 45627fcba..a75ad755a 100644 --- a/gulpfile.mjs +++ b/gulpfile.mjs @@ -22,7 +22,12 @@ gulp.task('sass', async function () { const scssDir = './assets/sass'; const outputDir = './resources/css'; - const optionalCustomCss = path.join(scssDir, '_custom.scss'); + const privateScssDir = './private/sass'; + + // Ensure the private sass directory exists + fs.mkdirSync(privateScssDir, { recursive: true }); + // Create an optional _custom.scss file if it doesn't exist + const optionalCustomCss = path.join(privateScssDir, '_custom.scss'); if (!fs.existsSync(optionalCustomCss)) { fs.writeFileSync( optionalCustomCss, diff --git a/lib/boot.php b/lib/boot.php index fa0194d35..f07726d46 100644 --- a/lib/boot.php +++ b/lib/boot.php @@ -30,6 +30,7 @@ FileUtility::createDirectory(FolderEnum::THUMBS->absolute()); FileUtility::createDirectory(FolderEnum::TEMP->absolute()); FileUtility::createDirectory(FolderEnum::PRIVATE->absolute()); +FileUtility::createDirectory(FolderEnum::SASS->absolute()); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/fonts')); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/images/background')); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/images/frames')); diff --git a/src/Enum/FolderEnum.php b/src/Enum/FolderEnum.php index 768e95c36..2e5380aa6 100644 --- a/src/Enum/FolderEnum.php +++ b/src/Enum/FolderEnum.php @@ -23,6 +23,8 @@ enum FolderEnum: string case RESOURCES = 'resources'; case VAR = 'var'; + case SASS = 'sass'; + public function public(): string { return PathUtility::getPublicPath($this->value); @@ -50,6 +52,7 @@ public function identifier(): string FolderEnum::PRIVATE => 'private', FolderEnum::RESOURCES => 'resources', FolderEnum::VAR => 'var', + FolderEnum::SASS => 'sass', }; } } From 7d2bf1ec3581574137a21544981b0900fc5dbde8 Mon Sep 17 00:00:00 2001 From: reloxx13 Date: Fri, 28 Nov 2025 08:02:25 +0100 Subject: [PATCH 3/3] rquested fixes --- docs/customizing/styles.md | 4 ++-- lib/boot.php | 1 - src/Enum/FolderEnum.php | 3 --- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/customizing/styles.md b/docs/customizing/styles.md index 59c9b6610..bcef77e3c 100644 --- a/docs/customizing/styles.md +++ b/docs/customizing/styles.md @@ -6,12 +6,12 @@ Photobooth uses a small SCSS build pipeline based on `gulp` and `sass`. You can This means: -- If `assets/sass/_custom.scss` exists, it is automatically imported into `framework.scss`. +- If `private/sass/_custom.scss` exists, it is automatically imported into `framework.scss`. - No template changes are needed – your styles are bundled into `resources/css/framework.css`, which is already loaded by Photobooth. To use this: -1. Create a new file called `_custom.scss` in `assets/sass`. +1. Create a new file called `_custom.scss` in `private/sass`. 2. Add your overrides or additional styles to this file. ## Building the CSS diff --git a/lib/boot.php b/lib/boot.php index f07726d46..fa0194d35 100644 --- a/lib/boot.php +++ b/lib/boot.php @@ -30,7 +30,6 @@ FileUtility::createDirectory(FolderEnum::THUMBS->absolute()); FileUtility::createDirectory(FolderEnum::TEMP->absolute()); FileUtility::createDirectory(FolderEnum::PRIVATE->absolute()); -FileUtility::createDirectory(FolderEnum::SASS->absolute()); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/fonts')); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/images/background')); FileUtility::createDirectory(PathUtility::getAbsolutePath('private/images/frames')); diff --git a/src/Enum/FolderEnum.php b/src/Enum/FolderEnum.php index 2e5380aa6..768e95c36 100644 --- a/src/Enum/FolderEnum.php +++ b/src/Enum/FolderEnum.php @@ -23,8 +23,6 @@ enum FolderEnum: string case RESOURCES = 'resources'; case VAR = 'var'; - case SASS = 'sass'; - public function public(): string { return PathUtility::getPublicPath($this->value); @@ -52,7 +50,6 @@ public function identifier(): string FolderEnum::PRIVATE => 'private', FolderEnum::RESOURCES => 'resources', FolderEnum::VAR => 'var', - FolderEnum::SASS => 'sass', }; } }