Apliqo UX : Change the background image of login page

Hello,
After reading this post Customizing Apliqo UX.
i added the code below in Apq-c3-custom/css/scss/_custom-style.scss
but it didn’t work. the default backround still there.

@media (min-width: 400px ) {
.modal-fullpage {
background: #030303 url(…/…/apq-c3-custom/images/papsbgd.jpg);
background-position: center;
background-size: cover;
}
}

any idea on how to do it ?
Thanks.

Make sure that you have cleared your cache . and have the disabled cache Chrome enabled

https://www.google.com/amp/s/www.thewindowsclub.com/empty-cache-hard-reload-chrome%3Famp

https://www.webinstinct.com/faq/how-to-disable-browser-cache

Add !important after the
url(image path) !important ;
Css style

Hello,
i did it but it didn’t work.
I think the problem is that it always charge the ancien file because when i inspect the css file in chrome. I don’t see the modification i done.

Remove any files in the custom folder that have been duplicated and renamed old or anything of that nature only the files Present on the install should remain

there is only one _custom-style file. Just in chrome. when i restart the apliqo server and empty the cache. i still see the file without my modifications.

Is Gulp running fine?

That was my next question is gulp installed?

hi @aba

I would take a different path to solve this problem.
In the file default.constant.js there is a line called:
'LOGIN_LOGOUT_BACKGROUND': 'your_background_file_name.jpg',
You can use this one to define any image as a background of the login page.

Regards,
Radu

1 Like

There is error when i lanch :

  • npm install
PS C:\Users\Abdoul M BA> cd C:\ApliqoServer\webapps\TestPaps\
PS C:\ApliqoServer\webapps\TestPaps> npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies    
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your 
dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\ApliqoServer\webapps\TestPaps\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\ApliqoServer\webapps\TestPaps\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\ApliqoServer\\webapps\\TestPaps\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\ApliqoServer\webapps\TestPaps\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Python310\python.EXE
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Command failed: C:\Python310\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack 
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19042
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\ApliqoServer\\webapps\\TestPaps\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\ApliqoServer\webapps\TestPaps\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Abdoul M BA\AppData\Local\npm-cache\_logs\2022-01-31T13_40_58_877Z-debug-0.log
  • npm install gulp-cli -g
PS C:\ApliqoServer\webapps\TestPaps> npm install gulp-cli -g
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

changed 266 packages, and audited 267 packages in 19s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Hello.
Thank you. it works :smiley:
Regards,

How did you resolve these errors ?

As long as npm and gulp is correctly installed, the easy way to resolve npm errors on is removing the node_module folder and running the npm install in Visual Studio Code relative to your application folder

1 Like